Mit dem Firebase Hosting-Emulator Prototypen für Web-Apps erstellen und testen

Bevor Sie mit dem Prototyping und Testen Ihrer Web-App mit dem Firebase Hosting-Emulator beginnen, sollten Sie sich mit dem Firebase Local Emulator Suite-Workflow vertraut machen, die Local Emulator Suite installieren und konfigurieren und die CLI-Befehle prüfen.

Außerdem sollten Sie mit den Funktionen und dem Implementierungsablauf 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 genaue lokale Emulation von Hosting-Diensten und damit einen Großteil der Funktionen, die in der Produktionsumgebung von Hosting verfügbar sind. Mit dem Hosting-Emulator haben Sie folgende Möglichkeiten:

  • Prototypen für statische Websites und Web-Apps erstellen, ohne dass Speicher- oder Zugriffsgebühren anfallen
  • HTTPS-Funktionen prototypisieren, testen und debuggen, bevor Sie sie auf Ihrer Hosting-Website bereitstellen
  • Websites und Web-Apps in containerisierten CI-Workflows testen

Firebase-Projekt auswählen

Mit Firebase Local Emulator Suite werden Produkte für ein einzelnes Firebase-Projekt emuliert.

Wenn Sie das zu verwendende Projekt auswählen möchten, führen Sie vor dem Starten der Emulatoren firebase use in Ihrem Arbeitsverzeichnis aus. Alternativ können Sie das Flag --project an jeden Emulatorbefehl übergeben.

Local Emulator Suite unterstützt die Emulation von echten Firebase-Projekten und Demoprojekten.

Projekttyp Funktionen Mit Emulatoren verwenden
Real

Ein echtes Firebase-Projekt ist ein Projekt, das Sie erstellt und konfiguriert haben (wahrscheinlich über die Firebase Console).

Echte Projekte haben Live-Ressourcen wie Datenbankinstanzen, Storage-Buckets, Funktionen oder andere Ressourcen, die Sie für dieses Firebase-Projekt eingerichtet haben.

Wenn Sie mit echten Firebase-Projekten arbeiten, können Sie Emulatoren für 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 Firebase-Demoprojekt hat keine echte Firebase-Konfiguration und keine Live-Ressourcen. Auf diese Projekte wird in der Regel über Codelabs oder andere Tutorials zugegriffen.

Projekt-IDs für Demoprojekte haben das Präfix demo-.

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, nach Möglichkeit Demoprojekte zu verwenden. Die wichtigsten Vorteile:

  • Einfachere Einrichtung, da Sie die Emulatoren ausführen können, ohne ein Firebase-Projekt erstellen zu müssen
  • Höhere Sicherheit, da bei versehentlichem Aufrufen nicht emulierter (Produktions-)Ressourcen durch Ihren Code keine Datenänderung, Nutzung und Abrechnung erfolgt.
  • Bessere Offlineunterstützung, da Sie nicht auf das Internet zugreifen müssen, um Ihre SDK-Konfiguration herunterzuladen.

Wichtiger Workflow für die Prototyperstellung

Wenn Sie schnelle Iterationen durchführen oder Ihre App mit emulierten Backend-Projektressourcen interagieren soll, können Sie Ihre Hosting-Inhalte und -Konfiguration lokal testen. Beim lokalen Testen wird Ihre Web-App von Firebase über eine lokal gehostete URL bereitgestellt.

  1. (Optional) Standardmäßig interagiert Ihre lokal gehostete App mit echten, nicht emulierten Projektressourcen (Funktionen, Datenbank, Regeln usw.). Stattdessen können Sie Ihre App optional so konfigurieren, dass sie alle emulierten Projektressourcen verwendet, die Sie konfiguriert haben. Weitere Informationen: Realtime Database | Cloud Firestore | Cloud Functions

  2. Führen Sie im Stammverzeichnis Ihres lokalen Projektverzeichnisses den folgenden Befehl aus:

    firebase emulators:start

  3. Öffnen Sie Ihre Webanwendung unter der lokalen URL, die von der CLI zurückgegeben wird (in der Regel http://localhost:5000).

  4. Wenn Sie die lokale URL mit Änderungen aktualisieren möchten, aktualisieren Sie Ihren Browser.

Von anderen lokalen Geräten testen

Standardmäßig reagieren die Emulatoren nur auf Anfragen von localhost. Das bedeutet, dass Sie über den Webbrowser Ihres Computers auf Ihre gehosteten Inhalte zugreifen können, nicht aber über andere Geräte in Ihrem Netzwerk. Wenn Sie Tests von anderen lokalen Geräten aus durchführen möchten, konfigurieren Sie firebase.json so:

"emulators": {
    // ...

    "hosting": {
      "port": 5000,
      "host": "0.0.0.0"
    }
  }

Authentifizierungstokens für Continuous Integration-Workflows generieren

Wenn Ihre Continuous Integration-Workflows 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.

Führen Sie firebase login:ci in Ihrer lokalen Umgebung aus, um ein Token zu generieren. Dies sollte nicht über ein CI-System erfolgen. Folgen Sie der Anleitung zur Authentifizierung. Sie müssen diesen Schritt nur einmal pro Projekt ausführen, da das Token für alle Builds gültig ist. Das Token sollte wie ein Passwort behandelt werden. Achten Sie darauf, dass es geheim bleibt.

Wenn Sie in Ihrer CI-Umgebung Umgebungsvariablen angeben können, die in den Build-Skripten verwendet werden können, erstellen Sie einfach eine Umgebungsvariable namens FIREBASE_TOKEN mit dem Wert des Zugriffstoken-Strings. 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 einfügen. Achten Sie jedoch darauf, dass nicht vertrauenswürdige Parteien keinen Zugriff haben. Bei diesem hartcodierten Ansatz können Sie dem Befehl firebase emulators:exec --token "YOUR_TOKEN_STRING_HERE" hinzufügen.

Und jetzt?