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

Bevor Sie mit dem Erstellen von Prototypen und dem Testen Ihrer Webanwendung mit dem Firebase Hosting-Emulator beginnen, sollten Sie sich mit dem Firebase Local Emulator Suite-Workflow vertraut machen und den Local Emulator Suite installieren und konfigurieren sowie die Befehlszeilen-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 High-Fidelity-Lokalisierung der Hosting-Dienste und bietet viele der Funktionen, die in der Produktionsversion von Hosting verfügbar sind. Mit dem Hosting-Emulator können Sie Folgendes tun:

  • Prototypen für Ihre statischen Websites und Webanwendungen erstellen, ohne Speicher- oder Zugriffskosten zu verursachen
  • HTTPS-Funktionen vor der Bereitstellung auf Ihrer Hosting-Website prototypisieren, testen und beheben
  • 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 Befehlszeile 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, höchstwahrscheinlich ü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 eines oder alle unterstützten Produkte ausführen.

Bei 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 Liveressourcen. Normalerweise wird über Codelabs oder andere Tutorials auf diese Projekte zugegriffen.

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

Wenn Sie mit Demo-Firebase-Projekten 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 der 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 zu erstellen
  • Höhere Sicherheit, da bei versehentlichem Aufruf nicht emulierter (Produktions-)Ressourcen durch Ihren Code keine Daten geändert werden und es keine Nutzung und Abrechnung gibt
  • Bessere Offlineunterstützung, da zum Herunterladen der SDK-Konfiguration kein Internetzugriff erforderlich ist.

Zentraler Prototyping-Workflow

Wenn Sie schnelle Iterationen vornehmen oder möchten, dass Ihre Anwendung mit emulierten Back-End-Projektressourcen interagiert, können Sie den Inhalt und die Konfiguration von Hosting lokal testen. Beim lokalen Testen stellt Firebase Ihre Webanwendung unter einer lokal gehosteten URL bereit.

  1. (Optional) Standardmäßig interagiert Ihre lokal gehostete Anwendung mit realen und nicht mit emulierten Projektressourcen (Funktionen, Datenbanken, Regeln usw.). Optional können Sie Ihre App so verbinden, dass sie alle von Ihnen konfigurierten emulierten Projektressourcen verwendet. 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 Befehlszeile zurückgegeben wird (in der Regel http://localhost:5000).

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

Test von anderen lokalen Geräten

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, aber nicht ü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. Bei den anderen Emulatoren ist keine Anmeldung erforderlich.

Führen Sie zum Generieren eines Tokens firebase login:ci in Ihrer lokalen Umgebung aus. Dies sollte nicht über ein CI-System erfolgen. Folge 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 und muss geheim gehalten werden.

Wenn Sie in Ihrer CI-Umgebung Umgebungsvariablen angeben können, die in den Build-Scripts verwendet werden können, erstellen Sie einfach eine Umgebungsvariable namens FIREBASE_TOKEN mit dem Wert „access_token“. Die Firebase-Befehlszeile übernimmt dann automatisch die Umgebungsvariable FIREBASE_TOKEN und die Emulatoren werden ordnungsgemäß gestartet.

Als letzte Option können Sie das Token einfach in Ihr Build-Script aufnehmen. Achten Sie aber 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?