שלב Angular Universal

עם CLI המודע למסגרת של Firebase, אתה יכול לפרוס את אפליקציית Angular שלך ל-Firebase ולהגיש תוכן דינמי למשתמשים שלך.

לפני שאתה מתחיל

לפני שתתחיל בפריסת האפליקציה שלך ב-Firebase, סקור את הדרישות והאפשרויות הבאות:

Firebase CLI גרסה 12.1.0 ואילך. הקפד להתקין את ה-CLI בשיטה המועדפת עליך.
אופציונלי: חיוב מופעל בפרויקט Firebase שלך (נדרש אם אתה מתכנן להשתמש ב-SSR)
אופציונלי: AngularFire

אתחל את Firebase

כדי להתחיל, אתחל את Firebase עבור פרויקט המסגרת שלך. השתמש ב-Firebase CLI עבור פרויקט חדש, או שנה את firebase.json עבור פרויקט קיים.

אתחול פרויקט חדש

ב-Firebase CLI, אפשר את התצוגה המקדימה של מסגרות האינטרנט:
```
firebase experiments:enable webframeworks
```
הפעל את פקודת האתחול מה-CLI ולאחר מכן עקוב אחר ההנחיות:
```
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:

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 for Firebase.

פריסה מותאמת אישית

ה-CLI של 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 Authentication

כלי הפריסה של Firebase המודע למסגרת האינטרנט שומר באופן אוטומטי על מצב הלקוח והשרת מסונכרנים באמצעות קובצי Cookie. האובייקט Express res.locals יכיל באופן אופציונלי מופע של Firebase App מאומת ( firebaseApp ) ואת המשתמש המחובר כעת ( currentUser ). ניתן להחדיר זאת למודול שלך באמצעות אסימון REQUEST (מיוצא מ-@nguniversal/express-engine/tokens).