Statische Inhalte bereitstellen
Sie können statische Inhalte mit dem Standardbereitstellungsbefehl bereitstellen:
firebase deploy
Dynamische Inhalte vorrendern
Wenn Sie dynamische Inhalte in Angular vorrendern möchten, müssen Sie Angular SSR einrichten.
ng add @angular/ssr
Weitere Informationen finden Sie im Leitfaden zum Angular-Prerendering (SSG).
Optional: Servermodul hinzufügen
Bereitstellen
Wenn Sie die Bereitstellung mit firebase deploy vornehmen, erstellt Firebase Ihr Browser-Bundle und Ihr Server-Bundle und rendert die Anwendung vor. Diese Elemente werden in Hosting und Cloud Functions for Firebase bereitgestellt.
Benutzerdefinierte Bereitstellung
Die Firebase-Befehlszeile geht davon aus, dass Sie in Ihrer angular.json eine einzelne Anwendung mit einer Produktionsbuild-Konfiguration definiert haben.
Wenn Sie die Annahmen der CLI anpassen müssen, können Sie entweder die Umgebungsvariable FIREBASE_FRAMEWORKS_BUILD_TARGET verwenden oder AngularFire hinzufügen und Ihre angular.json ändern:
{
"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"version": 2,
"buildTarget": "OVERRIDE_YOUR_BUILD_TARGET"
}
}
}
Optional: Firebase JS SDK einbinden
Wenn Sie Firebase JS SDK-Methoden sowohl in Server- als auch in Client-Bundles einbinden, sollten Sie Laufzeitfehler vermeiden, indem Sie isSupported() prüfen, bevor Sie das Produkt verwenden.
Nicht alle Produkte werden in allen Umgebungen unterstützt.
Optional: Firebase Admin SDK einbinden
Administrator-Bundles schlagen fehl, wenn sie in Ihrem Browser-Build enthalten sind. Stellen Sie sie daher in Ihrem Servermodul bereit und fügen Sie sie als optionale Abhängigkeit ein:
// 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');
Vollständig dynamische Inhalte mit SSR bereitstellen
Optional: Mit Firebase Authentication integrieren
Die Webframework-kompatiblen Firebase-Bereitstellungstools sorgen automatisch dafür, dass Client- und Serverstatus mithilfe von Cookies synchronisiert werden. Das Express-res.locals-Objekt enthält optional eine authentifizierte Firebase-App-Instanz (firebaseApp) und den derzeit angemeldeten Nutzer (currentUser). Diese können über das REQUEST-Token (exportiert aus @nguniversal/express-engine/tokens) in Ihr Modul eingefügt werden.