Angular Universal را ادغام کنید

با استفاده از Firebase Framework-Aware CLI، می توانید برنامه Angular خود را در Firebase مستقر کنید و محتوای پویا را به کاربران خود ارائه دهید.

قبل از اینکه شروع کنی

قبل از اینکه شروع به استقرار برنامه خود در Firebase کنید، شرایط و گزینه های زیر را بررسی کنید:

Firebase را راه اندازی کنید

برای شروع، Firebase را برای پروژه چارچوب خود مقداردهی کنید. از Firebase CLI برای یک پروژه جدید استفاده کنید، یا firebase.json برای یک پروژه موجود تغییر دهید.

یک پروژه جدید را راه اندازی کنید

  1. در Firebase CLI، پیش‌نمایش چارچوب‌های وب را فعال کنید:
    firebase experiments:enable webframeworks

  2. دستور مقداردهی اولیه را از CLI اجرا کنید و سپس دستورات را دنبال کنید:

    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 بسته مرورگر شما، بسته سرور شما را می سازد و برنامه را از قبل اجرا می کند. این عناصر در Hosting و Cloud Functions برای Firebase مستقر شده اند.

استقرار سفارشی

Firebase CLI فرض می کند که شما مراحل سرور، ساخت و پیش اجرا را در شماتیک های خود با پیکربندی تولید دارید.

اگر می‌خواهید مفروضات 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 Authentication

ابزار استقرار Firebase آگاه از چارچوب وب، به طور خودکار وضعیت سرویس گیرنده و سرور را با استفاده از کوکی ها همگام نگه می دارد. شی Express res.locals به صورت اختیاری حاوی یک نمونه برنامه Firebase احراز هویت ( firebaseApp ) و کاربر وارد شده فعلی ( currentUser ) خواهد بود. این را می توان از طریق توکن REQUEST (صادر شده از @nguniversal/express-engine/tokens) به ماژول شما تزریق کرد.