שילוב Angular Universal

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

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

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

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

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

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

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

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