دمج الزاوي العالمي

باستخدام واجهة سطر الأوامر (CLI) المدركة لإطار عمل Firebase، يمكنك نشر تطبيق Angular الخاص بك على Firebase وتقديم محتوى ديناميكي لمستخدميك.

قبل ان تبدأ

قبل البدء في نشر تطبيقك على Firebase، راجع المتطلبات والخيارات التالية:

  • الإصدار 12.1.0 من Firebase CLI أو الإصدارات الأحدث. تأكد من تثبيت واجهة سطر الأوامر (CLI) باستخدام الطريقة المفضلة لديك.
  • اختياري: تم تمكين الفوترة في مشروع Firebase الخاص بك (مطلوب إذا كنت تخطط لاستخدام SSR)

  • اختياري: AngularFire

تهيئة Firebase

للبدء، قم بتهيئة Firebase لمشروع إطار العمل الخاص بك. استخدم Firebase CLI لمشروع جديد، أو قم بتعديل firebase.json لمشروع موجود.

تهيئة مشروع جديد

  1. في Firebase CLI، قم بتمكين معاينة أطر عمل الويب:
    firebase experiments:enable webframeworks
  2. قم بتشغيل أمر التهيئة من واجهة سطر الأوامر ثم اتبع المطالبات:

    firebase init hosting

  3. أجب بنعم على السؤال "هل تريد استخدام إطار عمل ويب؟ (تجريبي)"

  4. اختر دليل مصدر الاستضافة الخاص بك؛ قد يكون هذا تطبيقًا Angular موجودًا.

  5. إذا طُلب منك، اختر Angular.

تهيئة مشروع موجود

قم بتغيير إعدادات الاستضافة في firebase.json للحصول على خيار source ، بدلاً من الخيار public . على سبيل المثال:

{
  "hosting": {
    "source": "./path-to-your-angular-workspace"
  }
}

خدمة محتوى ثابت

بعد تهيئة Firebase، يمكنك تقديم محتوى ثابت باستخدام أمر النشر القياسي:

firebase deploy

العرض المسبق للمحتوى الديناميكي

لعرض المحتوى الديناميكي مسبقًا في Angular، تحتاج إلى إعداد Angular Universal. يتوقع Firebase CLI أن يكون Express Engine:

ng add @nguniversal/express-engine

راجع دليل Angular Universal لمزيد من المعلومات.

أضف عناوين URL للعرض المسبق

افتراضيًا، سيتم عرض الدليل الجذر فقط مسبقًا. يمكنك إضافة مسارات إضافية عن طريق تحديد موقع خطوة العرض المسبق في angular.json وإضافة المزيد من المسارات:

{
  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "routes": ["/", "ANOTHER_ROUTE", "AND_ANOTHER"]
    },
    "configurations": {
      /* ... */
    },
    "defaultConfiguration": "production"
  }
}

يحترم Firebase أيضًا ملف guessRoutes أو ملف routes.txt في جذر الاستضافة، إذا كنت بحاجة إلى مزيد من التخصيص. راجع دليل العرض المسبق الخاص بـ Angular لمزيد من المعلومات حول هذه الخيارات.

اختياري: أضف وحدة الخادم

نشر

عندما تقوم بالنشر باستخدام firebase deploy ، يقوم Firebase بإنشاء حزمة المتصفح وحزمة الخادم لديك وعرض التطبيق مسبقًا. يتم نشر هذه العناصر في وظائف الاستضافة والسحابة لـ Firebase.

نشر مخصص

تفترض واجهة سطر أوامر Firebase أن لديك خطوات الخادم والإنشاء والعرض المسبق في مخططاتك باستخدام تكوين الإنتاج.

إذا كنت ترغب في تخصيص افتراضات واجهة سطر الأوامر (CLI)، فقم بتكوين ng deploy وتحرير التكوين في angular.json . على سبيل المثال، يمكنك تعطيل SSR وتقديم المحتوى المعروض مسبقًا حصريًا عن طريق إزالة serverTarget :

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "browserTarget": "app:build:production",
      "serverTarget": "app:server:production",
      "prerenderTarget": "app:prerender:production"
    }
  }
}

اختياري: التكامل مع Firebase JS SDK

عند تضمين أساليب Firebase JS SDK في كل من حزم الخادم والعميل، يمكنك الحماية من أخطاء وقت التشغيل عن طريق التحقق من isSupported() قبل استخدام المنتج. لا يتم دعم كافة المنتجات في كافة البيئات .

اختياري: التكامل مع Firebase Admin SDK

ستفشل حزم الإدارة إذا تم تضمينها في إصدار المتصفح الخاص بك، لذا فكر في توفيرها في وحدة الخادم الخاصة بك وإدخالها كتبعية اختيارية:

// your-component.ts
import type { app } from 'firebase-admin';
import { FIREBASE_ADMIN } from '../app.module';

@Component({...})
export class YourComponent {

  constructor(@Optional() @Inject(FIREBASE_ADMIN) admin: app.App) {
    ...
  }
}

// app.server.module.ts
import * as admin from 'firebase-admin';
import { FIREBASE_ADMIN } from './app.module';

@NgModule({
  …
  providers: [
    …
    { provide: FIREBASE_ADMIN, useFactory: () => admin.apps[0] || admin.initializeApp() }
  ],
})
export class AppServerModule {}

// app.module.ts
import type { app } from 'firebase-admin';

export const FIREBASE_ADMIN = new InjectionToken<app.App>('firebase-admin');

قم بتقديم محتوى ديناميكي بالكامل باستخدام SSR

اختياري: التكامل مع مصادقة Firebase

تحافظ أدوات نشر Firebase المدركة لإطار عمل الويب تلقائيًا على مزامنة حالة العميل والخادم باستخدام ملفات تعريف الارتباط. سيحتوي كائن Express res.locals اختياريًا على مثيل تطبيق Firebase المصادق عليه ( firebaseApp ) والمستخدم الذي سجل الدخول حاليًا ( currentUser ). يمكن إدخال ذلك في الوحدة النمطية الخاصة بك عبر رمز الطلب (الذي تم تصديره من @nguniversal/express-engine/tokens).