Google Cloud Kochbuch

Kapitel 4. Google App Engine

Diese Arbeit wurde mithilfe von KI übersetzt. Wir freuen uns über dein Feedback und deine Kommentare: [e-mail]

Google App Engine ist eine serverlose Compute-Lösung, mit der du deine Anwendungen ausführen kannst, ohne die zugrunde liegende Infrastruktur verwalten zu müssen. App Engine unterstützt eine Vielzahl von Programmiersprachen wie Node.js, Java, Ruby, C#, Go, Python und PHP; du kannst sogar eine nicht unterstützte Sprache verwenden, indem du Container einsetzt. App Engine hat zwei Editionen: Standard und Flexibel. Mit Flexible kannst du jede beliebige Bibliothek und jedes beliebige Framework in App Engine einbinden.

App Engine bietet dir unternehmenstaugliche Bereitstellungsfunktionen wie Anwendungsversionierung, Traffic-Splitting, Sicherheit, Überwachung und Debugging. Mit App Engine musst du dich nur noch auf deinen Code konzentrieren; Google Cloud verwaltet die zugrunde liegende Infrastruktur. In diesem Kapitel erfährst du, wie du deine Anwendung mit einer CI/CD-Pipeline bereitstellst, sie sicher machst, eine benutzerdefinierte Domain zuweist, ML-APIs nutzt und deine Anwendung debuggt.

Alle Codebeispiele für dieses Kapitel findest du im GitHub-Repository dieses Buches. Du kannst den Code für jedes Rezept kopieren, indem du den Ordner mit der Nummer des jeweiligen Rezepts aufrufst.

Du musst sicherstellen, dass du die Voraussetzungen erfüllt hast, bevor du die Rezepte durchgehst:

1. Du hast dich, wie in Kapitel 1 beschrieben, für ein Google Cloud-Konto angemeldet.

2. Erstelle ein Google Cloud-Projekt, wie in Kapitel 1 beschrieben.

3. Installiere und konfiguriere gcloud, wie in Kapitel 1 beschrieben.

4. Aktiviere die Cloud Functions und Cloud Build APIs.

   gcloud services enable cloudbuild.googleapis.com
   gcloud services enable \
      containerregistry.googleapis.com

4.1 Eine Hello World auf der App Engine bereitstellen (Standard)

Problem

Du möchtest deine erste App Engine Anwendung einsetzen, um ein einfaches Hello World auszuführen.

Lösung

Verwende die Google Cloud-Befehlszeile und deinen Lieblingseditor, um eine einfache Express.js-Anwendung zu erstellen, die auf App Engine läuft.

1. Erstelle auf deiner lokalen Arbeitsstation einen temporären Ordner, in dem die Dateien gespeichert werden, die du zum Erstellen der Hello World-Anwendung benötigst.

2. Erstelle in deiner Lieblings-IDE eine app.js-Datei im Stammverzeichnis des Verzeichnisses, das du in Schritt 1 erstellt hast, und kopiere den folgenden Code in diese Datei:

   'use strict';
   const express = require('express');
   const app = express();
   app.get('/', (req, res) => {
       res.status(200).send('Hello, world!').end();
   });
   const PORT = process.env.PORT || 8080;
   app.listen(PORT, () => {
       console.log(`App listening on port ${PORT}`);
       console.log('Press Ctrl+C to quit.');
   });
   module.exports = app;

3. Erstelle nun eine app.yaml-Datei im Stammverzeichnis desselben Verzeichnisses und kopiere den folgenden Code in die Datei. In der app.yaml-Datei werden die Einstellungen für deine Anwendung festgelegt, einschließlich der Laufzeit deines Codes.

   runtime: nodejs14

4. Erstelle nun eine package.json Datei im Stammverzeichnis des gleichen Verzeichnisses und kopiere den folgenden Code in die Datei:

   {
     "name": "appengine-hello-world",
     "engines": {
       "node": ">=14.0.0"
     },
     "scripts": {
       "start": "node app.js"
     },
     "dependencies": {
       "express": "^4.17.1"
     }
   }

5. Führe in deinem Terminal den folgenden Befehl im Stammverzeichnis aus, das du in Schritt 1 erstellt hast:

   npm install

6. Um die Anwendung auf der App Engine Standard einzusetzen, führe den folgenden Befehl aus:

   gcloud app deploy

7. Um deine eingesetzte Anwendung anzuzeigen, führe folgenden Befehl aus:

   gcloud app browse

Dadurch wird die Anwendung in deinem Standardbrowser geöffnet.

Diskussion

Du hast deine erste App-Engine-Anwendung mit Node.js erfolgreich implementiert. Es ist eine einfache "Hello World"-Anwendung, die aber einige der grundlegenden Konzepte für den Einsatz von App Engine-Diensten demonstriert. Um die Unterschiede zwischen App Engine Standard und Flexible zu überprüfen, springe zu Tabelle 4-1, die die Unterschiede auflistet.

4.2 Eine Hello World auf der App Engine bereitstellen (flexibel)

Problem

Du möchtest eine App-Engine-Anwendung einsetzen, die als Container läuft, um ein einfaches Hello World auszuführen.

Lösung

App Engine Flexible unterstützt die Ausführung von Docker-Containern, die benutzerdefinierte Laufzeiten oder anderen Quellcode enthalten können, der in einer anderen Programmiersprache geschrieben wurde. Da App Engine Flexible die Ausführung von Docker-Containern unterstützt, wirst du die Flexible Version von App Engine verwenden, um ein einfaches Hello World zu implementieren.

1. Erstelle auf deiner lokalen Arbeitsstation einen temporären Ordner, in dem die Dateien gespeichert werden, die du zum Erstellen der Hello World-Anwendung benötigst.

2. Erstelle in deiner Lieblings-IDE eine Dockerdatei im Stammverzeichnis des Verzeichnisses, das du in Schritt 1 erstellt hast, und kopiere den folgenden Code in die Datei:

   FROM nginx
   COPY nginx.conf /etc/nginx/nginx.conf
   RUN mkdir -p /var/log/app_engine
   RUN mkdir -p /usr/share/nginx/www/_ah && \
       echo "healthy" > /usr/share/nginx/www/_ah/health
   ADD www/ /usr/share/nginx/www/
   RUN chmod -R a+r /usr/share/nginx/www

   Hinweis

   Der FROM-Befehl erstellt ein Basisbild, das das offizielle NGINX-Docker-Image verwendet.

3. Erstelle eine neue Datei namens app.yaml im Stammverzeichnis deines temporären Verzeichnisses und gib den folgenden Code darin ein:

   runtime: custom
   env: flex

4. Erstelle nun eine neue Datei mit dem Namen nginx.conf, ebenfalls im Stammverzeichnis deines temporären Verzeichnisses, das du erstellt hast, und gib den folgenden Code darin ein:

   events {
       worker_connections 768;
   }
   
   http {
       sendfile on;
       tcp_nopush on;
       tcp_nodelay on;
       keepalive_timeout 65;
       types_hash_max_size 2048;
       include /etc/nginx/mime.types;
       default_type application/octet-stream;
       access_log /var/log/app_engine/app.log;
       error_log /var/log/app_engine/app.log;
       gzip on;
       gzip_disable "msie6";
       server {
           listen 8080;
           root /usr/share/nginx/www;
           index index.html index.htm;
       }
   }

5. Erstelle einen neuen Ordner namens www im Stammverzeichnis deines temporären Verzeichnisses.

6. Erstelle im Ordner www eine neue Datei mit dem Namen index.html und kopiere den folgenden Code hinein:

   <!doctype html>
   <html>
     <head>
       <title>Hello World!</title>
     </head>
     <body>
       <h1>Welcome to nginx!</h1>
       <p>Brought to you by Google App Engine.</p>
     </body>
   </html>

7. Führe den folgenden Befehl aus, um deine Anwendung auf der App Engine bereitzustellen:

   gcloud app deploy

8. Um deine eingesetzte Anwendung zu sehen, führe den folgenden Befehl aus:

   gcloud app browse

Dadurch wird die Anwendung in deinem Standardbrowser geöffnet.

Diskussion

Du hast eine statische Webanwendung, die auf einem NGINX Webserver läuft, erfolgreich als benutzerdefinierte Runtime auf App Engine Flexible bereitgestellt. App Engine Flexible ist die perfekte Wahl für Anwendungen, die:

• Du brauchst eine benutzerdefinierte Laufzeit.

• von Frameworks abhängen, die von App Engine Standard nicht unterstützt werden.

Tabelle 4-1 fasst die Unterschiede zwischen App Engine Standard und Flexible auf einer hohen Ebene zusammen.

Tabelle 4-1. Unterschiede zwischen App Engine Standard und Flexible

Feature	Standardumgebung	Flexible Umgebung
Startzeit der Instanz	Sekunden	Protokoll
SSH-Debugging	Nein	Ja
Skalierung	Manuell, einfach, automatisch	Manuell, automatisch
Auf Null skalieren	Ja	Nein, mindestens 1 Instanz
Ändern der Laufzeit	Nein	Ja (über Dockerfile)
Bereitstellungszeit	Sekunden	Protokoll
WebSockets	Nein	Ja
Unterstützt die Installation von Drittanbieter-Binärdateien	Ja	Ja

4.3 Sichern deiner Anwendung mit identitätsbewusstem Proxy

Problem

Du hast deine Hello World-Anwendung auf der App Engine Flexible installiert und möchtest, dass nur bestimmte Nutzer darauf zugreifen können.

Lösung

Nutze den Google Cloud Identity-Aware Proxy (IAP), um den Zugang auf eine Reihe von vordefinierten Nutzern zu beschränken. IAP bietet eine zentrale Kontrollstelle für die Verwaltung des Nutzerzugangs zu deinen Anwendungen. Wir werden die in Rezept 4.1 erstellte Cloud Hello World-Anwendung verwenden, um sie mit IAP zu sichern.

1. Rufe die IAP-Seite in der Google Cloud Console auf, wie in Abbildung 4-1 dargestellt.

   Hinweis

   Wenn du deinen OAuth-Zustimmungsbildschirm nicht konfiguriert hast, musst du ihn konfigurieren, bevor du fortfährst.

2. Wähle die Ressource aus, die du sichern willst, indem du das Kästchen links daneben anklickst.

3. Klicke auf der rechten Seite auf Mitglied hinzufügen.

   

   Abbildung 4-1. Identity-Aware Proxy Konfiguration

4. Füge die E-Mail-Adressen von Gruppen oder Einzelpersonen hinzu, denen du Zugriff auf deine App Engine Anwendung gewähren möchtest. Das IAP Identity and Access Management (IAM) unterstützt die folgenden Konten:

   • Google-Konto

   • Google-Gruppe

   • Servicekonto

   • G Suite Domäne

5. Wenn du alle Konten hinzugefügt hast, die du für den Zugriff auf deine Anwendung verwenden möchtest, klicke auf Hinzufügen.

6. Suche auf der IAP-Seite unter HTTPS-Ressourcen die App-Engine-App, auf die du den Zugriff beschränken möchtest, und schalte den Schalter in der IAP-Spalte an/aus; siehe Abbildung 4-2.

   

   Abbildung 4-2. Identity-Aware Proxy aktivieren

7. Rufe die URL für deine App Engine Anwendung auf. Du solltest zur Eingabeaufforderung aufgefordert werden, dich anzumelden. Wenn du keine Eingabeaufforderung erhältst, versuche, dich in einem Inkognito-Fenster anzumelden.

8. Wenn du ein Benutzerkonto autorisiert hast und sie sich mit dem zugehörigen Konto anmelden, haben sie vollen Zugriff auf deine Anwendung, die auf App Engine läuft.

9. Wenn du keinen Zugang zu einem Konto gewährt hast und sie versuchen, auf deine Anwendung zuzugreifen, erhalten sie die Meldung "Sie haben keinen Zugang".

Diskussion

Mit dem Google Cloud Identity-Aware Proxy kannst du den Zugriff auf deine Anwendung, die auf der App Engine läuft, einschränken und so verhindern, dass Unbefugte auf deine Ressourcen zugreifen. Der Identity-Aware Proxy unterstützt auch externe Identitäten wie Google, Microsoft, Email/Password und andere, die deinen Nutzern eine Vielzahl von Anmeldemöglichkeiten für den Zugriff auf deine Anwendung bieten(Abbildung 4-3).

Abbildung 4-3. Identitätsbewusster Proxy Anbieter

4.4 Zuordnung von benutzerdefinierten Domänen mit App Engine

Problem

Du möchtest deine eigene benutzerdefinierte Domain verwenden und nicht die Standardadresse, die App Engine für dich bereitstellt.

Lösung

Google Cloud bietet die Möglichkeit, eigene Domains zuzuordnen. Sie kann auch ein verwaltetes Zertifikat für SSL für HTTPS-Verbindungen ausstellen. Du verwendest die in Rezept 4.1 erstellte Cloud-Anwendung Hello World, um deine benutzerdefinierte Domain zu aktivieren.

Hinweis

Für dieses Rezept benötigst du eine eigene Domain.

1. In der Google Cloud Console gehst du zu App Engine > Einstellungen > Benutzerdefinierte Domains.

2. Klicke auf Eine benutzerdefinierte Domäne hinzufügen.

3. Wenn dein Domainname verifiziert wurde, wird er im Dropdown-Menü angezeigt. Wähle die Domain aus dem Dropdown-Menü aus und klicke auf Weiter.

   Wenn du deinen Domainnamen noch nicht auf verifiziert hast, befolge diese Schritte, um ihn zu verifizieren:

   1. Wähle im Dropdown-Menü die Option Eine neue Domäne verifizieren.

   2. Gib deinen Domainnamen ein und klicke auf Überprüfen.

   3. Gib die erforderlichen Informationen auf der Webmaster-Seite ein.

   4. Nachdem du diese Schritte auf der Webmaster-Seite abgeschlossen hast, kehrst du zur Seite "Neue benutzerdefinierte Domain hinzufügen" in der Google Cloud Console zurück.

4. Füge im Abschnitt "Zeigen Sie Ihre Domain auf" die Domain oder Subdomain hinzu, die du zuordnen möchtest. Klicke auf Zuordnungen speichern, wie in Abbildung 4-4 dargestellt.

   

   Abbildung 4-4. Domänenzuordnung

5. Klicke auf Weiter, um die DNS-Einträge deiner Domain zu sehen.

6. Melde dich auf der Website deines Domain-Registrars an und aktualisiere deine DNS-Einträge mit den angezeigten Einträgen.

7. Teste, indem du deinen Webbrowser zu deiner neu zugeordneten Domain öffnest.

   Hinweis

   Es kann einige Minuten dauern, bis das SSL-Zertifikat ausgestellt ist.

Diskussion

Wenn du eine benutzerdefinierte Domain zuordnest, kannst du deine App-Engine-Anwendung an dein Branding anpassen und gleichzeitig eine sichere Website einrichten, da Google Cloud ein SSL-Zertifikat für deine zugeordnete Domain bereitstellt. Von Google Cloud verwaltete Zertifikate unterstützen keine Wildcard-Domains; wenn du Wildcard-Domains benötigst, musst du selbst verwaltete Zertifikate verwenden.

4.5 Verwendung der Google Cloud Translation Machine Learning APIs mit App Engine

Problem

Du musst eine Echtzeit-Übersetzungsanwendung für Sprache entwickeln.

Lösung

Google Cloud bietet eine Medienübersetzungs-API, die deine Anwendungen um Audioübersetzung in Echtzeit ergänzt. In diesem Rezept erstellst du zwei Anwendungen, eine Broadcast-Anwendung und eine Client-Anwendung, wobei du App Engine als Host für deine Anwendung verwendest.

Abbildung 4-5 zeigt eine Übersicht über die Architektur der Anwendung, die du einführen wirst.

Abbildung 4-5. Architektur der Übersetzungsanwendung

Abbildung 4-6 ist die Broadcast-Anwendung, die der Moderator verwendet.

Abbildung 4-6. Broadcast-Anwendung

Abbildung 4-7 ist die Client-Anwendung, in der die Benutzer die Übersetzungsunterschriften sehen können.

Abbildung 4-7. Client-Anwendung

Für dieses Rezept musst du den Befehl git clone für das Codebeispiel-Repository dieses Buches verwenden.

1. In der geklonten Anwendung gehst du zu 04-appengine/4-5-media.

2. Bearbeite in deiner IDE die Datei client/client.js und ersetze [PROJECT_ID] durch dein Google Cloud-Projekt:

   const socket = io.connect('https://[YOUR_PROJECT_ID].uc.r.appspot.com');

3. Wiederhole den Vorgang aus Schritt 2, aber bearbeite die Datei broadcast/client.js.

4. Aktiviere die Media Translation API in der Google Cloud Console.

5. Stelle deine App Engine Anwendung bereit, indem du den gcloud app deploy Befehl ausführt. In der Datei app.js im Stammverzeichnis findest du die folgenden Expres.js-Routen deklariert. Der Client-Pfad ist für die Nutzer, die die Übersetzungen von der sendenden Person lesen. Die sendende Person würde das Stammverzeichnis der App-Engine-Anwendung besuchen:

   app.use('/', express.static('broadcast'))
   app.use('/client', express.static('client'))

6. Sobald deine Anwendung bereitgestellt ist, besuche den Root-Pfad und öffne einen neuen Tab mit dem Pfad /client.

7. In der Broadcast-Anwendung klickst du auf Übersetzen starten und fängst an, auf Englisch zu sprechen; beobachte die Übersetzung auf der zweiten Registerkarte. Die Übersetzung erfolgt vom Englischen ins Portugiesische.

8. Du kannst die Sprachen in der app.js-Datei in den Zeilen 29 und 30 ändern:

     const sourceLanguage = 'en-US';
     const targetLanguage = 'pt-BR';

Diskussion

In diesem Rezept hast du ein bestehendes Repository verwendet, um eine Übersetzungsanwendung in der App Engine bereitzustellen. Diese Anwendung nutzt Express.js, WebSockets und die Media Translation API, um Echtzeit-Audio in die Sprache zu übersetzen, die du im Code definierst. Da wir WebSockets verwenden, haben wir App Engine Flexible benutzt, da Standard WebSockets nicht unterstützt. WebSockets ermöglichten die Echtzeitkommunikation zwischen dem Sender und Nutzern.

4.6 Erstellen von Benutzeroberflächen für die Anzeige von Diagrammen und Graphen

Problem

Du verwendest BigQuery als Data Warehouse für dein Unternehmen und brauchst eine sichere Methode, um Diagramme/Grafiken für die Benutzer anzuzeigen.

Lösung

Verwende App Engine zusammen mit Cube.js, BigQuery und App Engine, um eine Benutzeroberfläche(Abbildung 4-8) für die Anzeige von Diagrammen und Grafiken aus deinem BigQuery-Datensatz zu erstellen. BigQuery ist ein vollständig verwaltetes, serverloses Data Warehouse.

Hinweis

Du verwendest Cube.js, eine Open-Source-Plattform für analytische APIs.

Außerdem lernst du, wie du React.js in der App Engine einsetzen kannst, da die Benutzer-Dashboards mit dem React.js-Framework laufen werden.

Abbildung 4-8. Cube.js läuft auf App Engine

1. Erstelle auf deinem lokalen Arbeitsplatz einen temporären Ordner, in dem die Dateien gespeichert werden, die du für die Erstellung der App Engine Benutzer-Dashboards benötigst.

2. Führe in deinem temporären Ordner mit dem Cube.js CLI den npx cubejs-cli create real-time-dashboard -d bigquery Befehl aus, um eine neue Cube.js-Anwendung für BigQuery zu erstellen.

3. Du brauchst Zugangsdaten, um auf BigQuery zuzugreifen. Erstelle in der Google Cloud Console ein neues Servicekonto. Füge diesem Servicekonto die Rollen BigQuery Data Viewer und BigQuery Job User hinzu und erstelle dann eine neue JSON-Schlüsseldatei. Kopiere den JSON-Schlüssel in das Stammverzeichnis des Echtzeit-Dashboard-Ordners.

4. Bearbeite in deiner IDE die Datei real-time-dashboard/.env, um dein Google Cloud-Projekt und den Speicherort deiner Schlüsseldatei aufzunehmen:

   CUBEJS_DB_BQ_PROJECT_ID=example-google-project
   CUBEJS_DB_BQ_KEY_FILE=./examples.json
   CUBEJS_DB_TYPE=bigquery
   CUBEJS_API_SECRET=SECRET

5. Cube.js verwendet ein Datenschema, um SQL-Code zu erzeugen. Du wirst mit dem öffentlichen BigQuery-Datensatz von Hacker News arbeiten. Erstelle eine Datei namens Stories.js im Ordner real-time-dashboard/schema mit dem folgenden Code:

   cube(`Stories`, {
       sql: `
         SELECT *
         FROM bigquery-public-data.hacker_news.full
         WHERE type = "story" AND STARTS_WITH(UPPER(url), "HTTP")
       `,
   
       measures: {
         count: {
           type: `count`,
         },
       },
   
       dimensions: {
         protocol: {
           sql: `UPPER(REGEXP_EXTRACT(${CUBE}.url, r"^([a-zA-Z]+):"))`,
           type: `string`,
         },
   
         time: {
           sql: `timestamp`,
           type: `time`,
         },
       },
     });

6. Führe nun ein Echtzeit-Dashboard lokal aus, um zu testen und zu überprüfen, ob es wie erwartet funktioniert. Führe unter den npm run dev Befehl im Ordner " real-time-dashboard" aus.

7. Rufe in deinem Browser http://localhost:4000 auf , um Cube.js Playground zu starten, wie in Abbildung 4-9 gezeigt.

   

   Abbildung 4-9. Cube.js läuft lokal

8. Um zu prüfen, ob eine Verbindung zu BigQuery besteht, klickst du auf "Messen" und wählst "Geschichten zählen", wie in Abbildung 4-10 dargestellt.

   

   Abbildung 4-10. Cube.js-Verbindung zu BigQuery

9. Dieser Dienst wird zu einer API, die auf der App Engine läuft. Das Benutzer-Dashboard verbindet sich mit der Cube.js-API, um die benötigten Daten abzurufen und sie für den Benutzer zu visualisieren.

10. Um das Dashboard zu erstellen, klicke auf die Dashboard App im Cube.js Playground.

11. Sobald sie installiert ist, suchst du den Ordner in deiner IDE; er befindet sich unter real-time-dashboard/dashboard-app.

12. Bearbeite in deiner IDE die Datei src/pages/DashboardPage.js, um die folgende Zeile zu ersetzen:

        const DashboardItems = []

    mit:

    const DashboardItems = [
      {
        id: 0,
        name: "Orders Status by Customers City",
        vizState: {
          query: {
            "measures": [
              "Stories.count"
            ],
            "timeDimensions": [],
            "order": {
              "Stories.count": "desc"
            },
            "dimensions": [
              "Stories.protocol"
            ]
          },
          chartType: "pie",
        }
      },
      {
        id: 1,
        name: "Orders Status by Customers City",
        vizState: {
          query:   {
            "measures": [
              "Stories.count"
            ],
            "timeDimensions": [
              {
                "dimension": "Stories.time",
                "granularity": "year"
              }
            ],
            "order": {},
            "dimensions": []
          },
          chartType: "line",
        }
      },
    ];

13. Bearbeite in deiner IDE src/components/ChartRenderer.js und füge Folgendes hinzu:

     const ChartRenderer = ({
    -   vizState
    +   vizState, cubejsApi
    -   const renderProps = useCubeQuery(query);
    +   const renderProps = useCubeQuery(query, { subscribe: true, cubejsApi });

    Hinweis

    Entferne die Zeilen in CharRenderer.js, die mit einem Subtraktionssymbol (-) gekennzeichnet sind, und füge die Zeilen hinzu, die mit einem Additionssymbol (+) gekennzeichnet sind.

    Um mehr über Cube.js und React zu erfahren, besuche bitte die Online-Referenz.

14. Erstelle eine app.yaml-Datei in real-time-dashboard/dashboard-app mit dem folgenden Code:

    runtime: nodejs14
    handlers:
    - url: /(.*\..+)$
      static_files: build/\1
      upload: build/(.*\..+)$
    - url: /.*
      static_files: build/index.html
      upload: build/index.html

15. Mit dieser Konfiguration kann App Engine den optimierten React.js-Build bereitstellen. Wenn du Änderungen vornimmst, musst du immer einen npm-Run-Build ausführen, bevor du deine neue Version auf App Engine bereitstellst.

16. Führe die folgenden Befehle aus, um das Dashboard in der App Engine einzusetzen:

    npm run build
        gcloud app deploy

17. Nachdem die Anwendung erfolgreich bereitgestellt wurde, führt den gcloud app browse Befehl aus, um die Anwendung in deinem Browser anzuzeigen.

18. Kopiere die URL deiner bereitgestellten Dashboard-App und bearbeite die Datei real-time-dashboard/dashboard-app/App.js, um die Variable const API_URL durch deine zu ersetzen. Sie sollte wie folgt aussehen:

    const API_URL = "https://ruicosta-blog.uc.r.appspot.com";

19. Mach weiter und setz dich um:

    npm run build
        gcloud app deploy

20. Jetzt ist das Dashboard bereit, sich mit der Cube.js API zu verbinden, die du gerade in der App.js Datei aktualisiert hast. Jetzt ist es an der Zeit, die API in der App Engine bereitzustellen.

21. Erstelle ein Dockerfile im Ordner " real-time-dashboard" mit dem folgenden Code:

    FROM cubejs/cube:latest
    
    COPY . .

22. Erstelle eine app.yaml-Datei im Ordner real-time-dashboard mit dem folgenden Code:

    runtime: custom
    env: flex
    service: api

23. Da Cube.js WebSockets verwendet und App Engine Standard keine WebSockets unterstützt, müssen wir eine benutzerdefinierte Laufzeit verwenden, also wirst du Flexible für die API verwenden.

24. Aktualisiere den Inhalt der Datei cube.js im Stammverzeichnis des Echtzeit-Dashboard-Ordners mit folgendem Text:

    module.exports = {
        processSubscriptionsInterval: 1,
        orchestratorOptions: {
          queryCacheOptions: {
            refreshKeyRenewalThreshold: 1,
          }
        },
      };

25. Aktualisiere den Inhalt der .env-Datei, die sich im Stammverzeichnis des Echtzeit-Dashboard-Ordners befindet, mit dem folgenden Eintrag: CUBEJS_WEB_SOCKETS=true.

26. Erstelle eine neue Datei namens dispatch.yaml im Stammverzeichnis des Echtzeit-Dashboard-Ordners:

      - url: "*/cubejs-api*"
        service: api

    Die Datei dispatch.yaml ermöglicht es dir, Routing-Regeln außer Kraft zu setzen, und erlaubt deiner Dashboard-Anwendung, über die Haupt-URL des Dashboards auf die API zuzugreifen, um keine Probleme mit CORS zu verursachen.

27. Jetzt kannst du die API bereitstellen und die Nutzer über das Dashboard auf die Daten zugreifen lassen. Im Stammverzeichnis des Echtzeit-Dashboards führst du den gcloud app deploy Befehl aus, um die API bereitzustellen.

28. Sobald dies abgeschlossen ist, verteilen Sie die Versandregeln, indem Sie gcloud app deploy dispatch.yaml.

29. Wenn du jetzt die URL des Dashboards aufrufst, solltest du sehen, was in Abbildung 4-11 dargestellt ist.

    

    Abbildung 4-11. Cube.js läuft auf App Engine

30. Vergiss nicht, deine Anwendung durch die Aktivierung von IAP zu sichern.

Diskussion

In diesem Rezept hast du die Cube.js API, ein Benutzer-Dashboard, das auf dem React.js Framework läuft, in der App Engine implementiert und Routen mit Dispatch-Regeln erstellt, um ein interaktives Echtzeit-Dashboard für Benutzer zu erstellen.

Bei diesem Rezept gibt es viele bewegliche Teile, aber die wichtigsten Erkenntnisse sind:

• App Engine Standard unterstützt keine WebSockets, also hast du App Engine Flexible verwendet, weil die Cube.js API auf WebSockets angewiesen ist.

• App Engine ist sehr flexibel; mit benutzerdefinierten Laufzeiten sind die Möglichkeiten, deine Anwendung auf App Engine laufen zu lassen, endlos.

4.7 Eine Instanz debuggen

Problem

du ein Problem mit deiner Anwendung bemerkst und eine Möglichkeit brauchst, auf die Logs zuzugreifen, um sie zu debuggen.

Lösung

Mit App Engine Flexible aktivierst du den Debug-Modus. Wenn das Debugging aktiviert ist, kannst du auf die VM zugreifen, um die Protokolldateien deiner benutzerdefinierten Laufzeit einzusehen.

1. Um den Debug-Modus zu aktivieren, führe den Befehl gcloud app --project PROJECT_ID aus.

2. Du erhältst eine Eingabeaufforderung mit den Instanzen, die für das Debugging zur Verfügung stehen. Wähle eine aus.

3. In der Google Cloud Console wählst du App Engine > Instances.

4. Du solltest in der von dir gewählten Instanz feststellen, dass der Debug-Modus(Abbildung 4-12) jetzt aktiviert ist.

   

   Abbildung 4-12. App Engine Debug-Modus aktiviert

5. Klicke auf die Schaltfläche SSH, um dich mit der Instanz zu verbinden.

6. Zu diesem Zeitpunkt bist du mit dem Instance-Host verbunden, auf dem mehrere Container laufen.

   Hinweis

   Zusätzlich zu deinem Container, der auf der App Engine Flexible läuft, hast du noch drei weitere Container:

   • Fluentd Logging agent

   • Memcache Proxy Agent

   • NGINX-Proxy

7. Führe aus sudo docker ps um die laufenden Container aufzulisten.

8. Die Ausgabe des Befehls sudo docker ps listet jeden Container auf; suche die Zeile, die deine Projekt-ID enthält, und notiere den NAMEN dieses Containers.

9. Um die Protokolle anzusehen, führt den sudo docker logs [CONTAINER-NAME] Befehl aus.

10. So kannst du die Logs deiner Anwendung zu Debugging-Zwecken einsehen.

11. Du kannst dich auch mit der Instanz verbinden, indem du sudo docker exec -it CONTAINER_NAME /bin/bash ausführst.

12. Wenn du fertig bist, vergiss nicht das Debugging zu deaktivieren, indem du den Befehl gcloud app --project PROJECT_ID instances disable-debug ausführst.

Diskussion

Durch die Möglichkeit, sich mit einer Instanz und ihren Containern zu verbinden, kannst du deine Anwendung, die auf App Engine Flexible läuft, debuggen.

4.8 CI/CD verwenden

Problem

Du brauchst eine Methode, um die Bereitstellung deiner Anwendung auf der App Engine bei jeder Änderung des Quellcodes zu automatisieren.

Lösung

Nutze GitLab CI/CD, ein Tool, mit dem du kontinuierliche Integration (CI), kontinuierliche Bereitstellung (CD) und kontinuierliches Deployment (auch CD) auf deine Anwendung anwenden kannst.

1. Erstelle ein neues GitLab-Projekt und klone das neue Repository auf deinen lokalen Rechner.

2. Erstelle die Hello World-Anwendung aus Rezept 4.1, aber setze sie nicht in der App Engine ein.

3. Erstelle im Stammverzeichnis eine GitLab CI/CD-Datei namens.gitlab-ci.yml mit dem folgenden Inhalt:

       image: google/cloud-sdk:slim
   deploy:
       stage: deploy
       environment: Production
       only:
           -  master
       script:
           - gcloud auth activate-service-account --key-file $GOOGLE_SERVICE_ACCOUNT_FILE
           - gcloud app deploy app.yaml --quiet --project $GOOGLE_PROJECT_ID --version 1

4. In der Google Cloud Console gehst du zu Identität > Servicekonten.

5. Klicke auf Servicekonto erstellen.

6. Gib einen Namen und eine Beschreibung ein und klicke dann auf Erstellen.

7. Wähle die Rolle Editor und klicke auf Weiter.

8. Wähle das gerade erstellte Dienstkonto aus und klicke in den Optionen auf Schlüssel im JSON-Format erstellen. Lade den Schlüssel auf deinen lokalen Arbeitsplatz herunter.

9. Gehe in der GitLab-Konsole innerhalb deines Projekts zu Einstellungen > CI/CD.

10. Erweitere den Abschnitt "Variablen".

11. Erstelle eine neue Variable.

12. Ändere den Typ der Variable in Datei. Der Schlüssel heißt GOOGLE_SERVICE_ACCOUNT_FILE, und der Wert ist der Inhalt der Datei, die zuvor heruntergeladen wurde.

13. Erstelle eine weitere Variable mit dem Namen GOOGLE_PROJECT_ID, deren Wert die ID des Google Cloud-Projekts sein wird.

14. Übertrage deinen Code und stelle deine Anwendung in der App Engine bereit. Übertrage deine Änderungen außerdem in dein GitLab-Repository.

15. Öffne in der GitLab-Konsole die Seite GitLab CI/CD. Du wirst feststellen, dass deine Pipeline läuft.

16. Wenn du auf die Pipeline klickst, siehst du die Verteilungsschritte; beachte Job Succeeded.

Diskussion

Die kontinuierlichen Methoden der Softwareentwicklung basieren auf der Automatisierung der Tests und der Bereitstellung deines Quellcodes, um die Wahrscheinlichkeit von Fehlern zu minimieren. GitLab CI/CD bietet eine Reihe von Tools, darunter auch die in diesem Rezept verwendete Methode der kontinuierlichen Bereitstellung. Anstatt deine Anwendung manuell bereitzustellen, kann sie nun automatisch auf Google Cloud App Engine bereitgestellt werden.