Integrowanie 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ń za pomocą preferowanej metody.

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

• Opcjonalnie: AngularFire

Zainicjuj Firebase

Zacznij od zainicjowania Firebase dla swojego projektu platformy. Użyj interfejsu wiersza poleceń Firebase w przypadku nowego projektu lub zmodyfikuj firebase.json w przypadku istniejącego projektu.

Inicjowanie nowego projektu

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 następnie postępuj zgodnie z instrukcjami:

   firebase init hosting

3. Odpowiedz „tak” na pytanie „Czy chcesz korzystać z platformy internetowej? (funkcja eksperymentalna)"

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

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

Inicjowanie istniejącego projektu

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

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

Wyświetlanie treści statycznych

Po zainicjowaniu Firebase możesz udostępniać treści statyczne za pomocą standardowego polecenia wdrożenia:

firebase deploy

Renderowanie zawartości dynamicznej z wyprzedzeniem

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

ng add @nguniversal/express-engine

Więcej informacji znajdziesz w przewodniku Angular Universal.

Dodaj adresy URL renderowania wstępnego

Domyślnie tylko katalog główny będzie wstępnie renderowany. Więcej tras możesz dodać, lokalizując krok wstępnego renderowania w narzędziu angular.json i dodając kolejne trasy:

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

Firebase respektuje też plik guessRoutes lub routes.txt w hostowanym katalogu głównym, jeśli trzeba jeszcze coś dostosować. Więcej informacji na temat tych opcji znajdziesz w przewodniku dotyczącym renderowania wstępnego Angular.

Opcjonalnie: dodaj moduł serwera

Wdróż

Gdy wdrażasz to rozwiązanie za pomocą usługi firebase deploy, Firebase skompiluje pakiet dla przeglądarki, Twój pakiet serwera i wstępnie wyrenderuje aplikację. Elementy te są wdrażane w usługach Hosting i Cloud Functions dla Firebase.

Wdrożenie niestandardowe

W interfejsie wiersza poleceń Firebase zakładamy, że w schemacie występują kroki serwera, kompilacji i wstępnego renderowania z konfiguracją produkcyjną.

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

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

Opcjonalnie: integracja z pakietem Firebase JS SDK

Stosując metody pakietu Firebase JS SDK zarówno w pakietach serwera, jak i klienta, uważaj na błędy środowiska wykonawczego, sprawdzając przed użyciem usługi isSupported(). Nie wszystkie usługi są obsługiwane we wszystkich środowiskach.

Opcjonalnie: integracja z pakietem Firebase Admin SDK

Pakiety administratora przestaną 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');

Wyświetlanie w pełni dynamicznej treści z użyciem SSR

Opcjonalnie: integracja z Uwierzytelnieniem Firebase

Zoptymalizowane przez platformę internetową narzędzia do wdrażania Firebase automatycznie synchronizują stan klienta i serwera za pomocą plików cookie. Obiekt Express res.locals będzie opcjonalnie zawierać uwierzytelnione wystąpienie 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).