دمج Angular Universal

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

قبل البدء

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

• الإصدار 12.1.0 من واجهة سطر الأوامر في Firebase أو إصدار أحدث احرص على تثبيت واجهة سطر الأوامر باستخدام طريقتك المفضّلة.

• اختياري: تم تفعيل الفوترة في مشروع Firebase (مطلوبة إذا كنت تخطط لاستخدام SSR)

• اختياري: AngularFire

إعداد Firebase

للبدء، يجب إعداد Firebase لمشروع إطار العمل. استخدام واجهة سطر الأوامر في Firebase لمشروع جديد أو تعديل firebase.json لمشروع حالي

إعداد مشروع جديد

1. في واجهة سطر الأوامر في Firebase، فعِّل معاينة أُطر العمل على الويب:

   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 أن يكون 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 أن لديك خطوات الخادم والإنشاء والعرض المُسبَق في المخططات من خلال إعداد إنتاج.

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

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

اختياري: الدمج مع حزمة تطوير البرامج (SDK) لمنصّة Firebase JS

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

اختياري: الدمج مع SDK لمشرف Firebase

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

// 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 الواعية لإطار العمل على الويب على مزامنة حالة العميل والخادم تلقائيًا باستخدام ملفات تعريف الارتباط. سيحتوي كائن res.locals Express بشكل اختياري على مثيل تطبيق Firebase تمت مصادقته (firebaseApp) والمستخدم الذي سجّل الدخول حاليًا (currentUser). ويمكن إدخال هذا في وحدتك عبر الرمز المميز REQUEST، (الذي يتم تصديره من @nguniversal/express-engine/tokens).