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
- W interfejsie wiersza poleceń Firebase włącz podgląd platform internetowych:
firebase experiments:enable webframeworks
Uruchom polecenie inicjowania w interfejsie wiersza poleceń, a następnie postępuj zgodnie z instrukcjami:
firebase init hosting
Odpowiedz „tak” na pytanie „Czy chcesz korzystać z platformy internetowej? (funkcja eksperymentalna)"
Wybierz katalog źródłowy hostingu. Może to być istniejąca aplikacja Angular.
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).