Schnellstartlösung: Dynamische Webanwendung mit JavaScript

Last reviewed 2023-12-06 UTC

Diese Anleitung hilft Ihnen dabei, die Schnellstart-Lösung Dynamische Webanwendung mit JavaScript zu verstehen, bereitzustellen und zu verwenden. In dieser Lösung erfahren Sie, wie Sie dynamische Websites in Google Cloud erstellen und ausführen. Sie können ihn als Beispielbereitstellung für Ihre eigene dynamische Website in Google Cloud nutzen, einschließlich der von Ihnen benötigten Google Cloud-Produkte und wie sie untereinander kommunizieren sollten.

In diesem Lösungsleitfaden wird die Webanwendung Developer Journey in Google Cloud bereitgestellt.

Developer Journey basiert auf TypeScript, Next.js und React und veranschaulicht statische Generierungs- und serverseitige Renderingtechniken für das Vorabrendering von cachefähigen Seiten.

In diesem Dokument wird davon ausgegangen, dass Sie mit grundlegenden Cloud-Konzepten vertraut sind, aber nicht unbedingt mit Google Cloud. Erfahrung mit Terraform ist hilfreich.

.

Lernziele

In dieser Lösungsanleitung erfahren Sie, wie Sie Google Cloud für Folgendes verwenden:

  • Öffentlich zugängliche Webanwendung in Cloud Run bereitstellen
    • Anwendung gemäß den von Google Cloud empfohlenen Sicherheitspraktiken (z. B. Verwenden von Secrets und Zuweisen der minimal erforderlichen Berechtigung einschließlich entsprechender IAM-Berechtigungen) mit einer Google Cloud-Datenbank verbinden.
    • Backend-Dienste bereitstellen und ausführen
    • Änderungen am Inhalt vornehmen oder die Anwendung ändern, um ein Feature hinzuzufügen
    • Anwendung sicher erstellen und neu bereitstellen
  • Bereitstellung untersuchen
  • Anwendung anpassen

Wir empfehlen Folgendes:

  • Sie sind mit der Programmierung mit TypeScript und React vertraut.
  • Sie möchten Cloud-Infrastrukturen für Ihre neuen JavaScript-Anwendungen verwenden.
  • Sie sind mit Datenbankverbindungen, CI/CD, Debugging und Logging vertraut.
  • Sie sind mit den Grundlagen der Websiteentwicklung vertraut.

Verwendete Produkte

Im Folgenden finden Sie eine Zusammenfassung der Google Cloud-Produkte, die in die Lösung „Developer Journey“ integriert sind:

  • Cloud Run: Ein vollständig verwalteter Dienst, mit dem Sie serverlose Containeranwendungen erstellen und bereitstellen können. Cloud Run übernimmt die Skalierung und andere Infrastrukturaufgaben, damit Sie sich auf die Geschäftslogik Ihres Codes konzentrieren können.
  • Firestore: Eine NoSQL-Dokumentdatenbank, die auf Autoscaling, hohe Leistung und einfache Anwendungsentwicklung ausgelegt ist.
  • Cloud Load Balancing: Skalierbares, leistungsstarkes Load-Balancing in Google Cloud
  • Secret Manager: Ein Dienst, mit dem Sie Secrets als Blobs oder Textstrings speichern, verwalten und darauf zugreifen können. Mit Secret Manager können Sie Datenbankpasswörter, API-Schlüssel oder TLS-Zertifikate speichern, die von einer Anwendung zur Laufzeit benötigt werden.
  • Cloud Storage: Ein für Unternehmen geeigneter Dienst, der einen kostengünstigen, unbegrenzten Objektspeicher für verschiedene Datentypen bietet. Daten können von innerhalb und außerhalb von Google Cloud aufgerufen und georedundant repliziert werden.
  • Cloud Build: Ein Dienst, mit dem Sie Quellcode aus Repositories oder von Cloud-Speicherorten importieren, einen Build ausführen und Artefakte wie Docker-Container oder Java-Archive für Continuous Delivery erstellen können.

Architektur

Im folgenden Diagramm wird die Architektur der Lösung dargestellt:

Diagramm der dynamischen Webanwendung mit JavaScript-Architektur

Anfrageablauf

Die Architektur umfasst die folgenden Komponenten:

  1. Mobilgeräte- und Webnutzer stellen über eine URL eine Verbindung zur Anwendung her.
  2. Cloud CDN stellt im Cache gespeicherte Assets bereit, sofern diese dort verfügbar sind. Andernfalls wird die Anfrage an Cloud Load Balancing weitergeleitet.
  3. Bei statischen Assets ruft Cloud Load Balancing Daten aus dem Cloud Storage-Bucket ab.
  4. Bei dynamischen Ressourcen leitet Cloud Load Balancing Anfragen an Cloud Run weiter.
  5. Sensible Werte werden mithilfe von Umgebungsvariablen, die in Secret Manager gespeichert sind, an Cloud Run übergeben.
  6. Cloud Run fragt Nutzerdaten aus Firestore ab, einem NoSQL-Datenbank-Backend für die Webanwendung.

Kosten

Eine Schätzung der Kosten der Google Cloud-Ressourcen, die von der Lösung für dynamische Webanwendungen mit JavaScript verwendet werden, finden Sie im Google Cloud-Preisrechner.

Verwenden Sie die vorab berechnete Schätzung als Ausgangspunkt, um die Kosten Ihrer Bereitstellung zu berechnen. Sie können die Schätzung ändern, um alle Konfigurationsänderungen widerzuspiegeln, die Sie für die in der Lösung verwendeten Ressourcen vornehmen möchten.

Die vorab berechnete Schätzung basiert auf Annahmen für bestimmte Faktoren, darunter:

  • Die Google Cloud-Standorte, an denen die Ressourcen bereitgestellt werden.
  • Die Zeitdauer der Verwendung der Ressourcen.

Hinweise

Zum Bereitstellen dieser Lösung benötigen Sie zuerst ein Google Cloud-Projekt und einige IAM-Berechtigungen.

Google Cloud-Projekt erstellen oder auswählen

Beim Bereitstellen der Lösung wählen Sie das Google Cloud-Projekt aus, in dem die Ressourcen bereitgestellt werden. Sie können entweder ein neues Projekt erstellen oder ein vorhandenes Projekt für die Bereitstellung verwenden.

Wenn Sie ein neues Projekt erstellen möchten, sollten Sie dies tun, bevor Sie mit der Bereitstellung beginnen. Durch die Verwendung eines neuen Projekts können Konflikte mit zuvor bereitgestellten Ressourcen vermieden werden, beispielsweise Ressourcen, die für Produktionsarbeitslasten verwendet werden.

So erstellen Sie ein Projekt:

  1. In the Google Cloud console, go to the project selector page.

    Go to project selector

  2. Click Create project.

  3. Name your project. Make a note of your generated project ID.

  4. Edit the other fields as needed.

  5. Click Create.

Erforderliche IAM-Berechtigungen abrufen

Zum Starten des Bereitstellungsprozesses benötigen Sie die in der folgenden Tabelle aufgeführten IAM-Berechtigungen (Identity and Access Management).

Wenn Sie ein neues Projekt für diese Lösung erstellt haben, haben Sie die einfache Rolle roles/owner in diesem Projekt und verfügen über alle erforderlichen Berechtigungen. Wenn Sie die Rolle roles/owner nicht haben, bitten Sie Ihren Administrator, Ihnen die Berechtigungen (oder die Rollen mit diesen Berechtigungen) zu gewähren.

Erforderliche IAM-Berechtigung Vordefinierte Rolle mit den erforderlichen Berechtigungen

serviceusage.services.enable

Service Usage-Administrator
(roles/serviceusage.serviceUsageAdmin)

iam.serviceAccounts.create

Dienstkontoadministrator
(roles/iam.serviceAccountAdmin)

resourcemanager.projects.setIamPolicy

Projekt-IAM-Administrator
(roles/resourcemanager.projectIamAdmin)
config.deployments.create
config.deployments.list
Cloud Infrastructure Manager Admin
(roles/config.admin)
iam.serviceAccount.actAs Dienstkontonutzer
(roles/iam.serviceAccountUser)

Temporäre Dienstkontoberechtigungen

Wenn Sie den Bereitstellungsprozess über die Console starten, erstellt Google ein Dienstkonto, um die Lösung für Sie bereitzustellen und die Bereitstellung später zu löschen, wenn Sie dies möchten. Diesem Dienstkonto werden bestimmte IAM-Berechtigungen vorübergehend zugewiesen. Das heißt, die Berechtigungen werden automatisch widerrufen, nachdem die Bereitstellungs- und Löschvorgänge für die Lösung abgeschlossen sind. Google empfiehlt, dass Sie nach dem Löschen der Bereitstellung das Dienstkonto löschen, wie weiter unten in dieser Anleitung beschrieben.

Rollen ansehen, die dem Dienstkonto zugewiesen sind

Diese Rollen sind hier aufgeführt, falls ein Administrator Ihres Google Cloud-Projekts oder Ihrer Organisation diese Informationen benötigt.

  • roles/datastore.owner
  • roles/iam.serviceAccountAdmin
  • roles/iam.serviceAccountUser
  • roles/resourcemanager.projectIamAdmin
  • roles/run.admin
  • roles/`roles/secretmanager.admin
  • roles/storage.admin
  • roles/compute.networkAdmin
  • roles/compute.admin

Lösung bereitstellen

Damit Sie diese Lösung mit minimalem Aufwand bereitstellen können, wird in GitHub eine Terraform-Konfiguration bereitgestellt. Die Terraform-Konfiguration definiert alle Google Cloud-Ressourcen, die für die Lösung erforderlich sind.

Sie können die Lösung mit einer der folgenden Methoden bereitstellen:

  • Über die Console: Verwenden Sie diese Methode, wenn Sie die Lösung mit der Standardkonfiguration testen und sehen möchten, wie sie funktioniert. Cloud Build stellt alle für die Lösung erforderlichen Ressourcen bereit. Wenn Sie die bereitgestellte Lösung nicht mehr benötigen, können Sie sie aus der Console löschen. Alle Ressourcen, die Sie nach der Bereitstellung der Lösung erstellen, müssen möglicherweise separat gelöscht werden.

    Folgen Sie der Anleitung unter Über die Console bereitstellen, um diese Bereitstellungsmethode zu verwenden.

  • Terraform-Befehlszeile verwenden: Verwenden Sie diese Methode, wenn Sie die Lösung anpassen oder die Bereitstellung und Verwaltung der Ressourcen mithilfe von Infrastruktur als Code (IaC) automatisieren möchten. Laden Sie die Terraform-Konfiguration von GitHub herunter, passen Sie optional den Code nach Bedarf an und stellen Sie die Lösung mit der Terraform-Befehlszeile bereit. Nachdem Sie die Lösung bereitgestellt haben, können Sie sie mit Terraform verwalten.

    Folgen Sie der Anleitung unter Mit der Terraform CLI bereitstellen, um diese Bereitstellungsmethode zu verwenden.

Über die Console bereitstellen

Führen Sie die folgenden Schritte aus, um die vorkonfigurierte Lösung bereitzustellen.

  1. Wechseln Sie im Google Cloud-Katalog der Schnellstartlösungen zur Lösung Dynamische Webanwendung mit JavaScript.

    Zur Lösung "Dynamische Webanwendung mit JavaScript"

  2. Prüfen Sie die auf der Seite bereitgestellten Informationen, z. B. die geschätzten Kosten der Lösung und die geschätzte Bereitstellungszeit.

  3. Wenn Sie die Lösung bereitstellen möchten, klicken Sie auf Bereitstellen.

    Ein Schritt-für-Schritt-Konfigurationsbereich wird angezeigt.

  4. Führen Sie die Schritte im Konfigurationsbereich aus.

    Notieren Sie sich den Namen, den Sie für die Bereitstellung eingegeben haben. Sie benötigen diesen Namen später, wenn Sie die Bereitstellung löschen.

    Wenn Sie auf Bereitstellen klicken, wird die Seite Lösungsbereitstellungen angezeigt. Im Feld Status auf dieser Seite wird Wird bereitgestellt angezeigt.

  5. Warten Sie, bis die Lösung bereitgestellt wurde.

    Wenn die Bereitstellung fehlschlägt, wird im Feld Status der Eintrag Fehlgeschlagen angezeigt. Sie können das Cloud Build-Log verwenden, um die Fehler zu diagnostizieren. Weitere Informationen finden Sie unter Fehler bei der Bereitstellung über die Console.

    Wenn die Bereitstellung abgeschlossen ist, ändert sich das Feld Status in Bereitgestellt.

Wenn Sie die Lösung nicht mehr benötigen, können Sie die Bereitstellung löschen, um weitere Kosten für die Google Cloud-Ressourcen zu vermeiden. Weitere Informationen finden Sie unter Bereitstellung löschen.

Mit der Terraform-Befehlszeile bereitstellen

In diesem Abschnitt wird beschrieben, wie Sie die Lösung anpassen oder die Bereitstellung und Verwaltung der Lösung mit der Terraform CLI automatisieren können. Lösungen, die Sie mit der Terraform-Befehlszeile bereitstellen, werden auf der Seite Lösungsbereitstellungen in der Google Cloud Console nicht angezeigt.

Terraform-Client einrichten

Sie können Terraform entweder in Cloud Shell oder auf Ihrem lokalen Host ausführen. In dieser Anleitung wird beschrieben, wie Sie Terraform in Cloud Shell ausführen. Dort ist Terraform vorinstalliert und für die Authentifizierung bei Google Cloud konfiguriert.

Der Terraform-Code für diese Lösung ist in einem GitHub-Repository verfügbar.

  1. Klonen Sie das GitHub-Repository in Cloud Shell.

    In Cloud Shell öffnen

    Es wird eine Eingabeaufforderung angezeigt, um das Herunterladen des GitHub-Repositorys in Cloud Shell zu bestätigen.

  2. Klicken Sie auf Bestätigen.

    Cloud Shell wird in einem separaten Browser-Tab gestartet und der Terraform-Code wird in das Verzeichnis $HOME/cloudshell_open Ihrer Cloud Shell-Umgebung heruntergeladen.

  3. Prüfen Sie in Cloud Shell, ob das aktuelle Arbeitsverzeichnis $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra ist. Dies ist das Verzeichnis, das die Terraform-Konfigurationsdateien für die Lösung enthält. Wenn Sie in dieses Verzeichnis wechseln müssen, führen Sie den folgenden Befehl aus:

    cd $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra
    
  4. Initialisieren Sie Terraform mit dem folgenden Befehl:

    terraform init
    

    Warten Sie, bis folgende Meldung angezeigt wird:

    Terraform has been successfully initialized!
    

Terraform-Variablen konfigurieren

Der heruntergeladene Terraform-Code enthält Variablen, mit denen Sie die Bereitstellung entsprechend Ihren Anforderungen anpassen können. Sie können beispielsweise das Google Cloud-Projekt und die Region angeben, in der die Lösung bereitgestellt werden soll.

  1. Achten Sie darauf, dass das aktuelle Arbeitsverzeichnis $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra ist. Ist dies nicht der Fall, wechseln Sie zu diesem Verzeichnis.

  2. Erstellen Sie im selben Verzeichnis eine Textdatei mit dem Namen terraform.tfvars.

  3. Kopieren Sie in der Datei terraform.tfvars das folgende Code-Snippet und legen Sie Werte für die erforderlichen Variablen fest.

    • Folgen Sie den Anleitungen, die im Code-Snippet als Kommentare angegeben sind.
    • Dieses Code-Snippet enthält nur die Variablen, für die Sie Werte festlegen müssen. Die Terraform-Konfiguration enthält andere Variablen mit Standardwerten. Informationen zu allen Variablen und Standardwerten finden Sie in der Datei variables.tf im Verzeichnis $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra.
    • Achten Sie darauf, dass jeder in der Datei terraform.tfvars festgelegte Wert mit dem Typ der Variable übereinstimmt, wie in der Datei variables.tf angegeben. Beispiel: Wenn der Typ, der für eine Variable in der Datei variables.tf definiert wurde, bool ist, müssen Sie true oder false als Wert dieser Variable in der Datei terraform.tfvars angeben.
    # This is an example of the terraform.tfvars file.
    # The values in this file must match the variable types declared in variables.tf.
    # The values in this file override any defaults in variables.tf.
    
    # ID of the project in which you want to deploy the solution
    project_id = "PROJECT_ID"
    
    # Google Cloud region where you want to deploy the solution
    # Example: us-central1
    region = "REGION"
    
    # Google Cloud zone where you want to deploy the solution
    # Example: us-central1-a
    zone = "ZONE"
    

Weitere Informationen zu den Werten, die Sie den erforderlichen Variablen zuweisen können, finden Sie hier:

Terraform-Konfiguration validieren und prüfen

  1. Prüfen Sie, ob das aktuelle Arbeitsverzeichnis $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra ist. Ist dies nicht der Fall, wechseln Sie zu diesem Verzeichnis.

  2. Prüfen Sie, ob die Terraform-Konfiguration Fehler enthält:

    terraform validate
    

    Wenn der Befehl einen Fehler zurückgibt, nehmen Sie die erforderlichen Korrekturen in der Konfiguration vor und führen Sie den Befehl terraform validate noch einmal aus. Wiederholen Sie diesen Schritt, bis der Befehl die folgende Meldung zurückgibt:

    Success! The configuration is valid.
    
  3. Sehen Sie sich die Ressourcen an, die in der Konfiguration definiert sind:

    terraform plan
    
  4. Wenn Sie die Datei terraform.tfvars nicht wie zuvor beschrieben erstellt haben, werden Sie von Terraform zur Eingabe von Werten für die Variablen aufgefordert, die keine Standardwerte haben. Geben Sie die erforderlichen Werte ein.

    Die Ausgabe des Befehls terraform plan ist eine Liste der Ressourcen, die Terraform beim Anwenden der Konfiguration bereitstellt.

    Wenn Sie Änderungen vornehmen möchten, bearbeiten Sie die Konfiguration und führen Sie dann die Befehle terraform validate und terraform plan noch einmal aus.

Ressourcen bereitstellen

Wenn keine weiteren Änderungen an der Terraform-Konfiguration erforderlich sind, stellen Sie die Ressourcen bereit.

  1. Prüfen Sie, ob das aktuelle Arbeitsverzeichnis $HOME/cloudshell_open/terraform-dynamic-javascript-webapp/infra ist. Ist dies nicht der Fall, wechseln Sie zu diesem Verzeichnis.

  2. Wenden Sie die Terraform-Konfiguration an:

    terraform apply
    
  3. Wenn Sie die Datei terraform.tfvars nicht wie zuvor beschrieben erstellt haben, werden Sie von Terraform zur Eingabe von Werten für die Variablen aufgefordert, die keine Standardwerte haben. Geben Sie die erforderlichen Werte ein.

    Terraform zeigt eine Liste der Ressourcen an, die erstellt werden.

  4. Wenn Sie aufgefordert werden, die Aktionen auszuführen, geben Sie yes ein.

    In Terraform werden Nachrichten angezeigt, die den Fortschritt der Bereitstellung anzeigen.

    Wenn die Bereitstellung nicht abgeschlossen werden kann, zeigt Terraform die Fehler an, die den Fehler verursacht haben. Prüfen Sie die Fehlermeldungen und aktualisieren Sie die Konfiguration, um die Fehler zu beheben. Führen Sie den Befehl terraform apply dann noch einmal aus. Hilfe zur Fehlerbehebung bei Terraform-Fehlern finden Sie unter Fehler bei der Bereitstellung der Lösung mit der Terraform-Befehlszeile.

    Nachdem alle Ressourcen erstellt wurden, zeigt Terraform die folgende Meldung an:

    Apply complete!
    

Wenn Sie die Lösung nicht mehr benötigen, können Sie die Bereitstellung löschen, um weitere Kosten für die Google Cloud-Ressourcen zu vermeiden. Weitere Informationen finden Sie unter Bereitstellung löschen.

Bereitstellung untersuchen

Sie haben Ihre dynamische JavaScript-Beispielanwendung bereitgestellt. Ihre Lösungsbereitstellung besteht aus mehreren primären Diensten, die in ein einzelnes Google Cloud-Projekt eingebunden sind, darunter:

  • Eine in TypeScript geschriebene Frontend-Anwendung
  • Ein Cloud Run-Dienst, der die Frameworks