Mit der Firebase-Framework-fähigen CLI können Sie Ihre Angular-Anwendung in Firebase bereitstellen und Ihren Benutzern dynamische Inhalte bereitstellen.
Bevor Sie beginnen
Bevor Sie mit der Bereitstellung Ihrer App in Firebase beginnen, prüfen Sie die folgenden Anforderungen und Optionen:
- Firebase CLI-Version 12.1.0 oder höher. Stellen Sie sicher, dass Sie die CLI mit Ihrer bevorzugten Methode installieren .
Optional: Abrechnung für Ihr Firebase-Projekt aktiviert (erforderlich, wenn Sie SSR verwenden möchten)
Optional: AngularFire
Firebase initialisieren
Initialisieren Sie zunächst Firebase für Ihr Framework-Projekt. Verwenden Sie die Firebase-CLI für ein neues Projekt oder ändern Sie firebase.json
für ein vorhandenes Projekt.
Initialisieren Sie ein neues Projekt
- Aktivieren Sie in der Firebase-CLI die Web-Frameworks-Vorschau:
firebase experiments:enable webframeworks
Führen Sie den Initialisierungsbefehl über die CLI aus und befolgen Sie dann die Anweisungen:
firebase init hosting
Beantworten Sie die Frage „Möchten Sie ein Webframework verwenden? (experimentell)“ mit Ja.
Wählen Sie Ihr Hosting-Quellverzeichnis; Dies könnte eine vorhandene Angular-App sein.
Wenn Sie dazu aufgefordert werden, wählen Sie Angular.
Initialisieren Sie ein vorhandenes Projekt
Ändern Sie Ihre Hosting-Konfiguration in firebase.json
so, dass eine source
statt einer public
Option vorhanden ist. Zum Beispiel:
{
"hosting": {
"source": "./path-to-your-angular-workspace"
}
}
Stellen Sie statische Inhalte bereit
Nach der Initialisierung von Firebase können Sie statische Inhalte mit dem Standard-Bereitstellungsbefehl bereitstellen:
firebase deploy
Rendern Sie dynamische Inhalte vorab
Um dynamische Inhalte in Angular vorab zu rendern, müssen Sie Angular Universal einrichten. Die Firebase-CLI erwartet Express Engine:
ng add @nguniversal/express-engine
Weitere Informationen finden Sie im Angular Universal-Leitfaden .
Fügen Sie Prerender-URLs hinzu
Standardmäßig wird nur das Stammverzeichnis vorgerendert. Sie können zusätzliche Routen hinzufügen, indem Sie den Prerender-Schritt in angular.json
suchen und weitere Routen hinzufügen:
{
"prerender": {
"builder": "@nguniversal/builders:prerender",
"options": {
"routes": ["/", "ANOTHER_ROUTE", "AND_ANOTHER"]
},
"configurations": {
/* ... */
},
"defaultConfiguration": "production"
}
}
Firebase respektiert auch guessRoutes
oder eine routes.txt
-Datei im Hosting-Stammverzeichnis, wenn Sie weitere Anpassungen benötigen. Weitere Informationen zu diesen Optionen finden Sie im Prerendering-Leitfaden von Angular .
Optional: Fügen Sie ein Servermodul hinzu
Einsetzen
Wenn Sie mit firebase deploy
bereitstellen, erstellt Firebase Ihr Browser-Bundle und Ihr Server-Bundle und rendert die Anwendung vorab. Diese Elemente werden für Hosting und Cloud Functions für Firebase bereitgestellt.
Benutzerdefinierte Bereitstellung
Die Firebase-CLI geht davon aus, dass Ihre Schaltpläne mit einer Produktionskonfiguration Server-, Build- und Prerender-Schritte enthalten.
Wenn Sie die CLI-Annahmen anpassen möchten, konfigurieren Sie ng deploy
und bearbeiten Sie die Konfiguration in angular.json
. Sie könnten beispielsweise SSR deaktivieren und ausschließlich vorgerenderten Inhalt bereitstellen, indem Sie serverTarget
entfernen:
{
"deploy": {
"builder": "@angular/fire:deploy",
"options": {
"browserTarget": "app:build:production",
"serverTarget": "app:server:production",
"prerenderTarget": "app:prerender:production"
}
}
}
Optional: Integration mit dem Firebase JS SDK
Wenn Sie Firebase JS SDK-Methoden sowohl in Server- als auch in Client-Bundles einbinden, schützen Sie sich vor Laufzeitfehlern, indem Sie isSupported()
überprüfen, bevor Sie das Produkt verwenden. Nicht alle Produkte werden in allen Umgebungen unterstützt .
Optional: Integration mit dem Firebase Admin SDK
Admin-Bundles schlagen fehl, wenn sie in Ihrem Browser-Build enthalten sind. Erwägen Sie daher, sie in Ihrem Servermodul bereitzustellen und als optionale Abhängigkeit einzubinden:
// 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');
Stellen Sie mit SSR vollständig dynamische Inhalte bereit
Optional: Integration mit Firebase-Authentifizierung
Das Web-Framework-fähige Firebase-Bereitstellungstool hält den Client- und Serverstatus mithilfe von Cookies automatisch synchron. Das Express- res.locals
-Objekt enthält optional eine authentifizierte Firebase-App-Instanz ( firebaseApp
) und den aktuell angemeldeten Benutzer ( currentUser
). Dies kann über das REQUEST-Token (exportiert aus @nguniversal/express-engine/tokens) in Ihr Modul eingefügt werden.