Firebase-Projekte und ‑Produkte über Terraform einrichten und verwalten

1. Einführung

Ziele

Mit Terraform können Sie ein Firebase-Projekt einrichten und verwalten, einschließlich der programmatischen Konfiguration von Infrastruktur und Firebase-Produkten.

In diesem Codelab wird zuerst beschrieben, wie Sie eine Terraform-Konfigurationsdatei zum Erstellen eines neuen Firebase-Projekts erstellen. Anschließend wird erläutert, wie Sie die Apps und Firebase-Produkte konfigurieren, die Sie in diesem Projekt verwenden möchten. Außerdem werden die Grundlagen der Terraform-Befehlszeile behandelt, z. B. das Vorschauen von Änderungen und deren Implementierung.

Wenn Sie schon immer wissen wollten, wie Sie Firebase-Projekte und -Produkte mit Terraform einrichten und verwalten, ist dieses Codelab genau das Richtige für Sie.

Lerninhalte

  • Terraform-Konfigurationsdatei (*.tf) erstellen
  • Terraform-Befehlszeilenbefehle zum Verwalten Ihrer Infrastruktur verwenden
  • Konfiguration ändern, um Ressourcen und Dienste zu aktualisieren
  • Konfiguration auf eine echte Web-App (Friendly Chat) anwenden
  • Parallele (und synchronisierte) Konfigurationen in verschiedenen Umgebungen (Produktion, Staging usw.) definieren

Voraussetzungen

Für dieses Codelab benötigen Sie grundlegende Kenntnisse von Terraform und der zugehörigen Terminologie, einschließlich der folgenden Voraussetzungen:

Dieses Codelab enthält eine echte Beispielanwendung, mit der Sie testen und interagieren können, was Sie über Terraform bereitstellen. Dazu benötigen Sie Folgendes:

  • Der Beispielcode für eine Web-App – laden Sie diesen Code im nächsten Schritt des Codelabs herunter.
  • Der Paketmanager npm (der normalerweise mit Node.js geliefert wird) – installieren Sie diese Tools.
  • Firebase CLI: Installieren Sie diese CLI und melden Sie sich an.

2. Startcode abrufen

In diesem Codelab können Sie testen, was Sie mit Terraform bereitstellen, indem Sie eine echte Web-App verwenden. Wir empfehlen, dies zu tun, damit Sie alle Schritte verstehen, die für die Verwendung von mit Terraform bereitgestellten Ressourcen erforderlich sind.

Klonen Sie das GitHub-Repository des Codelabs über die Befehlszeile:

git clone https://github.com/firebase/codelab-friendlychat-web

Wenn Sie Git nicht installiert haben, können Sie das Repository auch als ZIP-Datei herunterladen.

3. Terraform-Konfiguration erstellen

Terraform einrichten

  1. Wechseln Sie im Code der heruntergeladenen Beispiel-App zum Stammverzeichnis des Verzeichnisses web.
  2. Erstellen Sie im Stammverzeichnis dieses Verzeichnisses eine Terraform-Konfigurationsdatei mit dem Namen main.tf und der folgenden Ersteinrichtung:

    main.tf
    # Terraform configuration to set up providers by version.
    terraform {
      required_providers {
        google-beta = {
          source  = "hashicorp/google-beta"
          version = "~> 4.0"
        }
      }
    }
    
    # Configure the provider not to use the specified project for quota check.
    # This provider should only be used during project creation and initializing services.
    provider "google-beta" {
      alias                 = "no_user_project_override"
      user_project_override = false
    }
    
    # Configure the provider that uses the new project's quota.
    provider "google-beta" {
      user_project_override = true
    }
    

Jeder der google-beta-Anbieter hat ein Attribut namens user_project_override, das bestimmt, wie die Vorgänge von Terraform auf Kontingente geprüft werden. Für die Bereitstellung der meisten Ressourcen sollten Sie user_project_override = true verwenden. Das bedeutet, dass das Kontingent für Ihr eigenes Firebase-Projekt geprüft wird. Damit Ihr neues Projekt Kontingentprüfungen akzeptieren kann, müssen Sie jedoch zuerst user_project_override=false verwenden. Mit der Terraform-Syntax alias können Sie in den nächsten Schritten dieses Codelabs zwischen den beiden Provider-Einrichtungen unterscheiden.

Terraform im Verzeichnis initialisieren

Wenn Sie zum ersten Mal eine neue Konfiguration erstellen, müssen Sie den in der Konfiguration angegebenen Anbieter herunterladen.

Führen Sie dazu den folgenden Befehl im Stammverzeichnis aus, in dem sich die Konfigurationsdatei main.tf befindet:

terraform init

4. Firebase-Projekt über Terraform erstellen

Wenn Sie ein Firebase-Projekt erstellen, ist es wichtig zu wissen, dass jedes Firebase-Projekt eigentlich ein Google Cloud-Projekt ist, für das nur Firebase-Dienste aktiviert sind.

Blöcke für das zugrunde liegende Google Cloud-Projekt und die APIs hinzufügen

  1. Stellen Sie zuerst das zugrunde liegende Google Cloud-Projekt bereit.

    Fügen Sie der Konfigurationsdatei main.tf den folgenden Ressourcenblock hinzu.

    Sie müssen Ihren eigenen Projektnamen (z. B. "Terraform FriendlyChat Codelab") und Ihre eigene Projekt-ID (z. B. "terraform-codelab-your-initials") angeben. Der Wert name wird nur in Firebase-Oberflächen verwendet und ist für Endnutzer nicht sichtbar. Der Wert project_id identifiziert Ihr Projekt jedoch eindeutig gegenüber Google. Geben Sie daher einen eindeutigen Wert an. main.tf
    ...
    
    # Create a new Google Cloud project.
    resource "google_project" "default" {
      provider = google-beta.no_user_project_override
    
      name            = "<PROJECT_NAME_OF_YOUR_PROJECT>"
      project_id      = "<PROJECT_ID_OF_YOUR_PROJECT>"
    
      # Required for the project to display in any list of Firebase projects.
      labels = {
        "firebase" = "enabled"
      }
    }
    
  2. Als Nächstes müssen Sie die erforderlichen zugrunde liegenden APIs aktivieren: die Service Usage API und die Firebase Management API.

    Diese API-Aktivierung erfolgt in der Regel im Hintergrund, wenn Sie ein Firebase-Projekt über die Firebase-Konsole erstellen. Terraform muss jedoch explizit angewiesen werden, dies zu tun.

    Fügen Sie Ihrer main.tf-Konfigurationsdatei (direkt unter dem Block, in dem das neue Cloud-Projekt erstellt wird) den folgenden Ressourcenblock hinzu:

    main.tf
    ...
    
    # Enable the required underlying Service Usage API.
    resource "google_project_service" "serviceusage" {
      provider = google-beta.no_user_project_override
    
      project = google_project.default.project_id
      service = "serviceusage.googleapis.com"
    
      # Don't disable the service if the resource block is removed by accident.
      disable_on_destroy = false
    }
    
    # Enable the required underlying Firebase Management API.
    resource "google_project_service" "firebase" {
      provider = google-beta.no_user_project_override
    
      project = google_project.default.project_id
      service = "firebase.googleapis.com"
    
      # Don't disable the service if the resource block is removed by accident.
      disable_on_destroy = false
    }
    
    Wenn Sie die Service Usage API aktivieren, kann Ihr neues Projekt Kontingentprüfungen akzeptieren. Für alle nachfolgenden Bereitstellungen von Ressourcen und Aktivierungen von Diensten sollten Sie also den Anbieter mit user_project_override verwenden (kein Alias erforderlich).

Block zum Aktivieren von Firebase-Diensten hinzufügen

Als Letztes müssen Sie Firebase-Dienste für das Projekt aktivieren, um ein Firebase-Projekt zu erstellen.

Fügen Sie in Ihrer main.tf-Konfigurationsdatei den folgenden Ressourcenblock hinzu.

Wie oben erwähnt, wird in diesem Ressourcenblock der Provider mit user_project_override verwendet (kein Alias erforderlich).

main.tf

...

# Enable Firebase services for the new project created above.
resource "google_firebase_project" "default" {
  provider = google-beta

  project = google_project.default.project_id

  # Wait until the required APIs are enabled.
  depends_on = [
    google_project_service.firebase,
    google_project_service.serviceusage,
  ]
}

Im obigen Ressourcenblock sehen Sie möglicherweise die Klausel depends_on, die Terraform anweist, auf die Aktivierung der zugrunde liegenden APIs zu warten. Ohne diese Klausel kennt Terraform die Abhängigkeit nicht und es kann zu Fehlern kommen, wenn Ressourcen parallel bereitgestellt werden.

Wenden Sie die Konfiguration an

  1. Um die neuen Ressourcen bereitzustellen und die in der Konfigurationsdatei angegebenen APIs zu aktivieren, führen Sie den folgenden Befehl im Stammverzeichnis aus, das sich im selben Verzeichnis wie die Datei main.tf (die web sein sollte) befindet:
    terraform apply
    
  2. Im Terminal gibt Terraform einen Plan der Aktionen aus, die ausgeführt werden.

    Wenn alles wie erwartet aussieht, genehmigen Sie die Aktionen, indem Sie yes eingeben.

    main.tf
    Terraform used the selected providers to generate the following execution plan. Resource actions are indicated with the following symbols:
      + create
    
    Terraform will perform the following actions:
    
      # google_firebase_project.default will be created
      + resource "google_firebase_project" "default" {
          + display_name   = (known after apply)
          + id             = (known after apply)
          + project        = "terraform-friendlychat-codelab"
          + project_number = (known after apply)
        }
    
      # google_project.default will be created
      + resource "google_project" "default" {
          + auto_create_network = true
          + id                  = (known after apply)
          + labels              = {
              + "firebase" = "enabled"
            }
          + name                = "Terraform FriendlyChat Codelab"
          + number              = (known after apply)
          + project_id          = "terraform-friendlychat-codelab"
          + skip_delete         = (known after apply)
        }
    
      # google_project_service.firebase will be created
      + resource "google_project_service" "firebase" {
          + disable_on_destroy = false
          + id                 = (known after apply)
          + project            = "terraform-friendlychat-codelab"
          + service            = "firebase.googleapis.com"
        }
    
      # google_project_service.serviceusage will be created
      + resource "google_project_service" "serviceusage" {
          + disable_on_destroy = false
          + id                 = (known after apply)
          + project            = "terraform-friendlychat-codelab"
          + service            = "serviceusage.googleapis.com"
        }
    
    Plan: 4 to add, 0 to change, 0 to destroy.
    
    Do you want to perform these actions?
      Terraform will perform the actions described above.
      Only 'yes' will be accepted to approve.
    
      Enter a value: yes # <----
    

Wenn Sie die Änderungen nur in der Vorschau ansehen möchten, ohne sie anzuwenden, können Sie stattdessen den Befehl terraform plan verwenden.

Änderungen prüfen

Nachdem Terraform ausgeführt wurde, können Sie den Status aller von Terraform bereitgestellten Ressourcen und aktivierten Dienste mit dem folgenden Befehl prüfen:

terraform show

Hier ist ein Beispiel dafür, was gedruckt werden sollte. Ihr Status enthält Werte, die für Ihr Projekt spezifisch sind.

# google_firebase_project.default:
resource "google_firebase_project" "default" {
    display_name   = "Terraform FriendlyChat Codelab"
    id             = "projects/terraform-friendlychat-codelab"
    project        = "terraform-friendlychat-codelab"
    project_number = "000000000"
}

# google_project.default:
resource "google_project" "default" {
    auto_create_network = true
    id                  = "projects/terraform-friendlychat-codelab"
    labels              = {
        "firebase" = "enabled"
    }
    name                = "Terraform FriendlyChat Codelab"
    number              = "000000000"
    project_id          = "terraform-friendlychat-codelab"
}

# google_project_service.firebase:
resource "google_project_service" "firebase" {
    disable_on_destroy = false
    id                 = "terraform-friendlychat-codelab/firebase.googleapis.com"
    project            = "terraform-friendlychat-codelab"
    service            = "firebase.googleapis.com"
}

# google_project_service.serviceusage:
resource "google_project_service" "serviceusage" {
    disable_on_destroy = false
    id                 = "terraform-friendlychat-codelab/serviceusage.googleapis.com"
    project            = "terraform-friendlychat-codelab"
    service            = "serviceusage.googleapis.com"
}

Alternativ können Sie in der Firebase Console prüfen, ob das Projekt erstellt wurde.

Das in der Firebase Console ausgewählte Terraform FriendlyChat-Codelab-Projekt

5. Firebase-App über Terraform registrieren

Wenn Sie Firebase verwenden möchten, müssen Sie jede Plattformvariante Ihrer App in Ihrem Firebase-Projekt registrieren. In diesem Codelab verwenden Sie eine echte App, um die mit Terraform bereitgestellten Ressourcen zu testen und mit ihnen zu interagieren. Da es sich bei dieser App um eine Web-App handelt, müssen Sie Terraform anweisen, eine Firebase-Web-App in Ihrem neu erstellten Firebase-Projekt zu registrieren.

Block zum Registrieren der Web-App hinzufügen

Wenn Sie Ihre Web-App in Ihrem Firebase-Projekt registrieren möchten, fügen Sie der Datei main.tf den folgenden Ressourcenblock hinzu.

Sie müssen einen eigenen display_name für Ihre Web-App angeben. Dieser Name wird nur in Firebase-Oberflächen verwendet und ist für Endnutzer nicht sichtbar.

main.tf

...

# Create a Firebase Web App in the new project created above.
resource "google_firebase_web_app" "default" {
  provider = google-beta

  project      = google_firebase_project.default.project
  display_name = "<DISPLAY_NAME_OF_YOUR_WEB_APP>"
  deletion_policy = "DELETE"
}

Wenden Sie die Konfiguration an

  1. Führen Sie den folgenden Befehl im Stammverzeichnis aus, in dem sich die Datei main.tf befindet (die web sein sollte), um die neue Ressource bereitzustellen.
    terraform apply
    
    Mit diesem Befehl wird kein neues Google Cloud-Projekt erstellt. Terraform erkennt, dass ein Projekt mit der angegebenen Projekt-ID bereits vorhanden ist, vergleicht den aktuellen Status des Projekts mit dem Inhalt der Datei .tf und nimmt alle Änderungen vor, die gefunden werden.
  2. Sehen Sie sich den ausgedruckten Maßnahmenplan an. Wenn alles wie erwartet aussieht, geben Sie yes ein und drücken Sie die Eingabetaste, um die Aktionen zu genehmigen.

Änderungen prüfen

Mit dem folgenden Befehl können Sie den Status der neu bereitgestellten Ressource prüfen:

terraform show

Alternativ können Sie in der Firebase Console nachsehen, ob die App in Ihrem Projekt registriert wurde. Rufen Sie die Projekteinstellungen auf und scrollen Sie nach unten zum Abschnitt Ihre Apps.

6. Firebase Authentication einrichten

Die Authentifizierung ist ein wichtiger Bestandteil jeder App. Wenn Sie Endnutzern ermöglichen möchten, sich mit ihren Google-Konten in Ihrer Web-App anzumelden, können Sie Firebase Authentication aktivieren und die Methode „Mit Google anmelden“ einrichten.

In diesem Codelab gibt es zwei verschiedene Optionen zum Einrichten von Firebase Authentication:

  • Option 1 (empfohlen): Richten Sie Firebase Authentication in der Console ein. Dafür ist GCIP nicht erforderlich.
    • Wenn Sie diese Option verwenden, müssen Sie Ihr neues Projekt nicht mit einem Cloud-Rechnungskonto verknüpfen.
  • Option 2: Firebase Authentication über Terraform mit Google Cloud Identity Platform (GCIP) APIs einrichten.
    • Wenn Sie diese Option verwenden, müssen Sie Ihr neues Projekt mit einem Cloud-Rechnungskonto verknüpfen, da für GCIP der Blaze-Tarif erforderlich ist.

Option 1: Authentifizierung über die Firebase Console einrichten

Wenn Sie die Firebase-Authentifizierung über die Firebase Console einrichten, muss Ihr Projekt nicht im Blaze-Tarif sein.

So richten Sie Firebase Authentication und die Anmeldung mit Google ein:

  1. Suchen Sie in der Firebase Console im linken Bereich nach dem Abschnitt Build.
  2. Klicken Sie auf Authentifizierung, dann auf Jetzt starten und dann auf den Tab Anmeldemethode (oder klicken Sie hier, um direkt dorthin zu gelangen).
  3. Klicken Sie auf Neuen Anbieter hinzufügen und wählen Sie im Bereich Zusätzliche Anbieter die Option Google aus.
  4. Aktivieren Sie den Schalter Aktivieren.
  5. Legen Sie den öffentlichen Namen Ihrer App auf etwas wie FriendlyChat fest. Dieser muss nicht global eindeutig sein.
  6. Wählen Sie im Drop-down-Menü eine E-Mail-Adresse für den Projektsupport aus und klicken Sie dann auf Speichern.Firebase Auth in der Firebase Console konfigurieren
  7. Google sollte als aktivierter Anmeldeanbieter angezeigt werden.Firebase Console-Seite „Authentifizierung“: Google Log-in aktiviert

Option 2: Authentifizierung über Terraform mit Google Cloud Identity Platform (GCIP) APIs einrichten

Wenn Sie die Firebase-Authentifizierung über Terraform einrichten möchten, müssen Sie GCIP-APIs verwenden. Das bedeutet, dass das Projekt den Blaze-Tarif haben muss. Sie führen ein Upgrade Ihres Firebase-Projekts auf den Blaze-Tarif durch, indem Sie dem Projekt ein Cloud-Rechnungskonto zuordnen.

Abrechnung über Terraform aktivieren

  1. Wenn Sie noch kein Cloud-Abrechnungskonto haben, müssen Sie zuerst ein neues Konto in der Google Cloud Console erstellen. Notieren Sie sich dabei die Rechnungskonto-ID. Die Rechnungskonto-ID finden Sie auf der Abrechnungsseite in der Rechnungskonto-ID, die mit Ihrem Projekt verknüpft ist.Rechnungskonto über die Google Cloud Console aktivieren
  2. Wenn Sie die Abrechnung in Ihrem Projekt über Terraform aktivieren möchten, fügen Sie der vorhandenen google_project-Ressource in Ihrer main.tf-Datei das Attribut billing_account hinzu:

    main.tf
    ...
    
    # Create a new Google Cloud project.
    resource "google_project" "default" {
      provider = google-beta.no_user_project_override
    
      name            = "<PROJECT_NAME_OF_YOUR_PROJECT>"
      project_id      = "<PROJECT_ID_OF_YOUR_PROJECT>"
      billing_account = "<YOUR_BILLING_ACCOUNT_ID>" # Add this line with your Cloud Billing account ID
    
      # Required for the project to display in any list of Firebase projects.
      labels = {
        "firebase" = "enabled"
      }
    }
    
    ...
    

Firebase Authentication und Anmeldung über Google über Terraform aktivieren

  1. Wenn Sie die Firebase-Authentifizierung mit GCIP bereitstellen möchten, hängen Sie die folgenden Ressourcenblöcke an Ihre main.tf-Datei an:

    main.tf
    ...
    
    # Enable the Identity Toolkit API.
    resource "google_project_service" "auth" {
      provider = google-beta
    
      project  = google_firebase_project.default.project
      service =  "identitytoolkit.googleapis.com"
    
      # Don't disable the service if the resource block is removed by accident.
      disable_on_destroy = false
    }
    
    # Create an Identity Platform config.
    # Also, enable Firebase Authentication using Identity Platform (if Authentication isn't yet enabled).
    resource "google_identity_platform_config" "auth" {
      provider = google-beta
      project  = google_firebase_project.default.project
    
      # For example, you can configure to auto-delete anonymous users.
      autodelete_anonymous_users = true
    
      # Wait for identitytoolkit.googleapis.com to be enabled before initializing Authentication.
      depends_on = [
        google_project_service.auth,
      ]
    }
    
  2. Wenn Sie „Über Google anmelden“ aktivieren möchten, benötigen Sie einen OAuth-Client. Rufen Sie in der Google Cloud Console den Abschnitt „APIs & Dienste“ auf, um diese Einrichtung vorzunehmen.
  3. Da Sie zum ersten Mal eine Client-ID für dieses Projekt erstellen, müssen Sie Ihren OAuth-Zustimmungsbildschirm konfigurieren.
    1. Öffnen Sie die Seite OAuth-Zustimmungsbildschirm und wählen Sie das Projekt aus, das Sie gerade erstellt haben.
    2. Legen Sie den Nutzertyp auf Extern fest und klicken Sie dann auf Erstellen.
    3. Füllen Sie auf dem nächsten Bildschirm die folgenden Felder aus und klicken Sie dann auf Speichern und fortfahren.
      • Legen Sie den öffentlichen App-Namen Ihrer App auf etwas wie FriendlyChat fest. Dieser muss nicht global eindeutig sein.
      • Wählen Sie im Drop-down-Menü eine E-Mail-Adresse für den Nutzersupport aus.
      • Geben Sie eine E-Mail-Adresse für die Kontaktdaten des Entwicklers ein.
    4. Führen Sie auf den nächsten Bildschirmen die folgenden Schritte aus:
      • Übernehmen Sie die Standardeinstellungen auf der Seite Bereiche und klicken Sie auf Speichern und fortfahren.
      • Akzeptieren Sie die Standardwerte auf der Seite Testnutzer und klicken Sie dann auf Speichern und fortfahren.
      • Prüfen Sie die Zusammenfassung und klicken Sie dann auf Zurück zum Dashboard.
      OAuth2-Client mit der Google Cloud Console konfigurieren
  4. Richten Sie einen OAuth-Client auf der Seite „Anmeldedaten“ ein. Gehen Sie dazu so vor:
    1. Klicken Sie auf Anmeldedaten erstellen und wählen Sie OAuth-Client-ID aus.
    2. Wählen Sie im Drop-down-Menü Anwendungstyp die Option Webanwendung aus.
    3. Geben Sie im Feld Name den Namen Ihrer App ein, z. B. FriendlyChat. Dieser Name muss nicht global eindeutig sein.
    4. Damit die URL Ihrer App diesen OAuth-Client verwenden kann, müssen Sie Folgendes festlegen:
      • Klicken Sie unter Autorisierte JavaScript-Quellen auf URI hinzufügen und geben Sie
        https://<PROJECT_ID>.firebaseapp.com ein, wobei <PROJECT_ID> die Projekt-ID ist, die Sie in main.tf festgelegt haben.
      • Klicken Sie unter Autorisierte Weiterleitungs-URIs auf URI hinzufügen und geben Sie
        https://<PROJECT_ID>.firebaseapp.com/__/auth/handler ein, wobei <PROJECT_ID> die Projekt-ID ist, die Sie in main.tf festgelegt haben.
    5. Klicken Sie auf Speichern.
    OAuth2-Client-ID und -Secret von der Seite „Anmeldedaten“ in der Google Cloud Console abrufen
  5. Wenn Sie die Anmeldung mit Google über Ihre OAuth-Client-ID und Ihren Clientschlüssel aktivieren möchten, fügen Sie Ihrer main.tf-Datei den folgenden Block hinzu:

    main.tf
    ...
    
    variable "oauth_client_secret" {
      type = string
    
      description = "OAuth client secret. For this codelab, you can pass in this secret through the environment variable TF_VAR_oauth_client_secret. In a real app, you should use a secret manager service."
    
      sensitive = true
    }
    
    resource "google_identity_platform_default_supported_idp_config" "google_sign_in" {
      provider = google-beta
      project  = google_firebase_project.default.project
    
      enabled       = true
      idp_id        = "google.com"
      client_id     = "<YOUR_OAUTH_CLIENT_ID>"
      client_secret = var.oauth_client_secret
    
      depends_on = [
         google_identity_platform_config.auth
      ]
    }
    

Wenden Sie die Konfiguration an

  1. Wenn Sie die Authentifizierung entsprechend Ihrer Konfiguration einrichten möchten, führen Sie die folgenden Befehle im Stammverzeichnis aus, in dem sich Ihre main.tf-Datei befindet (die web sein sollte):
    export TF_VAR_oauth_client_secret="<YOUR_OAUTH_CLIENT_SECRET>"
    
    terraform apply
    
    Durch Ausführen von terraform apply wird kein neues Google Cloud-Projekt erstellt. Terraform erkennt, dass ein Projekt mit der angegebenen Projekt-ID bereits vorhanden ist, und vergleicht den aktuellen Status des Projekts mit dem Inhalt der Datei .tf. Anschließend werden alle gefundenen Änderungen vorgenommen.
  2. Sehen Sie sich den ausgedruckten Maßnahmenplan an. Wenn alles wie erwartet aussieht, geben Sie yes ein und drücken Sie die Eingabetaste, um die Aktionen zu genehmigen.

Änderungen prüfen

  1. Suchen Sie in der Firebase Console im linken Bereich nach dem Abschnitt Build.
  2. Klicken Sie auf Authentifizierung und dann auf den Tab Anmeldemethode (oder klicken Sie hier, um direkt dorthin zu gelangen).
  3. Google sollte als aktivierter Anmeldeanbieter angezeigt werden.Firebase Console-Seite „Authentifizierung“: Google Log-in aktiviert

7. Firestore-Datenbank und zugehörige Sicherheitsregeln einrichten

In der Web-App dieses Codelabs speichern Sie Nachrichten zwischen Endnutzern in einer Firestore-Datenbank.

  1. Um die erforderlichen APIs zu aktivieren und die Datenbankinstanz bereitzustellen, fügen Sie Ihrer main.tf-Datei die folgenden Ressourcenblöcke hinzu:

    main.tf
    ...
    
    # Enable required APIs for Cloud Firestore.
    resource "google_project_service" "firestore" {
      provider = google-beta
    
      project  = google_firebase_project.default.project
      for_each = toset([
        "firestore.googleapis.com",
        "firebaserules.googleapis.com",
      ])
      service = each.key
    
      # Don't disable the service if the resource block is removed by accident.
      disable_on_destroy = false
    }
    
    # Provision the Firestore database instance.
    resource "google_firestore_database" "default" {
      provider                    = google-beta
    
      project                     = google_firebase_project.default.project
      name                        = "(default)"
      # See available locations:
      # https://firebase.google.com/docs/firestore/locations
      location_id                 = "<NAME_OF_DESIRED_REGION>"
      # "FIRESTORE_NATIVE" is required to use Firestore with Firebase SDKs,
      # authentication, and Firebase Security Rules.
      type                        = "FIRESTORE_NATIVE"
      concurrency_mode            = "OPTIMISTIC"
    
      depends_on = [
        google_project_service.firestore
      ]
    }
    
  2. Ändern Sie <NAME_OF_DESIRED_REGION> in die Region, in der sich die Datenbank befinden soll.

    Bei der Entwicklung einer Produktions-App sollte sich die Datenbank in einer Region befinden, die sich in der Nähe der Mehrheit der Nutzer befindet und mit anderen Firebase-Diensten wie Cloud Functions übereinstimmt. Für dieses Codelab können Sie us-east1 (South Carolina) oder die Region verwenden, die Ihnen am nächsten ist (siehe Cloud Firestore-Standorte).
  3. Jede Firestore-Datenbankinstanz, auf die Firebase zugreifen kann, muss durch Firebase-Sicherheitsregeln geschützt werden.

    Der Beispielcode dieses Codelabs enthält eine Reihe von sicheren Firestore-Regeln in der Datei firestore.rules, die sich im Stammverzeichnis des Verzeichnisses web befindet.
  4. Hängen Sie die folgenden Ressourcenblöcke an Ihre main.tf-Datei an, um Folgendes zu tun:
    • Erstellen Sie ein Ruleset mit Firebase-Sicherheitsregeln aus der lokalen Datei firestore.rules.
    • Geben Sie das Regelsatz für die Firestore-Instanz frei.
    Diese Ressourcenblöcke entsprechen dem Klicken auf die Schaltfläche Veröffentlichen in der Firebase Console oder dem Ausführen von firebase deploy --only firestore:rules.

    main.tf.
    ...
    
    # Create a ruleset of Firestore Security Rules from a local file.
    resource "google_firebaserules_ruleset" "firestore" {
      provider = google-beta
    
      project  = google_firebase_project.default.project
      source {
        files {
          name = "firestore.rules"
          # Write security rules in a local file named "firestore.rules".
          # Learn more: https://firebase.google.com/docs/firestore/security/get-started
          content = file("firestore.rules")
        }
      }
    
      # Wait for Firestore to be provisioned before creating this ruleset.
      depends_on = [
        google_firestore_database.default,
      ]
    }
    
    # Release the ruleset for the Firestore instance.
    resource "google_firebaserules_release" "firestore" {
      provider     = google-beta
    
      name         = "cloud.firestore"  # must be cloud.firestore
      ruleset_name = google_firebaserules_ruleset.firestore.name
      project      = google_firebase_project.default.project
    
      # Wait for Firestore to be provisioned before releasing the ruleset.
      depends_on = [
        google_firestore_database.default,
      ]
    
      lifecycle {
        replace_triggered_by = [
          google_firebaserules_ruleset.firestore
        ]
      }
    }
    
  5. Führen Sie terraform apply aus, um die Firestore-Datenbank bereitzustellen und ihre Sicherheitsregeln bereitzustellen.
  6. Prüfen Sie, ob die Datenbank bereitgestellt wurde und ihre Sicherheitsregeln bereitgestellt sind:
    1. Suchen Sie in der Firebase Console im linken Bereich nach dem Abschnitt Build.
    2. Rufen Sie den Abschnitt Firestore-Datenbank auf und klicken Sie auf den Tab Regeln.
    Cloud Firestore-Regeln mit der Firebase Console prüfen

8. Cloud Storage-Bucket und zugehörige Sicherheitsregeln einrichten

In der Web-App dieses Codelabs speichern Sie Bilder, die zwischen Endnutzern geteilt werden, in einem Cloud Storage-Bucket.

  1. Wenn Sie die erforderlichen APIs aktivieren und den standardmäßigen Cloud Storage-Bucket bereitstellen möchten, fügen Sie Ihrer main.tf-Datei die folgenden Ressourcenblöcke hinzu.

    Der standardmäßige Cloud Storage-Bucket für Ihr Projekt wird über Google App Engine bereitgestellt und muss denselben Standort wie Ihre Firestore-Datenbank haben. Weitere Informationen finden Sie unter App Engine-Standorte.

    Wenn Sie mehrere Buckets in Ihrem Projekt benötigen, stellen Sie sie mit der google_storage_bucket-Ressource bereit (nicht in diesem Codelab gezeigt).

    main.tf
    ...
    
    # Enable required APIs for Cloud Storage for Firebase.
    resource "google_project_service" "storage" {
      provider = google-beta
    
      project  = google_firebase_project.default.project
      for_each = toset([
        "firebasestorage.googleapis.com",
        "storage.googleapis.com",
      ])
      service = each.key
    
    
      # Don't disable the service if the resource block is removed by accident.
      disable_on_destroy = false
    }
    
    # Provision the default Cloud Storage bucket for the project via Google App Engine.
    resource "google_app_engine_application" "default" {
      provider    = google-beta
    
      project     = google_firebase_project.default.project
      # See available locations: https://firebase.google.com/docs/projects/locations#default-cloud-location
      # This will set the location for the default Storage bucket and the App Engine App.
      location_id = "<NAME_OF_DESIRED_REGION_FOR_DEFAULT_BUCKET>"  # Must be in the same location as Firestore (above)
    
      # Wait until Firestore is provisioned first.
      depends_on = [
        google_firestore_database.default
      ]
    }
    
    # Make the default Storage bucket accessible for Firebase SDKs, authentication, and Firebase Security Rules.
    resource "google_firebase_storage_bucket" "default-bucket" {
      provider  = google-beta
    
      project   = google_firebase_project.default.project
      bucket_id = google_app_engine_application.default.default_bucket
    }
    
  2. Jeder Cloud Storage-Bucket, auf den Firebase zugreifen kann, muss durch Firebase-Sicherheitsregeln geschützt werden.

    Der Beispielcode dieses Codelabs enthält eine Reihe sicherer Firestore-Regeln in der Datei storage.rules, die sich im Stammverzeichnis des Verzeichnisses web befindet.
  3. Hängen Sie die folgenden Ressourcenblöcke an Ihre main.tf-Datei an, um Folgendes zu tun:
    • Erstellen Sie ein Ruleset mit Firebase-Sicherheitsregeln aus der lokalen Datei.
    • Geben Sie das Ruleset für den Storage-Bucket frei.
    Diese Ressourcenblöcke entsprechen dem Klicken auf die Schaltfläche Veröffentlichen in der Firebase Console oder dem Ausführen von firebase deploy --only storage.

    main.tf.
    ...
    
    # Create a ruleset of Cloud Storage Security Rules from a local file.
    resource "google_firebaserules_ruleset" "storage" {
      provider = google-beta
    
      project  = google_firebase_project.default.project
      source {
        files {
          # Write security rules in a local file named "storage.rules".
          # Learn more: https://firebase.google.com/docs/storage/security/get-started
          name    = "storage.rules"
          content = file("storage.rules")
        }
      }
    
      # Wait for the default Storage bucket to be provisioned before creating this ruleset.
      depends_on = [
        google_firebase_storage_bucket.default-bucket,
      ]
    }
    
    # Release the ruleset to the default Storage bucket.
    resource "google_firebaserules_release" "default-bucket" {
      provider     = google-beta
    
      name         = "firebase.storage/${google_app_engine_application.default.default_bucket}"
      ruleset_name = "projects/${google_firebase_project.default.project}/rulesets/${google_firebaserules_ruleset.storage.name}"
      project      = google_firebase_project.default.project
    
      lifecycle {
        replace_triggered_by = [
          google_firebaserules_ruleset.storage
        ]
      }
    }
    
  4. Führen Sie terraform apply aus, um den standardmäßigen Cloud Storage-Bucket bereitzustellen und die zugehörigen Sicherheitsregeln bereitzustellen.
  5. Prüfen Sie, ob der Bucket bereitgestellt wurde und seine Sicherheitsregeln bereitgestellt sind:
    1. Suchen Sie in der Firebase Console im linken Bereich nach dem Abschnitt Build.
    2. Gehen Sie zum Bereich Speicher und klicken Sie auf den Tab Regeln.
    Sicherheitsregeln mit der Firebase Console überprüfen

9. App lokal ausführen

Jetzt können Sie Ihre Web-App zum ersten Mal ausführen. Sie verwenden den Firebase Hosting-Emulator, um Ihre App lokal bereitzustellen.

  1. Öffnen Sie ein neues Terminalfenster und führen Sie im Verzeichnis web den folgenden Firebase CLI-Befehl aus, um den Emulator zu starten:
    firebase emulators:start --project=<PROJECT_ID>
    
  2. Öffnen Sie Ihre Webanwendung in Ihrem Browser unter der lokalen URL, die von der CLI zurückgegeben wurde (in der Regel http://localhost:5000).

Es sollte die (noch) nicht funktionierende UI der FriendlyChat-App angezeigt werden. Die App ist noch nicht mit Firebase verbunden. Wenn Sie die nächsten Schritte dieses Codelabs ausführen, wird sie verbunden.

Wenn Sie Änderungen an Ihrer Web-App vornehmen (wie in den folgenden Schritten dieses Codelabs), müssen Sie den Browser aktualisieren, damit die lokale URL mit diesen Änderungen aktualisiert wird.

10. Firebase installieren, konfigurieren und initialisieren

Damit eine App mit Firebase funktioniert, benötigt sie das Firebase SDK und die Firebase-Konfiguration für Ihr Firebase-Projekt.

Der Beispielcode für dieses Codelab ist bereits eine funktionierende App mit allen Abhängigkeiten und erforderlichen Funktionen für die Verwendung verschiedener Firebase-Produkte in der App. Wenn Sie sehen möchten, was bereits erledigt wurde, können Sie sich web/package.json und web/src/index.js ansehen.

Der Beispielcode ist zwar größtenteils vollständig, aber Sie müssen noch einige Dinge tun, damit Ihre App ausgeführt werden kann. Dazu gehören: Firebase SDK installieren, Build starten, Firebase-Konfiguration zur App hinzufügen und Firebase initialisieren.

Firebase SDK installieren und Webpack-Build starten

Sie müssen einige Befehle ausführen, um die Erstellung Ihrer App zu starten.

  1. Öffnen Sie ein neues Terminalfenster.
  2. Achten Sie darauf, dass Sie sich im Stammverzeichnis des Verzeichnisses web befinden.
  3. Führen Sie npm install aus, um das Firebase SDK herunterzuladen.
  4. Führen Sie npm update aus, um alle Abhängigkeiten zu aktualisieren.
  5. Führen Sie npm run start aus, um webpack zu starten.

Für den Rest des Codelabs wird webpack Ihren Quellcode jetzt kontinuierlich neu erstellen.

Firebase-Konfiguration zu Ihrer App hinzufügen

Außerdem müssen Sie Ihrer App die Firebase-Konfiguration hinzufügen, damit die Firebase SDKs wissen, welches Firebase-Projekt sie verwenden sollen.

Für dieses Codelab haben Sie zwei verschiedene Möglichkeiten, Ihre Firebase-Konfiguration abzurufen:

  • Option 1: Firebase-Konfiguration aus der Firebase Console abrufen
  • Option 2: Firebase-Konfiguration über Terraform abrufen

Option 1: Konfiguration aus der Firebase Console abrufen und der Codebasis hinzufügen

  1. Rufen Sie in der Firebase Console die Projekteinstellungen auf.
  2. Scrollen Sie nach unten zur Karte Meine Apps und wählen Sie Ihre Web-App aus.
  3. Wählen Sie im Bereich mit dem Firebase SDK-Snippet Config aus und kopieren Sie dann das Konfigurations-Snippet.
  4. Fügen Sie die Konfiguration in die web/src/firebase-config.js-Datei Ihrer App ein:

    firebase-config.js
    ...
    
    const config = {
      apiKey: "<API_KEY>",
      authDomain: "<PROJECT_ID>.firebaseapp.com",
      projectId: "<PROJECT_ID>",
      storageBucket: "<PROJECT_ID>.appspot.com",
      messagingSenderId: "<SENDER_ID>",
      appId: "<APP_ID>",
      measurementId: "<G-MEASUREMENT_ID>",
    };
    
    ...
    

Option 2: Konfiguration über Terraform abrufen und der Codebasis hinzufügen

Alternativ können Sie Ihre Firebase-Konfiguration über Terraform als Ausgabewert in der CLI abrufen.

  1. Suchen Sie in der Datei main.tf nach dem Ressourcenblock google_firebase_web_app (dem Block, in dem eine Webanwendung für Ihr Projekt registriert wurde).
  2. Fügen Sie direkt nach diesem Block die folgenden Blöcke ein:

    main.tf
    ...
    
    data "google_firebase_web_app_config" "default" {
      provider     = google-beta
      project      = google_firebase_project.default.project
      web_app_id   = google_firebase_web_app.default.app_id
    }
    
    output "friendlychat_web_app_config" {
      value = {
        projectId         = google_firebase_project.default.project
        appId             = google_firebase_web_app.default.app_id
        apiKey            = data.google_firebase_web_app_config.default.api_key
        authDomain        = data.google_firebase_web_app_config.default.auth_domain
        storageBucket     = lookup(data.google_firebase_web_app_config.default, "storage_bucket", "")
        messagingSenderId = lookup(data.google_firebase_web_app_config.default, "messaging_sender_id", "")
        measurementId     = lookup(data.google_firebase_web_app_config.default, "measurement_id", "")
      }
    }
    
    ...
    
  3. Da der data-Block und der output-Block nicht für die Änderung der Infrastruktur vorgesehen sind, müssen Sie nur die folgenden Befehle ausführen.
    1. Führen Sie den folgenden Befehl aus, um die Firebase-Konfiguration Ihrer Web-App in den Terraform-Status Ihres Verzeichnisses zu laden:
      terraform refresh
      
    2. Führen Sie den folgenden Befehl aus, um die Firebase-Konfigurationswerte auszugeben:
      terraform output –json
      
      Im Folgenden finden Sie ein Beispiel für die Ausgabe einer Konfiguration. Die gedruckte Ausgabe enthält die Werte Ihres Projekts und Ihrer App.
      {
        "friendlychat_web_app_config": {
          "sensitive": false,
          "type": [
            "object",
            {
              "apiKey": "string",
              "appId": "string",
              "authDomain": "string",
              "measurementId": "string",
              "messagingSenderId": "string",
              "projectId": "string",
              "storageBucket": "string"
            }
          ],
          "value": {
            "apiKey": "<API_KEY>",
            "appId": "<APP_ID>",
            "authDomain": "<PROJECT_ID>.firebaseapp.com",
            "measurementId": "<G-MEASUREMENT_ID>",
            "messagingSenderId": "<SENDER_ID>",
            "projectId": "<PROJECT_ID>",
            "storageBucket": "<PROJECT_ID>.appspot.com"
          }
        }
      }
      
  4. Kopieren Sie die Werte aus der value-Zuordnung.
  5. Fügen Sie diese Werte (Ihre Konfiguration) in die web/src/firebase-config.js-Datei Ihrer App ein, wie hier gezeigt:

    firebase-config.js
    ...
    
    const config = {
      apiKey: "<API_KEY>",
      appId: "<APP_ID>",
      authDomain: "<PROJECT_ID>.firebaseapp.com",
      measurementId: "<G-MEASUREMENT_ID>",
      messagingSenderId: "<SENDER_ID>",
      projectId: "<PROJECT_ID>",
      storageBucket: "<PROJECT_ID>.appspot.com",
    };
    
    ...
    

Firebase in Ihrer App initialisieren

Fügen Sie zum Initialisieren von Firebase der Datei web/src/index.js Ihrer App Folgendes hinzu:

index.js

...

const firebaseAppConfig = getFirebaseConfig();
initializeApp(firebaseAppConfig);

App ausprobieren

Nachdem alles für Firebase konfiguriert ist, können Sie Ihre funktionale Web-App ausprobieren.

  1. Aktualisieren Sie den Browser, in dem Ihre App ausgeführt wird.
  2. Sie sollten sich jetzt mit Google anmelden und Nachrichten im Chat posten können. Wenn Sie Bilddateien haben, können Sie diese sogar hochladen.

11. Konfigurationen in verschiedenen Umgebungen replizieren

Terraform eignet sich hervorragend für die Verwaltung mehrerer ähnlich konfigurierter Infrastrukturen, z. B. für die Einrichtung eines Firebase-Staging-Projekts, das einem Produktionsprojekt ähnelt.

In diesem Codelab erstellen Sie ein zweites Firebase-Projekt als Staging-Umgebung.

Sie haben zwei Möglichkeiten, eine vorhandene Konfiguration zu replizieren, um dieses Staging-Projekt zu erstellen:

  • Option 1: Kopieren Sie die Terraform-Konfiguration.
     Diese Option bietet die größte Flexibilität hinsichtlich der Abweichung des replizierten Projekts vom Quellprojekt.
  • Option 2: Konfigurationen mit for_each wiederverwenden.
     Diese Option bietet mehr Code-Wiederverwendung, wenn sich die einzelnen Projekte nicht wesentlich unterscheiden sollen und Sie Änderungen gleichzeitig auf alle Projekte übertragen möchten.

Option 1: Kopie der Terraform-Konfiguration erstellen

Diese Option bietet die größte Flexibilität hinsichtlich der Unterschiede zwischen dem replizierten Projekt und dem Quellprojekt, z. B. bei Apps mit unterschiedlichen Anzeigenamen und stufenweisen Einführungen.

  1. Erstellen Sie im Stammverzeichnis Ihres web-Verzeichnisses eine neue Terraform-Konfigurationsdatei mit dem Namen main_staging.tf.
  2. Kopieren Sie alle Ressourcenblöcke aus der Datei main.tf (mit Ausnahme der Blöcke terraform und provider) und fügen Sie sie in die Datei main_staging.tf ein.
  3. Anschließend müssen Sie jeden Ihrer replizierten Ressourcenblöcke in main_staging.tf so ändern, dass sie mit Ihrem Staging-Projekt funktionieren:
    • Ressourcenlabels:Verwenden Sie einen neuen Namen, um Konflikte zu vermeiden. Benennen Sie beispielsweise resource "google_project" "default" in resource "google_project" "staging" um.
    • Ressourcenreferenzen:Aktualisieren Sie jede einzelne. Aktualisieren Sie beispielsweise google_firebase_project.default.project auf google_firebase_project.staging.project.
    Die vollständige Konfiguration einer main_staging.tf-Datei finden Sie im GitHub-Repository dieses Codelabs:

    web/terraform-checkpoints/replicate-config/main_staging-copypaste.tf

    Wenn Sie diese Konfiguration verwenden möchten, müssen Sie Folgendes tun:
    1. Kopieren Sie die Konfiguration aus main_staging-copypaste.tf und fügen Sie sie in Ihre main_staging.tf-Datei ein.
    2. Führen Sie in der Datei main_staging.tf die folgenden Schritte aus:
      • Aktualisieren Sie im Ressourcenblock google_project das Attribut name, das Attribut project-id und (falls Sie die Authentifizierung über Terraform eingerichtet haben) das Attribut billing_account mit Ihren eigenen Werten.
      • Aktualisieren Sie im Ressourcenblock google_firebase_web_app das Attribut display_name mit Ihrem eigenen Wert.
      • Aktualisieren Sie in den Ressourcenblöcken google_firestore_database und google_app_engine_application die Attribute location_id mit Ihrem eigenen Wert.
    main_staging.tf
    # Create a new Google Cloud project.
    resource "google_project" "staging" {
      provider = google-beta.no_user_project_override
    
      name            = "<PROJECT_NAME_OF_STAGING_PROJECT>"
      project_id      = "<PROJECT_ID_OF_STAGING_PROJECT"
      # Required if you want to set up Authentication via Terraform
      billing_account = "<YOUR_BILLING_ACCOUNT_ID>"
    
      # Required for the project to display in any list of Firebase projects.
      labels = {
        "firebase" = "enabled"
      }
    }
    
    # Enable the required underlying Service Usage API.
    resource "google_project_service" "staging_serviceusage" {
      provider = google-beta.no_user_project_override
    
      project = google_project.staging.project_id
      service = "serviceusage.googleapis.com"
    
      # Don't disable the service if the resource block is removed by accident.
      disable_on_destroy = false
    }
    
    # Enable the required underlying Firebase Management API.
    resource "google_project_service" "staging_firebase" {
      provider = google-beta.no_user_project_override
    
      project = google_project.staging.project_id
      service = "firebase.googleapis.com"
    
      # Don't disable the service if the resource block is removed by accident.
      disable_on_destroy = false
    }
    
    # Enable Firebase services for the new project created above.
    resource "google_firebase_project" "staging" {
      provider = google-beta
    
      project = google_project.staging.project_id
    
      # Wait until the required APIs are enabled.
      depends_on = [
        google_project_service.staging_serviceusage,
        google_project_service.staging_firebase,
      ]
    }
    
    # Create a Firebase Web App in the new project created above.
    resource "google_firebase_web_app" "staging" {
      provider = google-beta
    
      project      = google_firebase_project.staging.project
      display_name = "<DISPLAY_NAME_OF_YOUR_WEB_APP>"
      deletion_policy = "DELETE"
    }
    
  4. Führen Sie terraform apply aus, um Ihr neues Firebase-Stagingprojekt und alle zugehörigen Ressourcen bereitzustellen und die Dienste zu aktivieren.
  5. Prüfen Sie in der Firebase Console, ob alles wie erwartet bereitgestellt und aktiviert wurde.

Option 2: Konfigurationen mit for_each wiederverwenden

Diese Option bietet mehr Code-Wiederverwendung, wenn sich die einzelnen Projekte nicht wesentlich unterscheiden sollen und Sie Änderungen gleichzeitig auf alle Projekte übertragen möchten. Dazu wird das Meta-Argument for_each in der Terraform-Sprache verwendet.

  1. Öffnen Sie Ihre main.tf-Datei.
  2. Fügen Sie jedem Ressourcenblock, den Sie replizieren möchten, ein for_each-Meta-Argument hinzu:

    main.tf
    # Create new Google Cloud projects.
    resource "google_project" "default" {
      provider        = google-beta.no_user_project_override
      name            = each.value
      # Create a unique project ID for each project, with each ID starting with <PROJECT_ID>.
      project_id      = "<PROJECT_ID>-${each.key}"
      # Required if you want to set up Authentication via Terraform
      billing_account = "<YOUR_BILLING_ACCOUNT_ID>"
    
      # Required for the projects to display in any list of Firebase projects.
      labels = {
        "firebase" = "enabled"
      }
    
      for_each = {
        prod    = "<PROJECT_NAME_OF_PROD_PROJECT>"
        staging = "<PROJECT_NAME_OF_STAGING_PROJECT>"
      }
    }
    
    # Enable the required underlying Service Usage API.
    resource "google_project_service" "serviceusage" {
      provider = google-beta.no_user_project_override
      for_each = google_project.default
    
      project = each.value.project_id
      service = "serviceusage.googleapis.com"
    
      # Don't disable the service if the resource block is removed by accident.
      disable_on_destroy = false
    }
    
    # Enable the required underlying Firebase Management API.
    resource "google_project_service" "firebase" {
      provider = google-beta.no_user_project_override
      for_each = google_project.default
    
      project = each.value.project_id
      service = "firebase.googleapis.com"
    
      # Don't disable the service if the resource block is removed by accident.
      disable_on_destroy = false
    }
    
    # Enable Firebase services for each of the new projects created above.
    resource "google_firebase_project" "default" {
      provider = google-beta
      for_each = google_project.default
    
      project = each.value.project_id
    
      depends_on = [
        google_project_service.serviceusage,
        google_project_service.firebase,
      ]
    }
    
    # Create a Firebase Web App in each of the new projects created above.
    resource "google_firebase_web_app" "default" {
      provider = google-beta
      for_each = google_firebase_project.default
    
      project      = each.value.project
      # The Firebase Web App created in each project will have the same display name.
      display_name = "<DISPLAY_NAME_OF_YOUR_WEB_APP>"
      deletion_policy = "DELETE"
    }
    
    
    # NOTE: For this codelab, we recommend setting up Firebase Authentication
    # using the Firebase console. However, if you set up Firebase Authentication
    # using Terraform, copy-paste from your main.tf the applicable blocks.
    # Make sure to add the `for_each` meta-argument into each block.
    
    
    # Copy-paste from your main.tf file the applicable resource blocks
    # for setting up Cloud Firestore (including rules) and
    # for setting up Cloud Storage for Firebase (including rules).
    # Make sure to add the `for_each` meta-argument into each block.
    
    Die vollständige Konfiguration einer main.tf-Datei, in der das Meta-Argument for_each verwendet wird, finden Sie im GitHub-Repository dieses Codelabs:

    web/terraform-checkpoints/replicate-config/main-foreach.tf

    Wenn Sie diese Konfiguration verwenden möchten, müssen Sie Folgendes tun:
    1. Kopieren Sie die Konfiguration aus main-foreach.tf und fügen Sie sie in Ihre main.tf-Datei ein.
    2. Führen Sie in der Datei main.tf die folgenden Schritte aus:
      • Aktualisieren Sie im Ressourcenblock google_project das Attribut name, das Attribut project-id und (falls Sie die Authentifizierung über Terraform eingerichtet haben) das Attribut billing_account mit Ihren eigenen Werten.
      • Aktualisieren Sie im Ressourcenblock google_firebase_web_app das Attribut display_name mit Ihrem eigenen Wert.
      • Aktualisieren Sie in den Ressourcenblöcken google_firestore_database und google_app_engine_application die Attribute location_id mit Ihrem eigenen Wert.
  3. Anstatt diese Konfiguration sofort anzuwenden, ist es wichtig, einige Dinge zu verstehen und zu beheben, die sich darauf beziehen, wie Terraform diese Konfiguration im Vergleich zur vorhandenen Infrastruktur interpretiert.
    1. Wenn Sie diese Konfiguration mit for_each jetzt anwenden, sehen die Ressourcenadressen so aus:
      google_project.default["prod"]
      google_project.default["staging"]
      google_firebase_project.default["prod"]
      google_firebase_project.default["staging"]
      google_firebase_web_app.default["prod"]
      google_firebase_web_app.default["staging"]
      
      Das vorhandene Projekt, das Sie im ersten Teil dieses Codelabs erstellt haben, ist Terraform jedoch als Folgendes bekannt:
      google_project.default
      google_firebase_project.default
      google_firebase_android_app.default
      
    2. Führen Sie terraform plan aus, um zu sehen, welche Aktionen Terraform im aktuellen Zustand ausführen würde.

      In der Ausgabe sollte zu sehen sein, dass Terraform das Projekt löschen würde, das Sie im ersten Teil dieses Codelabs erstellt haben, und zwei neue Projekte erstellen würde. Das liegt daran, dass Terraform nicht weiß, dass das Projekt unter der Adresse google_project.default zur neuen Adresse google_project.default["prod"] verschoben wurde.
    3. Führen Sie zur Behebung des Problems den Befehl terraform state mv aus:
      terraform state mv "google_project.default" "google_project.default[\"prod\"]"
      
    4. Um alle anderen Ressourcenblöcke zu korrigieren, führen Sie terraform state mv für google_firebase_project, google_firebase_web_app und alle anderen Ressourcenblöcke in Ihrer main.tf-Datei aus.
    5. Wenn Sie terraform plan jetzt noch einmal ausführen, sollte nicht angezeigt werden, dass Terraform das Projekt löschen würde, das Sie im ersten Teil dieses Codelabs erstellt haben.
  4. Führen Sie terraform apply aus, um Ihr neues Firebase-Stagingprojekt und alle zugehörigen Ressourcen bereitzustellen und die Dienste zu aktivieren.
  5. Prüfen Sie in der Firebase Console, ob alles wie erwartet bereitgestellt und aktiviert wurde.

12. Bonusschritt: Staging- und Produktions-Apps bereitstellen

  1. Ändern Sie in der Codebasis Ihrer App die firebase-config.js, sodass stattdessen die Firebase-Konfiguration aus Ihrem Staging-Projekt verwendet wird.

    Wenn Sie sich noch einmal ansehen möchten, wie Sie Ihre Firebase-Konfiguration abrufen und Ihrer App hinzufügen, lesen Sie den vorherigen Schritt dieses Codelabs: „Firebase-Konfiguration zur App hinzufügen“.
  2. Führen Sie im Stammverzeichnis Ihres web-Verzeichnisses den folgenden Befehl aus, um Ihre App in Ihrem Firebase-Staging-Projekt bereitzustellen.
    firebase deploy --only hosting --project=<STAGING_PROJECT_ID>
    
  3. Öffnen Sie die Staging-App im Browser über die URL, die in der Ausgabe von firebase deploy angegeben ist. Melden Sie sich an, senden Sie Nachrichten und laden Sie Bilder hoch.

    Wenn Sie eine App in einem Firebase-Projekt bereitstellen, werden echte Firebase-Ressourcen und keine emulierten Ressourcen verwendet. Wenn Sie mit Ihrer Staging-App interagieren, sollten in Ihrem Staging-Projekt in der Firebase Console Daten und Bilder angezeigt werden.
  4. Nachdem Sie Ihre App in der Staging-Umgebung getestet haben, ändern Sie firebase-config.js wieder so, dass die Firebase-Konfiguration des Produktionsprojekts verwendet wird (das erste Projekt, das Sie in diesem Codelab erstellt haben).
  5. Führen Sie im Stammverzeichnis Ihres web-Verzeichnisses den folgenden Befehl aus, um Ihre App in Ihrem Firebase-Produktionsprojekt bereitzustellen.
    firebase deploy --only hosting --project=<PRODUCTION_PROJECT_ID>
    
  6. Öffnen Sie Ihre Produktions-App im Browser über die URL, die in der Ausgabe von firebase deploy angegeben ist. Melden Sie sich an, senden Sie Nachrichten und laden Sie Bilder hoch.

    In Ihrem Produktionsprojekt in der Firebase Console sollten Daten und Bilder angezeigt werden.
  7. Wenn Sie die Interaktion mit den beiden Apps für dieses Codelab abgeschlossen haben, können Sie die Bereitstellung der Apps durch Firebase beenden. Führen Sie den folgenden Befehl für jedes Ihrer Projekte aus:
    firebase hosting:disable --project=<STAGING_PROJECT_ID>
    
    firebase hosting:disable --project=<PRODUCTION_PROJECT_ID>
    

13. Glückwunsch!

Sie haben Terraform verwendet, um eine Webanwendung für Echtzeit-Chats zu konfigurieren. Außerdem haben Sie die Best Practices für Entwicklungsumgebungen befolgt und separate Firebase-Projekte für Staging und Produktion erstellt.

Behandelte Themen

  • Cloud-Ressourcen mit der Terraform-Befehlszeile verwalten
  • Firebase-Produkte (Authentifizierung, Firestore, Cloud Storage und Sicherheitsregeln) mit Terraform konfigurieren
  • Webanwendung lokal mit der Firebase Local Emulator Suite ausführen und testen
  • Firebase in eine Web-App importieren
  • Konfiguration mit Terraform in mehreren Umgebungen replizieren

Weitere Informationen zu Firebase und Terraform finden Sie in unserer Dokumentation. Hier finden Sie eine Liste aller Firebase-Produkte mit Terraform-Unterstützung, Beispielkonfigurationen für häufige Anwendungsfälle sowie hilfreiche Informationen zur Fehlerbehebung und FAQs.