Integracja z Angular Universal

Dzięki wierszowi poleceń obsługującemu platformę Firebase możesz wdrażać aplikacje Angular do Firebase i przekazywać użytkownikom dynamiczne treści.

Zanim zaczniesz

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

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

• Opcjonalnie: włączone płatności 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 istniejącego projektu

Zmień konfigurację hostingu w sekcji firebase.json, aby użyć opcji source zamiast opcji 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 poprzednim czasie 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 wstępnie renderowany jest tylko katalog główny. 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 wstępnym renderowaniu w Angularu.

Opcjonalnie: dodaj moduł serwera

Wdróż

Gdy wdrażasz aplikację za pomocą firebase deploy, Firebase tworzy pakiet przeglądarki, pakiet serwera i wykonyje wstępną renderyzację aplikacji. Te elementy są wdrażane do Hosting i Cloud Functions for Firebase.

Wdróż niestandardowe

Interfejs wiersza poleceń Firebase zakłada, że w schematach masz kroki serwera, kompilacji i wstępnej renderyzacji 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 przesyłać treści wyrenderowane wcześniej, 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 metody pakietu Firebase JS SDK są zawarte w pakietach serwera i klienta, zapobiegaj błędom czasu wykonywania, sprawdzając wartość isSupported() przed użyciem produktu. Nie wszystkie produkty są obsługiwane we wszystkich środowiskach.

Opcjonalnie: integracja z pakietem Firebase Admin SDK

Pakiety administratora nie będą działać, jeśli zostaną uwzględnione w kompilacji przeglądarki. Dlatego warto je udostępnić w module serwera i wstrzyknąć jako opcjonalne zależności:

// 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).