Bevor Sie mit dem Prototyping und Testen Ihrer Web-App mit dem Firebase Hosting-Emulator beginnen, stellen Sie sicher, dass Sie den gesamten Workflow der Firebase Local Emulator Suite verstehen , die Local Emulator Suite installieren und konfigurieren und ihre CLI-Befehle überprüfen.
Sie sollten auch mit den Funktionen und dem Implementierungsworkflow für Firebase Hosting vertraut sein. Beginnen Sie mit der Einführung in Firebase Hosting .
Was kann ich mit dem Firebase Hosting-Emulator tun?
Der Firebase Hosting-Emulator bietet eine lokale High-Fidelity-Emulation von Hosting-Diensten und stellt einen Großteil der Funktionalität bereit, die im Produktions-Hosting zu finden ist. Mit dem Hosting-Emulator können Sie:
- Erstellen Sie Prototypen Ihrer statischen Websites und Web-Apps, ohne dass Speicher- oder Zugriffsgebühren anfallen
- Erstellen Sie Prototypen, testen und debuggen Sie HTTPS-Funktionen, bevor Sie sie auf Ihrer Hosting-Site bereitstellen
- Testen Sie Websites und Web-Apps in containerisierten, kontinuierlichen Integrationsworkflows.
Wählen Sie ein Firebase-Projekt
Die Firebase Local Emulator Suite emuliert Produkte für ein einzelnes Firebase-Projekt.
Um das zu verwendende Projekt auszuwählen, führen Sie vor dem Starten der Emulatoren in der CLI firebase use
in Ihrem Arbeitsverzeichnis aus. Alternativ können Sie das Flag --project
an jeden Emulatorbefehl übergeben.
Die Local Emulator Suite unterstützt die Emulation echter Firebase-Projekte und Demoprojekte .
Projekttyp | Merkmale | Verwendung mit Emulatoren |
---|---|---|
Real | Ein echtes Firebase-Projekt ist eines, das Sie erstellt und konfiguriert haben (höchstwahrscheinlich über die Firebase-Konsole). Echte Projekte verfügen über Live-Ressourcen wie Datenbankinstanzen, Speicher-Buckets, Funktionen oder jede andere Ressource, die Sie für dieses Firebase-Projekt einrichten. | Wenn Sie mit echten Firebase-Projekten arbeiten, können Sie Emulatoren für einige oder alle unterstützten Produkte ausführen. Bei allen Produkten, die Sie nicht emulieren, interagieren Ihre Apps und Ihr Code mit der Live- Ressource (Datenbankinstanz, Speicher-Bucket, Funktion usw.). |
Demo | Ein Demo-Firebase-Projekt hat keine echte Firebase-Konfiguration und keine Live-Ressourcen. Der Zugriff auf diese Projekte erfolgt normalerweise über Codelabs oder andere Tutorials. Projekt-IDs für Demoprojekte haben das Präfix | Wenn Sie mit Firebase-Demoprojekten arbeiten, interagieren Ihre Apps und Ihr Code nur mit Emulatoren. Wenn Ihre App versucht, mit einer Ressource zu interagieren, für die kein Emulator ausgeführt wird, schlägt dieser Code fehl. |
Wir empfehlen Ihnen, nach Möglichkeit Demoprojekte zu verwenden. Zu den Vorteilen gehören:
- Einfachere Einrichtung, da Sie die Emulatoren ausführen können, ohne jemals ein Firebase-Projekt zu erstellen
- Höhere Sicherheit, denn wenn Ihr Code versehentlich nicht emulierte (Produktions-)Ressourcen aufruft, besteht keine Chance auf Datenänderung, Nutzung und Abrechnung
- Bessere Offline-Unterstützung, da zum Herunterladen Ihrer SDK-Konfiguration kein Zugriff auf das Internet erforderlich ist.
Kern-Prototyping-Workflow
Wenn Sie schnelle Iterationen durchführen oder möchten, dass Ihre App mit emulierten Backend-Projektressourcen interagiert, können Sie Ihren Hosting-Inhalt testen und lokal konfigurieren. Beim lokalen Testen stellt Firebase Ihre Web-App unter einer lokal gehosteten URL bereit.
(Optional) Standardmäßig interagiert Ihre lokal gehostete App mit echten , nicht emulierten Projektressourcen (Funktionen, Datenbank, Regeln usw.). Stattdessen können Sie Ihre App optional verbinden, um alle emulierten Projektressourcen zu verwenden, die Sie konfiguriert haben. Erfahren Sie mehr: Echtzeitdatenbank | Cloud-Firestore | Cloud-Funktionen
Führen Sie im Stammverzeichnis Ihres lokalen Projektverzeichnisses den folgenden Befehl aus:
firebase emulators:start
Öffnen Sie Ihre Web-App unter der lokalen URL, die von der CLI zurückgegeben wird (normalerweise
http://localhost:5000
).Um die lokale URL mit Änderungen zu aktualisieren, aktualisieren Sie Ihren Browser.
Testen Sie von anderen lokalen Geräten aus
Standardmäßig antworten die Emulatoren nur auf Anfragen von localhost
. Das bedeutet, dass Sie über den Webbrowser Ihres Computers auf Ihre gehosteten Inhalte zugreifen können, jedoch nicht über andere Geräte in Ihrem Netzwerk. Wenn Sie von anderen lokalen Geräten aus testen möchten, konfigurieren Sie Ihre firebase.json
wie folgt:
"emulators": {
// ...
"hosting": {
"port": 5000
"host": "0.0.0.0"
}
}
Generieren Sie Authentifizierungstoken für kontinuierliche Integrationsworkflows
Wenn Ihre kontinuierlichen Integrationsworkflows auf Firebase Hosting basieren, müssen Sie sich mit einem Token anmelden, um firebase emulators:exec
auszuführen. Für die anderen Emulatoren ist keine Anmeldung erforderlich.
Um ein Token zu generieren, führen Sie firebase login:ci
in Ihrer lokalen Umgebung aus. Dies sollte nicht über ein CI-System erfolgen. Befolgen Sie die Anweisungen zur Authentifizierung. Sie sollten diesen Schritt nur einmal pro Projekt ausführen müssen, da das Token für alle Builds gültig ist. Das Token sollte wie ein Passwort behandelt werden; Stellen Sie sicher, dass es geheim gehalten wird.
Wenn Ihre CI-Umgebung die Angabe von Umgebungsvariablen ermöglicht, die in den Build-Skripten verwendet werden können, erstellen Sie einfach eine Umgebungsvariable mit dem Namen FIREBASE_TOKEN
, wobei der Wert die Zugriffstokenzeichenfolge ist. Die Firebase-CLI übernimmt automatisch die Umgebungsvariable FIREBASE_TOKEN
und die Emulatoren werden ordnungsgemäß gestartet.
Als letzten Ausweg können Sie das Token einfach in Ihr Build-Skript einbinden, aber stellen Sie sicher, dass nicht vertrauenswürdige Parteien keinen Zugriff haben. Für diesen hartcodierten Ansatz können Sie --token "YOUR_TOKEN_STRING_HERE"
zum Befehl firebase emulators:exec
hinzufügen.
Was als nächstes?
- Führen Sie einen Schnellstart mit dem Hosting-Emulator durch, indem Sie dem Firebase-Webcodelab folgen.
- Erfahren Sie, wie Sie mithilfe des Hosting-Emulators Prototypen für HTTPS-Funktionen erstellen, wie in den Hosting-Anleitungen für Funktionen beschrieben.
- Eine kuratierte Reihe von Videos und detaillierten Anleitungsbeispielen finden Sie in der Firebase Emulators Training Playlist .