Integrowanie z Angular Universal

Za pomocą interfejsu wiersza poleceń Firebase możesz wdrożyć aplikację Angular w Firebase i udostępniać zawartość dynamiczną użytkownikom.

Zanim zaczniesz

Zanim rozpoczniesz wdrażanie aplikacji w Firebase, zapoznaj się z tymi wymaganiami i opcjami:

• Interfejs wiersza poleceń Firebase w wersji 12.1.0 lub nowszej. Zainstaluj interfejs wiersza poleceń przy użyciu preferowanej metody.

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

• Opcjonalnie: AngularFire

Zainicjuj Firebase

Aby rozpocząć, zainicjuj Firebase dla swojego projektu platformy. Użyj interfejsu wiersza poleceń Firebase w nowym projekcie lub zmodyfikuj firebase.json w istniejącym projekcie.

Zainicjuj nowy projekt

1. W interfejsie wiersza poleceń Firebase włącz podgląd platform 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 „Czy chcesz użyć platformy internetowej? (funkcja eksperymentalna)”

4. Wybierz źródłowy katalog hostingu; może to być istniejąca aplikacja Angular.

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

Zainicjuj istniejący projekt

Zmień konfigurację hostingu w firebase.json, aby zamiast opcji public była dostępna opcja source. Przykład:

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

Wyświetlanie treści statycznych

Po zainicjowaniu Firebase możesz wyświetlać zawartość statyczną za pomocą standardowego polecenia wdrożenia:

firebase deploy

Wstępne renderowanie treści dynamicznych

Aby wstępnie renderować treści dynamiczne w Angular, musisz skonfigurować Angular Universal. Interfejs wiersza poleceń Firebase wymaga usługi Express Engine:

ng add @nguniversal/express-engine

Więcej informacji znajdziesz w przewodniku po uniwersalnym Angular.

Dodawanie adresów URL renderowania wstępnego

Domyślnie wstępnie renderowany będzie tylko katalog główny. Aby dodać więcej tras, znajdź krok renderowania wstępnego w angular.json i dodaj więcej tras:

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

W razie potrzeby Firebase przestrzega również pliku guessRoutes lub routes.txt w katalogu głównym hostingu. Więcej informacji o tych opcjach znajdziesz w przewodniku po renderowaniu wstępnym w Angular.

Opcjonalnie: dodaj moduł serwera

Wdrażanie

Podczas wdrażania za pomocą firebase deploy Firebase skompiluje pakiet przeglądarki i serwer, a następnie wstępnie renderuje aplikację. Te elementy są wdrażane w Hostingu i Cloud Functions dla Firebase.

Wdrożenie niestandardowe

Interfejs wiersza poleceń Firebase zakłada, że w schematach masz 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 sekcji angular.json. Możesz na przykład wyłączyć SSR i wyświetlać wstępnie renderowane treści, usuwając element serverTarget:

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

Opcjonalnie: integracja z pakietem SDK Firebase JS

Gdy uwzględniasz metody Firebase JS SDK w pakietach serwera i klienta, pamiętaj o błędach działania, sprawdzając plik isSupported() przed użyciem usługi. Nie wszystkie usługi są obsługiwane we wszystkich środowiskach.

Opcjonalnie: integracja z pakietem Firebase Admin SDK

Jeśli znajdą się w kompilacji przeglądarki, pakiety administracyjne nie zadziałają, dlatego rozważ umieszczenie ich w module serwera i wstrzyknięcie 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');

Wyświetlanie w pełni dynamicznej treści przy użyciu SSR

Opcjonalnie: integracja z Uwierzytelnianiem Firebase

Działające w Firebase narzędzie do wdrażania korzystające z platformy internetowej automatycznie synchronizuje stan klienta i serwera za pomocą plików cookie. Obiekt Express res.locals będzie opcjonalnie zawierać uwierzytelnioną instancję aplikacji Firebase (firebaseApp) i aktualnie zalogowanego użytkownika (currentUser). Można go wstrzykiwać do modułu za pomocą tokena REQUEST (wyeksportowanego z @nguniversal/express-engine/tokens).