Node.js-Genkit-Webanwendung mit generativer KI automatisch aus der Versionskontrolle in Cloud Run bereitstellen

1. Übersicht

Die erstmalige Bereitstellung einer Webanwendung kann schwierig sein. Auch nach der ersten Bereitstellung kann es sein, dass Sie die Bereitstellung neuer Versionen Ihrer Anwendung vermeiden, wenn der Prozess zu aufwendig ist. Mit Continuous Deployment können Sie Änderungen an Ihrer Anwendung ganz einfach automatisch bereitstellen.

In diesem Lab schreiben Sie eine Webanwendung und konfigurieren Cloud Run so, dass Ihre Anwendung automatisch bereitgestellt wird, wenn eine Änderung am Quellcode Ihrer Anwendung vorgenommen wird. Anschließend ändern Sie Ihre Anwendung und stellen sie noch einmal bereit.

Lerninhalte

• Webanwendung mit dem Cloud Shell-Editor schreiben
• Anwendungscode in GitHub speichern
• Anwendung automatisch in Cloud Run bereitstellen

• Generative KI mit Genkit in Ihre Anwendung einbinden
• LLM-Prompts mit der dotprompt-Bibliothek verwalten

2. Vorbereitung

1. Wenn Sie noch kein Google-Konto haben, müssen Sie ein Google-Konto erstellen.
   • Verwenden Sie stattdessen ein privates Konto. Bei Arbeitskonten und Konten von Bildungseinrichtungen kann es Einschränkungen geben, die verhindern, dass Sie die für dieses Lab erforderlichen APIs aktivieren.
2. Wenn Sie noch kein GitHub-Konto haben, müssen Sie ein GitHub-Konto erstellen.
   • Verwenden Sie ein vorhandenes GitHub-Konto, falls Sie eines haben. Es ist wahrscheinlicher, dass GitHub ein neues Konto als Spam blockiert.
   • Konfigurieren Sie die 2-Faktor-Authentifizierung für Ihr GitHub-Konto, um die Wahrscheinlichkeit zu verringern, dass Ihr Konto als Spam markiert wird.

3. Projekt einrichten

1. Melden Sie sich in der Google Cloud Console an.
2. Aktivieren Sie die Abrechnung in der Cloud Console.
   • Die Kosten für Cloud-Ressourcen für dieses Lab sollten weniger als 1 $betragen.
   • Sie können die Schritte am Ende dieses Labs ausführen, um Ressourcen zu löschen und so weitere Kosten zu vermeiden.
   • Neuen Nutzern steht die kostenlose Testversion mit einem Guthaben von 300$ zur Verfügung.
   • Sie nehmen an einem Gen AI for Devs-Event teil? Möglicherweise ist eine Gutschrift in Höhe von 1$ verfügbar.
3. Erstellen Sie ein neues Projekt oder verwenden Sie ein vorhandenes Projekt wieder.
4. Prüfen Sie in der Cloud-Abrechnung unter Meine Projekte 
   , ob die Abrechnung aktiviert ist.
   • Wenn in der Spalte Billing account Ihres neuen Projekts Billing is disabled steht:
     1. Klicken Sie in der Spalte Actions auf die drei Punkte.
     2. Klicken Sie auf Abrechnung ändern.
     3. Wählen Sie das gewünschte Rechnungskonto aus.
   • Wenn Sie an einer Veranstaltung zum Thema „Generative KI für Entwickler“ teilnehmen, heißt das Konto wahrscheinlich Google Cloud Platform-Testrechnungskonto.

4. Cloud Shell-Editor öffnen

1. Cloud Shell-Editor aufrufen
2. Wenn das Terminal nicht unten auf dem Bildschirm angezeigt wird, öffnen Sie es:
   • Klicken Sie auf das Dreistrich-Menü .
   • Klicken Sie auf Terminal.
   • Klicken Sie auf Neues Terminal.
3. Legen Sie im Terminal Ihr Projekt mit diesem Befehl fest:
   • Format:

     gcloud config set project [PROJECT_ID]
     

   • Beispiel:

     gcloud config set project lab-project-id-example
     

   • Wenn Sie sich nicht an Ihre Projekt-ID erinnern können,
     • Sie können alle Ihre Projekt-IDs mit folgendem Befehl auflisten:

       gcloud projects list | awk '/PROJECT_ID/{print $2}'
       

     
4. Wenn Sie zur Autorisierung aufgefordert werden, klicken Sie auf Autorisieren, um fortzufahren.
5. Es sollte folgende Meldung angezeigt werden:

   Updated property [core/project].
   

   Wenn Sie WARNING sehen und Do you want to continue (Y/N)? gefragt werden, haben Sie die Projekt-ID wahrscheinlich falsch eingegeben. Drücken Sie N, dann Enter und versuchen Sie, den Befehl gcloud config set project noch einmal auszuführen.

5. APIs aktivieren

Aktivieren Sie die APIs im Terminal:

gcloud services enable \
  run.googleapis.com \
  cloudbuild.googleapis.com \
  aiplatform.googleapis.com

Es kann einige Minuten dauern, bis dieser Befehl ausgeführt wird. Wenn die Ausführung erfolgreich war, erhalten Sie eine Meldung, die ungefähr so aussieht:

Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.

6. Git konfigurieren

1. Legen Sie Ihre globale Git-Nutzer-E-Mail-Adresse fest:

   git config --global user.email "[e-mail]"
   

2. Legen Sie Ihren globalen Git-Nutzernamen fest:

   git config --global user.name "Your Name"
   

3. Legen Sie den globalen Git-Standardzweig auf main fest:

   git config --global init.defaultBranch main
   

7. Code schreiben

So schreiben Sie eine Anwendung in Node.js:

1. Rufen Sie das Basisverzeichnis auf:

   cd ~
   

2. Erstellen Sie das Verzeichnis codelab-genai:

   mkdir codelab-genai
   

3. Rufen Sie das Verzeichnis codelab-genai auf:

   cd codelab-genai
   

4. index.js-Datei erstellen:

   touch index.js
   

5. Erstellen Sie die Datei package.json.

   npm init es6 -y
   

6. express als Abhängigkeit hinzufügen

   npm install express
   

7. Fügen Sie die Datei .gitignore hinzu, um das Committen von node_modules zu verhindern.

   echo node_modules/ >> .gitignore
   

8. Öffnen Sie die Datei index.js im Cloud Shell-Editor:

   cloudshell edit index.js
   

   Oben auf dem Bildschirm sollte jetzt eine leere Datei angezeigt werden. Hier können Sie die Datei index.js bearbeiten.
9. Kopieren Sie den folgenden Code und fügen Sie ihn in die geöffnete Datei index.js ein:

   import express from 'express';
   
   const app = express();
   app.get('/', async (req, res) => {
       res.send('Hello world!');
   });
   
   const port = process.env.PORT || 8080;
   app.listen(port, () => {
       console.log(`codelab-genai: listening on port ${port}`);
   });
   

   Nach einigen Sekunden wird Ihr Code automatisch im Cloud Shell-Editor gespeichert. Dieser Code antwortet auf HTTP-Anfragen mit der Begrüßung „Hello World!“.

Der erste Code für Ihre Anwendung ist fertig und kann in der Versionsverwaltung gespeichert werden.

8. Repository erstellen

1. Kehren Sie zum Cloud Shell-Terminal unten auf dem Bildschirm zurück.
2. Prüfen Sie, ob Sie sich noch im richtigen Verzeichnis befinden:

   cd ~/codelab-genai
   

3. Git-Repository initialisieren

   git init -b main
   

4. Bei der GitHub CLI anmelden

   gh auth login
   

   Drücken Sie Enter, um die Standardoptionen zu übernehmen, und folgen Sie der Anleitung im GitHub-CLI-Tool, einschließlich:
   1. In welchem Konto möchten Sie sich anmelden? GitHub.com
   2. Welches Protokoll bevorzugen Sie für Git-Vorgänge auf diesem Host? HTTPS
   3. Git mit Ihren GitHub-Anmeldedaten authentifizieren? Y (Überspringen Sie diesen Schritt, wenn diese Option nicht angezeigt wird.)
   4. Wie möchten Sie die GitHub CLI authentifizieren? Login with a web browser
   5. Einmalcode kopieren
   6. Öffnen Sie https://github.com/login/device.
   7. Einmal verwendbaren Code einfügen
   8. Klicken Sie auf GitHub autorisieren.
   9. Anmeldung abschließen
5. Prüfen Sie, ob Sie angemeldet sind:

   gh api user -q ".login"
   

   Wenn Sie sich erfolgreich angemeldet haben, sollte Ihr GitHub-Nutzername ausgegeben werden.
6. GITHUB_USERNAME-Variable erstellen

   GITHUB_USERNAME=$(gh api user -q ".login")
   

7. Prüfen Sie, ob Sie die Umgebungsvariable erstellt haben:

   echo ${GITHUB_USERNAME}
   

   Wenn Sie die Variable erfolgreich erstellt haben, sollte Ihr GitHub-Nutzername ausgegeben werden.
8. Erstellen Sie ein leeres GitHub-Repository mit dem Namen codelab-genai:

   gh repo create codelab-genai --private
   

   Wenn Sie den Fehler erhalten:

   GraphQL: Name already exists on this account (createRepository)
   

   Dann haben Sie bereits ein Repository mit dem Namen codelab-genai. Sie haben zwei Möglichkeiten, dieser Anleitung zu folgen:
   • Vorhandenes GitHub-Repository löschen
   • Erstellen Sie ein Repository mit einem anderen Namen und denken Sie daran, den Namen in den folgenden Befehlen zu ändern.
9. Fügen Sie das Repository codelab-genai als Remote-Repository origin hinzu:

   git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai
   

9. Code teilen

1. Prüfen Sie, ob Sie sich im richtigen Verzeichnis befinden:

   cd ~/codelab-genai
   

2. Fügen Sie diesem Commit alle Dateien im aktuellen Verzeichnis hinzu:

   git add .
   

3. Ersten Commit erstellen:

   git commit -m "add http server"
   

4. Übertragen Sie Ihr Commit per Push an den main-Branch des origin-Repositorys:

   git push -u origin main
   

Sie können diesen Befehl ausführen und die resultierende URL aufrufen, um den Anwendungscode auf GitHub aufzurufen:

echo -e "\n\nTo see your code, visit this URL:\n \
    https://github.com/${GITHUB_USERNAME}/codelab-genai/blob/main/index.js \n\n"

10. Automatische Deployments einrichten

1. Lassen Sie den Tab des Cloud Shell-Editors geöffnet. Wir werden später zu diesem Tab zurückkehren.
2. Rufen Sie in einem neuen Tab die Cloud Run-Seite auf.
3. Wählen Sie in der Console das richtige Google Cloud-Projekt aus 
4. Klicken Sie auf REPO VERBINDEN.
5. Klicken Sie auf MIT CLOUD BUILD EINRICHTEN.
   1. Wählen Sie GitHub als Repository-Anbieter aus.
      • Wenn Sie nicht in Ihrem GitHub-Konto im Browser angemeldet sind, melden Sie sich mit Ihren Anmeldedaten an.
   2. Klicken Sie auf Authentifizieren und dann auf Weiter.
   3. Nach der Anmeldung wird auf der Cloud Run-Seite die Meldung Die GitHub-App ist in keinem Ihrer Repositories installiert. angezeigt.
   4. Klicken Sie auf die Schaltfläche GOOGLE CLOUD BUILD INSTALLIEREN.
      • Wählen Sie auf der Seite „Installation Setup“ (Installation einrichten) die Option Only select repositories (Nur Repositories auswählen) aus und wählen Sie das Repository codelab-genai aus, das Sie über die CLI erstellt haben.
      • Klicken Sie auf Installieren.
      • Hinweis: Wenn Sie viele GitHub-Repositories haben, kann es einige Minuten dauern, bis die Seite geladen ist.
   5. Wählen Sie your-user-name/codelab-genai als Repository aus.
      • Wenn das Repository nicht vorhanden ist, klicken Sie auf den Link Verbundene Repositories verwalten.
   6. Behalten Sie für Branch den Wert ^main$ bei.
   7. Klicken Sie auf Go, Node.js, Python, Java, .NET Core, Ruby oder PHP über Buildpacks von Google Cloud
      .
      • Lassen Sie die anderen Felder (Build context directory, Entrypoint und Function target) unverändert.
   8. Klicken Sie auf Speichern.
6. Scrollen Sie nach unten zu Authentifizierung.
7. Klicken Sie auf Nicht authentifizierte Aufrufe zulassen.
8. Klicke auf ERSTELLEN.

Wenn der Build abgeschlossen ist (was einige Minuten dauert), führen Sie diesen Befehl aus und rufen Sie die resultierende URL auf, um Ihre laufende Anwendung aufzurufen:

echo -e "\n\nOnce the build finishes, visit your live application:\n \
    "$( \
        gcloud run services list | \
        grep codelab-genai | \
        awk '/URL/{print $2}' | \
        head -1 \
    )" \n\n"

11. Code ändern

Zum Cloud Shell-Editor zurückkehren

Wenn Sie den Cloud Shell-Editor noch geöffnet haben, können Sie diese Schritte überspringen.

1. Cloud Shell-Editor aufrufen
2. Wenn das Terminal nicht unten auf dem Bildschirm angezeigt wird, öffnen Sie es:
   • Klicken Sie auf das Dreistrich-Menü .
   • Klicken Sie auf Terminal.
   • Klicken Sie auf Neues Terminal.
3. Legen Sie im Terminal Ihr Projekt mit diesem Befehl fest:
   • Format:

     gcloud config set project [PROJECT_ID]
     

   • Beispiel:

     gcloud config set project lab-project-id-example
     

   • Wenn Sie sich nicht an Ihre Projekt-ID erinnern können,
     • Sie können alle Ihre Projekt-IDs mit folgendem Befehl auflisten:

       gcloud projects list | awk '/PROJECT_ID/{print $2}'
       

     
4. Wenn Sie zur Autorisierung aufgefordert werden, klicken Sie auf Autorisieren, um fortzufahren.
5. Es sollte folgende Meldung angezeigt werden:

   Updated property [core/project].
   

   Wenn Sie WARNING sehen und Do you want to continue (Y/N)? gefragt werden, haben Sie die Projekt-ID wahrscheinlich falsch eingegeben. Drücken Sie N, dann Enter und versuchen Sie, den Befehl gcloud config set project noch einmal auszuführen.

Genkit und Vertex AI in Ihre Anwendung einbinden

1. Kehren Sie zum Cloud Shell-Terminal unten auf dem Bildschirm zurück.
2. Prüfen Sie, ob Sie sich noch im richtigen Verzeichnis befinden:

   cd ~/codelab-genai
   

3. Installieren Sie das Node.js Genkit SDK:

   npm install @genkit-ai/ai
   

4. Installieren Sie das Node.js Genkit SDK für Vertex AI:

   npm install @genkit-ai/vertexai
   

5. index.js im Cloud Shell-Editor wieder öffnen

   cloudshell edit ~/codelab-genai/index.js
   

6. Ersetzen Sie den Code in Ihrer index.js-Datei durch Folgendes:

   import express from 'express';
   const app = express();
   
   import { genkit } from 'genkit';
   import { gemini15Flash, vertexAI } from '@genkit-ai/vertexai';
   
   const ai = genkit({
       plugins: [
           vertexAI({ location: 'us-central1' }),
       ],
   });
   
   app.get('/', async (req, res) => {
       const animal = req.query.animal || 'dog';
       const prompt = `Give me 10 fun facts about ${animal}. Return this as html without backticks.`
       const llmResponse = await ai.generate({
           model: gemini15Flash,
           prompt: prompt,
       });
       const html = llmResponse.text;
       res.send(html);
   });
   
   const port = process.env.PORT || 8080;
   app.listen(port, () => {
       console.log(`codelab-genai: listening on port ${port}`);
   });
   

1. Prüfen Sie, ob Sie sich in Cloud Shell noch im richtigen Verzeichnis befinden:

   cd ~/codelab-genai
   

2. Führen Sie diese Befehle aus, um eine neue Version Ihrer Anwendung in Ihrem lokalen Git-Repository zu committen:

   git add .
   git commit -m "add latest changes"
   

3. Übertragen Sie die Änderungen per Push an GitHub:

   git push
   

4. Führen Sie nach Abschluss des Builds diesen Befehl aus und rufen Sie Ihre bereitgestellte Anwendung auf:

   echo -e "\n\nOnce the build finishes, visit your live application:\n \
       "$( \
           gcloud run services list | \
           grep codelab-genai | \
           awk '/URL/{print $2}' | \
           head -1 \
       )" \n\n"
   

Es kann einige Minuten dauern, bis der Build abgeschlossen ist und Sie Ihre Änderungen sehen können.

Den Verlauf aller Überarbeitungen finden Sie unter https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions.

12. (Optional) .prompt-Dateien mit Genkit verwenden

1. Kehren Sie zum Cloud Shell-Terminal unten auf dem Bildschirm zurück.
2. Prüfen Sie, ob Sie sich noch im richtigen Verzeichnis befinden:

   cd ~/codelab-genai
   

3. Erstellen Sie einen prompts-Ordner, um Ihre Prompts zu speichern:

   mkdir prompts
   

4. Erstellen Sie eine animal-facts.prompt-Datei, um Ihren ersten Prompt zu erstellen:

   touch prompts/animal-facts.prompt
   

5. Öffnen Sie die Datei animal-facts.prompt im Cloud Shell-Editor:

   cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
   

6. Bearbeiten Sie animal-facts.prompt und fügen Sie den folgenden Code ein:

   ---
   model: vertexai/gemini-1.5-flash
   input:
       schema:
           animal: string
   ---
   
   Give me 10 fun facts about {{animal}}. Return the results as HTML without markdown backticks.
   

7. Öffnen Sie die Datei index.js im Cloud Shell-Editor:

   cloudshell edit ~/codelab-genai/index.js
   

8. Ersetzen Sie den Code in Ihrer index.js-Datei durch Folgendes:

   import express from 'express';
   const app = express();
   
   import { genkit } from 'genkit';
   import { vertexAI } from '@genkit-ai/vertexai';
   
   const ai = genkit({
       plugins: [
           vertexAI({ location: 'us-central1' }),
       ],
   });
   
   app.get('/', async (req, res) => {
       const animal = req.query.animal || 'dog';
       const animalPrompt = ai.prompt('animal-facts');
       const llmResponse = await animalPrompt({animal});
       const html = llmResponse.text;
       res.send(html);
   });
   
   const port = process.env.PORT || 8080;
   app.listen(port, () => {
       console.log(`codelab-genai: listening on port ${port}`);
   });
   

1. Prüfen Sie, ob Sie sich in Cloud Shell noch im richtigen Verzeichnis befinden:

   cd ~/codelab-genai
   

2. Führen Sie diese Befehle aus, um eine neue Version Ihrer Anwendung in Ihrem lokalen Git-Repository zu committen:

   git add .
   git commit -m "add latest changes"
   

3. Übertragen Sie die Änderungen per Push an GitHub:

   git push
   

4. Führen Sie nach Abschluss des Builds diesen Befehl aus und rufen Sie Ihre bereitgestellte Anwendung auf:

   echo -e "\n\nOnce the build finishes, visit your live application:\n \
       "$( \
           gcloud run services list | \
           grep codelab-genai | \
           awk '/URL/{print $2}' | \
           head -1 \
       )" \n\n"
   

Es kann einige Minuten dauern, bis der Build abgeschlossen ist und Sie Ihre Änderungen sehen können.

Den Verlauf aller Überarbeitungen finden Sie unter https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions.

13. (Optional) Systemprompts verwenden

Bei diesem Schritt wird davon ausgegangen, dass Sie im vorherigen Schritt bereits .prompt-Dateien hinzugefügt haben.

1. Kehren Sie zum Cloud Shell-Terminal unten auf dem Bildschirm zurück.
2. Prüfen Sie, ob Sie sich noch im richtigen Verzeichnis befinden:

   cd ~/codelab-genai
   

3. Öffnen Sie die Datei animal-facts.prompt im Cloud Shell-Editor:

   cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
   

4. Bearbeiten Sie animal-facts.prompt und fügen Sie den folgenden Code ein:

   ---
   model: vertexai/gemini-1.5-flash
   config:
       temperature: 0.9
   input:
       schema:
           animal: string
   ---
   
   role "system"
   The user should have submitted an animal.
   If the user requests anything besides animal fun facts, respond in a kind and firm manner that you only provide information about fun facts.
   Give the user 10 fun facts about the animal the user provided.
   All responses should be valid HTML without markdown backticks.
   
   role "user"
   {{animal}}
   

1. Prüfen Sie, ob Sie sich in Cloud Shell noch im richtigen Verzeichnis befinden:

   cd ~/codelab-genai
   

2. Führen Sie diese Befehle aus, um eine neue Version Ihrer Anwendung in Ihrem lokalen Git-Repository zu committen:

   git add .
   git commit -m "add latest changes"
   

3. Übertragen Sie die Änderungen per Push an GitHub:

   git push
   

4. Führen Sie nach Abschluss des Builds diesen Befehl aus und rufen Sie Ihre bereitgestellte Anwendung auf:

   echo -e "\n\nOnce the build finishes, visit your live application:\n \
       "$( \
           gcloud run services list | \
           grep codelab-genai | \
           awk '/URL/{print $2}' | \
           head -1 \
       )" \n\n"
   

Es kann einige Minuten dauern, bis der Build abgeschlossen ist und Sie Ihre Änderungen sehen können.

Den Verlauf aller Überarbeitungen finden Sie unter https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions.

14. Glückwunsch

In diesem Lab haben Sie eine Webanwendung geschrieben und Cloud Run so konfiguriert, dass Ihre Anwendung automatisch bereitgestellt wird, wenn eine Änderung am Quellcode Ihrer Anwendung vorgenommen wird. Anschließend haben Sie Ihre Anwendung geändert und noch einmal bereitgestellt.

Wenn Ihnen dieses Lab gefallen hat, können Sie es noch einmal in einer anderen Programmiersprache oder einem anderen Framework ausprobieren:

• Python
• Node.js
• Go
• Java
• Angular
• Next.js

Hier sind einige Optionen, wie Sie weiterlernen können:

• Genkit-Dokumentation: Erste Schritte
• Codelab zum Hinzufügen von Observability zu Ihrer Node.js-Anwendung: Practical observability techniques for Generative AI application in Javascript
• Codelab zum Hinzufügen eines Frontends zu Ihrer Anwendung mit Next.js: Generative KI-Webanwendung mit Next.js automatisch aus der Versionsverwaltung in Cloud Run bereitstellen
• Codelab zur Verwendung von Funktionsaufrufen: Gemini-Funktionsaufrufe mit Cloud Run verwenden
• Codelab zur Verarbeitung von Videoinhalten mit KI: How to use Cloud Run Jobs Video Intelligence API to process a Video scene-by-scene