Zintegruj kątowy uniwersalny

Dzięki interfejsowi CLI obsługującemu platformę Firebase możesz wdrożyć aplikację Angular w Firebase i udostępniać użytkownikom dynamiczną zawartość.

Zanim zaczniesz

Zanim zaczniesz wdrażać aplikację w Firebase, przejrzyj następujące wymagania i opcje:

  • Firebase CLI w wersji 12.1.0 lub nowszej. Pamiętaj, aby zainstalować interfejs CLI przy użyciu preferowanej metody.

  • Opcjonalnie: włączone rozliczenia w projekcie Firebase (wymagane, jeśli planujesz korzystać z SSR)

  • Opcjonalnie: AngularFire

Zainicjuj Firebase

Aby rozpocząć, zainicjuj Firebase dla swojego projektu frameworkowego. Użyj interfejsu wiersza polecenia Firebase w przypadku nowego projektu lub zmodyfikuj firebase.json w przypadku istniejącego projektu.

Zainicjuj nowy projekt

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

  2. Uruchom polecenie inicjowania z interfejsu CLI, a następnie postępuj zgodnie z instrukcjami:

    firebase init hosting

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

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

  5. Jeśli pojawi się monit, wybierz Angular.

Zainicjuj istniejący projekt

Zmień konfigurację hostingu w firebase.json , aby mieć opcję source , a nie opcję public . Na przykład:

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

Podawaj treści statyczne

Po zainicjowaniu Firebase możesz udostępniać zawartość statyczną za pomocą standardowego polecenia wdrażania:

firebase deploy

Wstępnie renderuj zawartość dynamiczną

Aby wstępnie renderować dynamiczną zawartość w Angular, musisz skonfigurować Angular Universal. Interfejs wiersza polecenia Firebase oczekuje silnika Express Engine:

ng add @nguniversal/express-engine

Więcej informacji znajdziesz w przewodniku Angular Universal .

Dodaj adresy URL do wstępnego renderowania

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

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

Firebase szanuje również plik guessRoutes lub plik routes.txt w katalogu głównym hostingu, jeśli chcesz dalej dostosować. Więcej informacji na temat tych opcji znajdziesz w przewodniku Angulara dotyczącym wstępnego renderowania .

Opcjonalnie: dodaj moduł serwera

Wdrożyć

Kiedy wdrażasz za pomocą firebase deploy , Firebase tworzy pakiet przeglądarki, pakiet serwera i wstępnie renderuje aplikację. Elementy te są wdrażane w Hostingu i Cloud Functions dla Firebase.

Wdrożenie niestandardowe

Interfejs wiersza polecenia Firebase zakłada, że ​​na schematach znajdują się etapy serwera, kompilacji i wstępnego renderowania w konfiguracji produkcyjnej.

Jeśli chcesz dostosować założenia CLI, skonfiguruj ng deploy i edytuj konfigurację w angular.json . Na przykład możesz wyłączyć SSR i wyświetlać wyłącznie wstępnie renderowaną zawartość, 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 SDK Firebase JS

Dołączając metody Firebase JS SDK zarówno do pakietów serwera, jak i klienta, chroń się przed błędami w czasie wykonywania, sprawdzając isSupported() przed użyciem produktu. Nie wszystkie produkty są obsługiwane we wszystkich środowiskach .

Opcjonalnie: zintegruj z pakietem SDK administratora Firebase

Pakiety administracyjne nie będą działać, jeśli zostaną uwzględnione w kompilacji przeglądarki, więc rozważ udostępnienie ich w module serwera i wstrzyknięcie jako opcjonalnej 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');

Udostępniaj w pełni dynamiczne treści dzięki SSR

Opcjonalnie: zintegruj z uwierzytelnianiem Firebase

Narzędzia do wdrażania Firebase obsługujące platformę internetową automatycznie synchronizują 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 to wstrzyknąć do modułu za pomocą tokena REQUEST (wyeksportowanego z @nguniversal/express-engine/tokens).