Integracja z Angular Universal

Dzięki interfejsowi wiersza poleceń opartego na platformie Firebase możesz wdrożyć w Firebase swoją aplikację Angular i udostępniać użytkownikom treści dynamiczne.

Zanim zaczniesz

Zanim zaczniesz wdrażać aplikację w Firebase, zapoznaj się z tymi wymaganiami i opcjami:

  • Interfejs wiersza poleceń Firebase w wersji 12.1.0 lub nowszej. Pamiętaj, aby zainstalować interfejs wiersza poleceń, korzystając z preferowanej metody.

  • Opcjonalnie: płatności włączone w projekcie Firebase (wymagane, jeśli planujesz używać SSR)

  • Opcjonalnie: AngularFire

Inicjowanie Firebase

Aby rozpocząć, zainicjuj Firebase w projekcie frameworka. W przypadku nowego projektu użyj interfejsu wiersza poleceń Firebase, a w przypadku istniejącego projektu zmodyfikuj firebase.json.

Inicjowanie nowego projektu

  1. W interfejsie wiersza poleceń Firebase włącz podgląd frameworków internetowych: 
    firebase experiments:enable webframeworks

  2. Uruchom polecenie inicjowania w interfejsie wiersza poleceń, a potem postępuj zgodnie z instrukcjami: 

    firebase init hosting

  3. Odpowiedz „tak” na pytanie „Czy chcesz używać sieciowej platformy programistycznej? (eksperymentalnie)”.

  4. Wybierz katalog źródłowy hostowania, który może być istniejącą aplikacją Angular.

  5. Jeśli pojawi się taka prośba, wybierz Angular.

Inicjowanie dotychczasowego projektu

Zmień konfigurację hostingu w firebase.json, aby udostępniała opcję source zamiast public. Przykład:

{
  "hosting": {
    "source": "./path-to-your-angular-workspace"
  }
}

Udostępnianie treści statycznych

Po zainicjowaniu Firebase możesz wyświetlać treści statyczne za pomocą standardowego polecenia wdrożenia:

firebase deploy

Wstępne renderowanie zawartości dynamicznej

Aby zrenderować dynamiczne treści w poprzedni sposób w Angular, musisz skonfigurować Angular Universal. Interfejs wiersza poleceń Firebase oczekuje, że Express Engine:

ng add @nguniversal/express-engine

Więcej informacji znajdziesz w przewodniku Angular Universal.

Dodawanie adresów URL do wstępnego renderowania

Domyślnie tylko katalog główny będzie wstępnie renderowany. Aby dodać dodatkowe ścieżki, odszukaj krok wstępnego renderowania w angular.json i dodaj więcej ścieżek:

{
  "prerender": {
    "builder": "@nguniversal/builders:prerender",
    "options": {
      "routes": ["/", "ANOTHER_ROUTE", "AND_ANOTHER"]
    },
    "configurations": {
      /* ... */
    },
    "defaultConfiguration": "production"
  }
}

Jeśli chcesz dostosować hosting w większym stopniu, Firebase uwzględnia też plik guessRoutes lub routes.txt w katalogu głównym hostingu. Więcej informacji o tych opcjach znajdziesz w przewodniku po prerenderowaniu w Angularze.

Opcjonalnie: dodaj moduł serwera

Wdróż

Gdy wdrażasz to rozwiązanie za pomocą firebase deploy, Firebase skompiluje pakiet dla przeglądarki i Twój serwer oraz wstępnie wyrenderuje aplikację. Te elementy są wdrażane do Hosting i Cloud Functions for Firebase.

Wdrażanie niestandardowe

Interfejs wiersza poleceń Firebase zakłada, że masz w schemacie kroki serwera, kompilacji i wstępnego renderowania z konfiguracją produkcyjną.

Jeśli chcesz dostosować założenia interfejsu wiersza poleceń, skonfiguruj ng deploy i edytuj konfigurację w pliku angular.json. Możesz na przykład wyłączyć SSR i wyświetlać wyłącznie wyrenderowane treści, usuwając serverTarget:

{
  "deploy": {
    "builder": "@angular/fire:deploy",
    "options": {
      "browserTarget": "app:build:production",
      "serverTarget": "app:server:production",
      "prerenderTarget": "app:prerender:production"
    }
  }
}

Opcjonalnie: zintegruj z pakietem Firebase JS SDK

Jeśli stosujesz metody Firebase JS SDK zarówno w pakietach serwera, jak i klienta, przed użyciem usługi, aby chronić się przed błędami czasu działania, sprawdź isSupported(). Nie wszystkie produkty są obsługiwane we wszystkich środowiskach.

Opcjonalnie: integracja z pakietem Firebase Admin SDK

Pakiety administracyjne nie będą działać, jeśli zostaną uwzględnione w kompilacji przeglądarki, więc rozważ ich dodanie w module serwera i ich wstrzykiwanie jako zależność opcjonalną:

// 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');

Obsługa całkowicie dynamicznych treści za pomocą SSR

Opcjonalnie: integracja z usługą Uwierzytelnianie Firebase

Narzędzie do wdrażania Firebase obsługujące framework internetowy automatycznie synchronizuje stan klienta i serwera za pomocą plików cookie. Obiekt Express res.locals może opcjonalnie zawierać uwierzytelniony egzemplarz aplikacji Firebase (firebaseApp) i obecnie zalogowanego użytkownika (currentUser). Można go wstrzyknąć do modułu za pomocą tokena REQUEST (wyeksportowanego z @nguniversal/express-engine/tokens).