Web-Apps lokal mit dem Firebase App Hosting-Emulator testen

Sie können Ihre App vor der App Hosting Bereitstellung mit dem App Hosting Emulator testen, der Teil der Firebase Local Emulator Suite ist.

Bevor Sie den App Hosting Emulator verwenden, sollten Sie den allgemeinen Workflow der Firebase Local Emulator Suite kennen und die Local Emulator Suite installieren und konfigurieren. Außerdem sollten Sie sich mit den CLI -Befehlen vertraut machen.

In diesem Thema wird davon ausgegangen, dass Sie bereits mit App Hosting vertraut sind. Falls erforderlich, lesen Sie die App Hosting Einführung und andere Materialien, um zu erfahren, wie funktioniert.App Hosting

Was kann ich mit dem App Hosting Emulator tun?

Mit dem App Hosting Emulator können Sie Ihre Webanwendungen lokal testen und optimieren. So können Sie den Entwicklungsprozess optimieren und die Qualität von Webanwendungen verbessern, die mit Firebase erstellt und auf App Hostingbereitgestellt werden.

Der App Hosting Emulator:

1. Sie können Ihre Webanwendung lokal mit Umgebungsvariablen und Secrets aus den Konfigurationsdateien apphosting.yaml ausführen.
2. Mit der Datei apphosting.emulator.yaml können Sie Umgebungsvariablen und Secrets für die Verwendung im Emulator überschreiben.
3. Sie können ihn zusammen mit anderen Firebase-Emulatoren verwenden. Wenn Sie den Firestore-Emulator, den Auth-Emulator oder einen anderen Emulator verwenden, sorgt die Local Emulator Suite dafür, dass diese Emulatoren vor dem App Hosting gestartet werden.

Emulator konfigurieren

Installieren und initialisieren Sie die Local Emulator Suite wie unter Install, configure and integrate Local Emulator Suite beschrieben. Wählen Sie neben allen anderen Firebase-Emulatoren, die Sie einrichten möchten, auch App Hosting Emulator aus. Die CLI fordert Sie auf, einige App Hosting Emulatorwerte anzugeben, darunter:

• Das Stammverzeichnis Ihrer App relativ zum Projekt. Das ist wichtig, wenn Sie Monorepos mit App Hostingverwenden.
• Ob Sie Werte für die lokale Entwicklung überschreiben möchten.
• Ob Sie Teammitgliedern Zugriff auf Secrets für die lokale Entwicklung gewähren möchten.

firebase init emulators
=== Emulators Setup
? Which Firebase emulators do you want to set up? Press Space to select emulators, then Enter to confirm your choices. (Press
<space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ App Hosting Emulator
 ◯ Firestore Emulator
 ◯ Database Emulator
 ◯ Hosting Emulator
 ◯ Pub/Sub Emulator
 ◯ Storage Emulator
 ◯ Eventarc Emulator
(Move up and down to reveal more choices)

? Specify your app's root directory relative to your project (./)

? The App Hosting emulator uses a file called apphosting.emulator.yaml to
override values in apphosting.yaml for local testing. This codebase does not
have one, would you like to create it? (Y/n)

? Which environment variables would you like to override? (Press <space> to
select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ MEMCACHE_ADDR
 ◯ API_KEY

? What new value would you like for plaintext MEMCACHE_ADDR?

? What would you like to name the secret reference for API_KEY? (test-api-key)

? What new value would you like for secret TESTKEY [input is hidden]? [input is hidden]

? Your config has secret values. Please provide a comma-separated list of users
or groups who should have access to secrets for local development:

✔  Successfully set IAM bindings on secret test-api-key.

Alle Werte, die Sie in diesem Einrichtungsprozess angeben, werden verwendet, um die App Hosting Emulator-Konfiguration in firebase.json zu aktualisieren. Sie können den App Hosting-Emulator auch konfigurieren, indem Sie firebase.json direkt aktualisieren. Das Schema für den App Hosting-Emulator ist:

{
  ...
  "emulators": {
    "apphosting": {
      "startCommand": <command> [optional]
      "rootDirectory": <path> [optional]
      }
    }
  }

• startCommand wird automatisch generiert und festgelegt, wenn der Emulator initialisiert wird. Wenn Sie keinen Wert angeben, erkennt der Emulator den Entwicklungsbefehl Ihres Paketmanagers und führt ihn aus.
• rootDirectory wird verwendet, um Monorepo-Projekteinrichtungen zu unterstützen. Wenn sich Ihre Webanwendung in einem Unterverzeichnis befindet, müssen Sie den Pfad dieses Verzeichnisses relativ zum Stammverzeichnis (dem Speicherort von firebase.json) angeben.

Emulation verwalten

Bei der Initialisierung des Emulators wird im Stammverzeichnis Ihrer App die Datei apphosting.emulator.yaml erstellt. Diese Konfigurationsdatei hat dasselbe Schema wie die apphosting.yaml Datei, die in der Produktion verwendet wird, ist aber ausschließlich für die lokale Entwicklung vorgesehen. Standardmäßig liest der Emulator die Konfiguration aus der Datei apphosting.yaml. Wenn jedoch eine Datei apphosting.emulator.yaml vorhanden ist, haben die Konfigurationen in dieser Datei Vorrang.

Die Datei apphosting.emulator.yaml kann sicher committet und für Kollegen freigegeben werden. Damit Sie nicht versehentlich vertrauliche Daten in Quellcode-Repositories committen, muss jede Umgebungsvariable, die in apphosting.yaml ein Secret ist, auch in apphosting.emulator.yaml ein Secret sein. Wenn ein Secret zwischen Produktion und lokaler Entwicklung nicht geändert werden muss (z. B. ein Gemini API-Schlüssel), muss es nicht zu apphosting.emulator.yaml hinzugefügt werden. Gewähren Sie stattdessen Ihrem Team Zugriff auf das Secret.

Wenn Ihre Anwendung viele Secrets verwendet (z. B. API-Schlüssel für drei verschiedene Dienste mit unterschiedlichen Werten für Produktion, Staging und lokale Entwicklung), überschreiten Sie möglicherweise das kostenlose Kontingent von Cloud Secret Manager und müssen 0,06 $pro zusätzlichem Secret und Monat bezahlen. Wenn Sie die lokale Konfiguration außerhalb der Quellcodeverwaltung verwalten möchten, um diese Gebühr zu vermeiden, können Sie die Legacy-Datei apphosting.local.yaml verwenden. Im Gegensatz zu apphosting.emulator.yaml können in dieser Datei Klartextwerte für Umgebungsvariablen angegeben werden, die in apphosting.yaml Secret-Werte sind.

Nutzern oder Gruppen Zugriff auf Secrets gewähren

Secrets, die in apphosting.emulator.yaml gespeichert sind, werden beim Start des Emulators gelesen. Das bedeutet, dass Ihr Entwicklungsteam Zugriff auf das Secret benötigt. Mit dem Befehl apphosting:secrets:grantaccess können Sie einem Nutzer oder einer Gruppe per E-Mail Zugriff auf ein Secret gewähren.

firebase apphosting:secrets:grantaccess test-api-key --emails my-team@my-company.com

Verwenden Sie nach Möglichkeit nur Testschlüssel in apphosting.emulator.yaml, die keinen Zugriff auf Produktionsdaten haben, keine globalen Nebenwirkungen haben können (z. B. E-Mails senden, Kreditkarten belasten) und/oder niedrigere Kontingente haben. So wird sichergestellt, dass nicht überprüfter Code weniger Auswirkungen in der realen Welt hat.

Verwenden Sie Google Groups, um den Zugriff auf Secrets zu verwalten, anstatt einzelnen Nutzern Zugriff zu gewähren. So wird die Einarbeitung neuer Mitglieder in Ihr Entwicklungsteam vereinfacht, da sie durch das Hinzufügen zur Gruppe Zugriff auf alle erforderlichen Secrets erhalten. Möglicherweise haben Sie bereits eine geeignete Gruppe, in der Entwickler miteinander kommunizieren. Durch die Steuerung des Zugriffs über Google Groups wird auch sichergestellt, dass Entwickler, die Ihr Team verlassen, den Zugriff auf alle Secrets verlieren, wenn sie aus der E-Mail-Gruppe entfernt werden. Wenn das Secret Zugriff auf Produktionsdaten hat oder Nebenwirkungen in der realen Welt verursacht, ist es möglicherweise dennoch sinnvoll, den Schlüssel zu rotieren und ihm mit firebase apphosting:secrets:set einen neuen Wert zu geben.

Emulator starten

firebase emulators:start

Dadurch werden alle in der Datei firebase.json definierten Emulatoren gestartet, einschließlich des App Hosting Emulators.

Befehl start für Angular-Apps konfigurieren

Wenn für den Emulator start ein Zeitlimit überschritten wird, stellt der Angular Entwicklungsserver Ihre App wahrscheinlich auf einem anderen Port bereit, als der App Hosting Emulator erwartet. Sie können dieses Problem umgehen, indem Sie in firebase.json eine zusätzliche Konfiguration hinzufügen:

• Setzen Sie emulators.apphosting.startCommand auf ng serve.
• Wenn Sie einen anderen Port als den Standardport verwenden möchten, legen Sie ihn mit emulators.apphosting.port fest (anstatt das Flag --port zu ng serve in emulators.apphosting.startCommand hinzuzufügen).

Beispiel:

"emulators": {
    "apphosting": {
      "port": 5002,
      "rootDirectory": "./test-app",
      "startCommand": "ng serve"
    },
    "ui": {
      "enabled": true
    },
    ...
  }