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

Bevor Sie mit dem Prototyping und Testen Ihrer Webanwendung mit dem Firebase Hosting Emulator beginnen, sollten Sie den allgemeinen Workflow kennen und die installieren und konfigurieren Local Emulator Suite und die zugehörigen CLI-Befehle prüfen.Firebase Local Emulator Suite

Sie sollten auch mit den Funktionen und dem Implementierungsworkflow vertraut sein für Firebase Hosting. 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 stellt einen Großteil der Funktionen bereit, die in der Produktionsumgebung Hosting verfügbar sind. Der Hosting Emulator ermöglicht Ihnen Folgendes:

  • Prototypen für statische Websites und Webanwendungen erstellen, ohne Speicher- oder Zugriffsgebühren zu zahlen
  • HTTPS-Funktionen prototypisieren, testen und debuggen, bevor Sie sie auf Ihrer Hosting-Website bereitstellen
  • Websites und Webanwendungen in containerisierten Continuous Integration-Workflows testen

Firebase-Projekt auswählen

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

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

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 Konsole).

Echte Projekte haben aktive 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 oder alle unterstützten Produkte ausführen.

Für alle Produkte, die Sie nicht emulieren, interagieren Ihre Apps und Ihr Code mit der aktiven Ressource (Datenbankinstanz, Storage-Bucket, Funktion usw.).

Demo

Ein Firebase-Demoprojekt hat keine echte Firebase-Konfiguration und keine aktiven Ressourcen. Auf diese Projekte wird in der Regel über Codelabs oder andere Anleitungen zugegriffen.

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

Wenn Sie mit Firebase-Demoprojekten arbeiten, interagieren Ihre Apps und Ihr Code mit Emulatoren nur. Wenn Ihre App versucht, mit einer Ressource zu interagieren, für die kein Emulator ausgeführt wird, schlägt der Code fehl.

Wir empfehlen, nach Möglichkeit Demoprojekte zu verwenden. Dies sind 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 Aufruf von nicht emulierten (Produktions-)Ressourcen durch Ihren Code keine Datenänderungen, Nutzung und Abrechnung erfolgen
  • Bessere Offlineunterstützung, da Sie nicht auf das Internet zugreifen müssen, um Ihre SDK-Konfiguration herunterzuladen

Wichtigster Workflow für Prototypen

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 stellt Firebase Ihre Webanwendung unter einer lokal gehosteten URL bereit.

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

  2. Führen Sie im Stammverzeichnis Ihres lokalen Projekts 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. Aktualisieren Sie Ihren Browser, um die lokale URL mit Änderungen zu aktualisieren.

Von anderen lokalen Geräten aus 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 von anderen lokalen Geräten aus testen 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, um sich zu authentifizieren. 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-Skripts verwendet werden können, erstellen Sie einfach eine Umgebungsvariable mit dem Namen FIREBASE_TOKEN. Der Wert ist der Zugriffstokenstring. Die Firebase CLI ruft die FIREBASE_TOKEN Umgebungsvariable automatisch ab und die Emulatoren werden ordnungsgemäß gestartet.

Als letzte Möglichkeit können Sie das Token einfach in Ihr Build-Skript einfügen. Achten Sie jedoch darauf, dass nicht vertrauenswürdige Parteien keinen Zugriff haben. Für diesen fest codierten Ansatz können Sie dem firebase emulators:exec Befehl --token "YOUR_TOKEN_STRING_HERE" hinzufügen.

Nächste Schritte