שילוב Angular Universal

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

לפני שמתחילים

לפני שמתחילים לפרוס את האפליקציה ב-Firebase, כדאי לעיין בדרישות ובאפשרויות הבאות:

• Firebase CLI בגרסה 12.1.0 ואילך. חשוב להתקין את ה-CLI בשיטה המועדפת עליכם.

• אופציונלי: צריך להפעיל את החיוב בפרויקט Firebase (חובה אם אתם מתכננים להשתמש ב-SSR)

• אופציונלי: AngularFire

איך מפעילים את Firebase

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

איך מפעילים פרויקט חדש

1. מפעילים את התצוגה המקדימה של מסגרות האינטרנט ב-CLI של Firebase:

   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. ה-CLI של 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 יוצרת את החבילה לדפדפן ואת החבילה לשרת, ומבצעת עיבוד מראש של האפליקציה. הרכיבים האלה נפרסים ב-Hosting וב-Cloud Functions for Firebase.

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

ה-CLI של Firebase מניח שיש לכם שלבי שרת, build ורינדור מראש בתרשים עם הגדרות ייצור.

אם רוצים להתאים אישית את ההנחות של ה-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() לפני שמשתמשים במוצר כדי למנוע שגיאות זמן ריצה. לא כל המוצרים נתמכים בכל הסביבות.

אופציונלי: שילוב עם SDK של Firebase לאדמינים

אם חבילות האדמין ייכללו ב-build של הדפדפן, הן יכשלו, לכן מומלץ לספק אותן במודול השרת ולהחדיר אותן כיחסי תלות אופציונליים:

// 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, שמכירים את מסגרת ה-Web, מסנכרנים באופן אוטומטי את המצב של הלקוח והשרת באמצעות קובצי cookie. אובייקט res.locals של Express יכול להכיל, אם רוצים, מופע של אפליקציית Firebase מאומתת (firebaseApp) ואת המשתמש שנכנס כרגע (currentUser). אפשר להחדיר את הפרטים האלה למודול באמצעות אסימון הבקשה (יוצא מ-‎ @nguniversal/express-engine/tokens).