باستخدام واجهة سطر الأوامر (CLI) المدركة لإطار عمل Firebase، يمكنك نشر تطبيق Angular الخاص بك على Firebase وتقديم محتوى ديناميكي لمستخدميك.
قبل ان تبدأ
قبل البدء في نشر تطبيقك على Firebase، راجع المتطلبات والخيارات التالية:
- الإصدار 12.1.0 من Firebase CLI أو الإصدارات الأحدث. تأكد من تثبيت واجهة سطر الأوامر (CLI) باستخدام الطريقة المفضلة لديك.
اختياري: تم تمكين الفوترة في مشروع Firebase الخاص بك (مطلوب إذا كنت تخطط لاستخدام SSR)
اختياري: AngularFire
تهيئة Firebase
للبدء، قم بتهيئة Firebase لمشروع إطار العمل الخاص بك. استخدم Firebase CLI لمشروع جديد، أو قم بتعديل firebase.json
لمشروع موجود.
تهيئة مشروع جديد
- في Firebase CLI، قم بتمكين معاينة أطر عمل الويب:
firebase experiments:enable webframeworks
قم بتشغيل أمر التهيئة من واجهة سطر الأوامر ثم اتبع المطالبات:
firebase init hosting
أجب بنعم على السؤال "هل تريد استخدام إطار عمل ويب؟ (تجريبي)"
اختر دليل مصدر الاستضافة الخاص بك؛ قد يكون هذا تطبيقًا Angular موجودًا.
إذا طُلب منك، اختر 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).