Erstellen Sie Prototypen und testen Sie Web-Apps mit dem Firebase Hosting Emulator

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

  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 verbinden, um alle emulierten Projektressourcen zu verwenden, die Sie konfiguriert haben. Erfahren Sie mehr: Echtzeitdatenbank | Cloud-Firestore | Cloud-Funktionen

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

    firebase emulators:start

  3. Öffnen Sie Ihre Web-App unter der lokalen URL, die von der CLI zurückgegeben wird (normalerweise http://localhost:5000 ).

  4. 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?