Diese Seite wurde von der Cloud Translation API übersetzt.

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

1. Übersicht

Das erste Mal eine Webanwendung bereitzustellen, kann beängstigend sein. Selbst nach der ersten Bereitstellung kann es sein, dass Sie die Bereitstellung neuer Versionen Ihrer Anwendung vermeiden, wenn der Prozess zu viel Arbeit macht. 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 die 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

Mit Genkit generative KI in Ihre Anwendung einbinden
LLM-Prompts mit der dotprompt-Bibliothek verwalten

2. Vorbereitung

Wenn Sie noch kein Google-Konto haben, müssen Sie ein Google-Konto erstellen.
- Sie verwenden ein privates Konto anstelle eines Arbeits- oder Schulkontos. Für geschäftliche und schulische Konten gelten möglicherweise Einschränkungen, die Sie daran hindern, die für dieses Lab erforderlichen APIs zu aktivieren.
Wenn Sie noch kein GitHub-Konto haben, müssen Sie ein GitHub-Konto erstellen.
- Verwenden Sie ein vorhandenes GitHub-Konto, falls Sie eines haben. GitHub blockiert ein neues Konto mit höherer Wahrscheinlichkeit als Spam.
- Richten Sie die 2-Faktor-Authentifizierung in Ihrem GitHub-Konto ein, um das Risiko zu verringern, dass Ihr Konto als Spam markiert wird.

3. Projekt einrichten

Melden Sie sich in der Google Cloud Console an.
Aktivieren Sie die Abrechnung in der Cloud Console.
- Die Kosten für die Durchführung dieses Labs sollten unter 1 $liegen.
- Sie können die Schritte am Ende dieses Labs ausführen, um Ressourcen zu löschen und weitere Kosten zu vermeiden.
- Neue Nutzer können das kostenlose Testabo mit einem Guthaben von 300$ nutzen.
- Nehmen Sie an einer Veranstaltung zu generativer KI für Entwickler teil? Möglicherweise erhalten Sie ein Guthaben in Höhe von 1$.
Erstellen Sie ein neues Projekt oder verwenden Sie ein vorhandenes.
Prüfen Sie, ob die Abrechnung unter Meine Projekte in der Cloud-Abrechnung aktiviert ist.
- Wenn in der Spalte Billing account für Ihr neues Projekt Billing is disabled angezeigt wird:
  1. Klicken Sie in der Spalte Actions auf das Dreipunkt-Menü.
  2. Klicken Sie auf Abrechnung ändern.
  3. Wählen Sie das Rechnungskonto aus, das Sie verwenden möchten.
- Wenn Sie an einer Gen AI for Devs-Veranstaltung teilnehmen, lautet der Name des Kontos wahrscheinlich Google Cloud Platform-Testrechnungskonto.

4. Cloud Shell-Editor öffnen

Rufen Sie den Cloud Shell-Editor auf.
Wenn das Terminal nicht unten auf dem Bildschirm angezeigt wird, öffnen Sie es:
- Klicke auf das Dreistrich-Menü .
- Klicken Sie auf Terminal.
- Klicken Sie auf Neues Terminal.
Legen Sie das Projekt im Terminal mit diesem Befehl fest:
- Format:
```
gcloud config set project [PROJECT_ID]
```
- Beispiel:
```
gcloud config set project lab-project-id-example
```
- Wenn Sie sich Ihre Projekt-ID nicht merken können:
  - So listen Sie alle Ihre Projekt-IDs auf:
```
gcloud projects list | awk '/PROJECT_ID/{print $2}'
```
Wenn Sie dazu aufgefordert werden, klicken Sie auf Autorisieren, um fortzufahren.
Es sollte folgende Meldung angezeigt werden:
```
Updated property [core/project].
```
Wenn du die Meldung WARNING und die Frage Do you want to continue (Y/N)? siehst, hast du wahrscheinlich die Projekt-ID falsch eingegeben. Drücken Sie N, Enter und versuchen Sie noch einmal, den Befehl gcloud config set project auszuführen.

5. APIs aktivieren

Aktivieren Sie im Terminal die APIs:

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

Die Verarbeitung dieses Befehls kann einige Minuten dauern. Sie sollten aber schließlich eine Meldung ähnlich der folgenden erhalten:

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

6. Git konfigurieren

So legen Sie die E-Mail-Adresse des globalen Git-Nutzers fest:
```
git config --global user.email "you@example.com"
```

Legen Sie Ihren globalen Git-Nutzernamen fest:

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

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:

Rufen Sie das Basisverzeichnis auf:
```
cd ~
```
Erstellen Sie das Verzeichnis codelab-genai:
```
mkdir codelab-genai
```
Rufen Sie das Verzeichnis codelab-genai auf:
```
cd codelab-genai
```
index.js-Datei erstellen:
```
touch index.js
```
Erstellen Sie die Datei package.json.
```
npm init es6 -y
```
express als Abhängigkeit hinzufügen
```
npm install express
```
.gitignore-Datei hinzufügen, um das Committen von node_modules zu verhindern
```
echo node_modules/ >> .gitignore
```
Ö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.

Kopieren Sie den folgenden Code und fügen Sie ihn in die geöffnete index.js-Datei 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 der Code im Cloud Shell-Editor automatisch 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 Versionskontrolle gespeichert werden.

8. Repository erstellen

Kehren Sie unten auf dem Bildschirm zum Cloud Shell-Terminal zurück.
Prüfen Sie, ob Sie sich noch im richtigen Verzeichnis befinden:
```
cd ~/codelab-genai
```
Git-Repository initialisieren
```
git init -b main
```
In der GitHub-Befehlszeile anmelden
```
gh auth login
```
Drücken Sie die Enter, um die Standardoptionen zu akzeptieren, und folgen Sie der Anleitung im GitHub-Befehlszeilentool. Dazu gehören:
1. In welchem Konto möchtest du dich anmelden? GitHub.com
2. Welches Protokoll verwenden Sie bevorzugt für Git-Vorgänge auf diesem Host? HTTPS
3. Möchten Sie Git mit Ihren GitHub-Anmeldedaten authentifizieren? Y (Überspringen, wenn diese Option nicht angezeigt wird.)
4. Wie möchten Sie die GitHub-Befehlszeile authentifizieren? Login with a web browser
5. Einmalcode kopieren
6. Öffnen Sie https://github.com/login/device.
7. Einmaligen Code einfügen
8. Klicken Sie auf GitHub autorisieren.
9. Anmeldung abschließen
Prüfen Sie, ob Sie angemeldet sind:
```
gh api user -q ".login"
```
Wenn Sie sich erfolgreich angemeldet haben, sollte hier Ihr GitHub-Nutzername ausgegeben werden.

GITHUB_USERNAME-Variable erstellen

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

Prüfen Sie, ob Sie die Umgebungsvariable erstellt haben:
```
echo ${GITHUB_USERNAME}
```
Wenn Sie die Variable erfolgreich erstellt haben, sollte hier Ihr GitHub-Nutzername ausgegeben werden.
Erstellen Sie ein leeres GitHub-Repository mit dem Namen codelab-genai:
```
gh repo create codelab-genai --private
```
Wenn folgende Fehlermeldung angezeigt wird:
```
GraphQL: Name already exists on this account (createRepository)
```
Dann haben Sie bereits ein Repository mit dem Namen codelab-genai. Sie haben zwei Möglichkeiten, diese Anleitung fortzusetzen:
- Vorhandenes GitHub-Repository löschen
- Erstellen Sie ein Repository mit einem anderen Namen und ändern Sie ihn in den folgenden Befehlen.

Fügen Sie das codelab-genai-Repository als Remote-Repository origin hinzu:

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

9. Code teilen

Prüfen Sie, ob Sie sich im richtigen Verzeichnis befinden:
```
cd ~/codelab-genai
```
Fügen Sie diesem Commit alle Dateien im aktuellen Verzeichnis hinzu:
```
git add .
```
Erstellen Sie den ersten Commit:
```
git commit -m "add http server"
```
Übertragen Sie den Commit per Push in 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 Bereitstellungen einrichten

Lassen Sie den Tab „Cloud Shell-Editor“ geöffnet. Wir kommen später noch einmal auf diesen Tab zurück.
Rufen Sie in einem neuen Tab die Cloud Run-Seite auf.
Wählen Sie in der Console das richtige Google Cloud-Projekt aus .
Klicken Sie auf REPO VERBINDEN.
Klicken Sie auf MIT CLOUD BUILD EINRICHTEN
1. Wählen Sie GitHub als Repository-Anbieter aus.
  - Wenn Sie nicht im Browser in Ihrem GitHub-Konto 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 „Installationseinrichtung“ die Option Nur ausgewählte Repositories und dann das Repository codelab-genai aus, das Sie über die Befehlszeile erstellt haben.
  - Klicke auf Installieren.
  - Hinweis: Wenn Sie viele GitHub-Repositories haben, kann das Laden einige Minuten dauern.
5. Wählen Sie your-user-name/codelab-genai als Repository
  - 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.
Scrollen Sie nach unten zu Authentifizierung.
Klicken Sie auf Nicht authentifizierte Aufrufe zulassen.
Klicke auf ERSTELLEN.

Sobald der Build abgeschlossen ist (was einige Minuten dauern kann), führen Sie diesen Befehl aus und rufen Sie die resultierende URL auf, um die 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 der Cloud Shell-Editor noch geöffnet ist, können Sie diese Schritte überspringen.

Rufen Sie den Cloud Shell-Editor auf.
Wenn das Terminal nicht unten auf dem Bildschirm angezeigt wird, öffnen Sie es:
- Klicke auf das Dreistrich-Menü .
- Klicken Sie auf Terminal.
- Klicken Sie auf Neues Terminal.
Legen Sie das Projekt im Terminal mit diesem Befehl fest:
- Format:
```
gcloud config set project [PROJECT_ID]
```
- Beispiel:
```
gcloud config set project lab-project-id-example
```
- Wenn Sie sich Ihre Projekt-ID nicht merken können:
  - So listen Sie alle Ihre Projekt-IDs auf:
```
gcloud projects list | awk '/PROJECT_ID/{print $2}'
```
Wenn Sie dazu aufgefordert werden, klicken Sie auf Autorisieren, um fortzufahren.
Es sollte folgende Meldung angezeigt werden:
```
Updated property [core/project].
```
Wenn du die Meldung WARNING und die Frage Do you want to continue (Y/N)? siehst, hast du wahrscheinlich die Projekt-ID falsch eingegeben. Drücken Sie N, Enter und versuchen Sie noch einmal, den Befehl gcloud config set project auszuführen.

Genkit und Vertex AI zu Ihrer Anwendung hinzufügen

Kehren Sie unten auf dem Bildschirm zum Cloud Shell-Terminal zurück.
Prüfen Sie, ob Sie sich noch im richtigen Verzeichnis befinden:
```
cd ~/codelab-genai
```
Installieren Sie das Node.js Genkit SDK:
```
npm install @genkit-ai/ai
```
Installieren Sie das Node.js Genkit SDK für Vertex AI:
```
npm install @genkit-ai/vertexai
```

index.js im Cloud Shell-Editor wieder öffnen

cloudshell edit ~/codelab-genai/index.js

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}`);
});

Prüfen Sie, ob Sie sich noch im richtigen Verzeichnis in Cloud Shell befinden:
```
cd ~/codelab-genai
```
Führen Sie die folgenden Befehle aus, um eine neue Version Ihrer Anwendung in Ihr lokales Git-Repository zu committen:
```
git add .
git commit -m "add latest changes"
```
Übertragen Sie die Änderungen per Push an GitHub:
```
git push
```

Führen Sie nach Abschluss des Builds diesen Befehl aus und rufen Sie die 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.

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

12. Optional: Promptdateien mit Genkit verwenden

Kehren Sie unten auf dem Bildschirm zum Cloud Shell-Terminal zurück.
Prüfen Sie, ob Sie sich noch im richtigen Verzeichnis befinden:
```
cd ~/codelab-genai
```
Erstellen Sie einen prompts-Ordner, um Ihre Prompts darin zu speichern:
```
mkdir prompts
```
Erstellen Sie eine animal-facts.prompt-Datei, um Ihren ersten Prompt zu erstellen:
```
touch prompts/animal-facts.prompt
```

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

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

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.

Öffnen Sie die Datei index.js im Cloud Shell-Editor:
```
cloudshell edit ~/codelab-genai/index.js
```

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}`);
});

Prüfen Sie, ob Sie sich noch im richtigen Verzeichnis in Cloud Shell befinden:
```
cd ~/codelab-genai
```
Führen Sie die folgenden Befehle aus, um eine neue Version Ihrer Anwendung in Ihr lokales Git-Repository zu committen:
```
git add .
git commit -m "add latest changes"
```
Übertragen Sie die Änderungen per Push an GitHub:
```
git push
```

Führen Sie nach Abschluss des Builds diesen Befehl aus und rufen Sie die 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.

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

13. Optional: Systemaufforderungen verwenden

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

Kehren Sie unten auf dem Bildschirm zum Cloud Shell-Terminal zurück.
Prüfen Sie, ob Sie sich noch im richtigen Verzeichnis befinden:
```
cd ~/codelab-genai
```

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

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

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}}

Prüfen Sie, ob Sie sich noch im richtigen Verzeichnis in Cloud Shell befinden:
```
cd ~/codelab-genai
```
Führen Sie die folgenden Befehle aus, um eine neue Version Ihrer Anwendung in Ihr lokales Git-Repository zu committen:
```
git add .
git commit -m "add latest changes"
```
Übertragen Sie die Änderungen per Push an GitHub:
```
git push
```

Führen Sie nach Abschluss des Builds diesen Befehl aus und rufen Sie die 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.

Den Verlauf aller Versionen finden Sie hier: 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 wurde. Anschließend haben Sie Ihre Anwendung geändert und noch einmal bereitgestellt.

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

Hier sind einige Möglichkeiten, wie Sie Ihr Wissen vertiefen können:

Genkit-Dokumentation: Erste Schritte
Codelab zum Hinzufügen von Beobachtbarkeit zu Ihrer Node.js-Anwendung: Praktische Techniken zur Beobachtbarkeit für Anwendungen mit generativer KI in JavaScript
Codelab zum Hinzufügen eines Frontends zu Ihrer Anwendung mit Next.js: Generative AI Next.js-Webanwendung automatisch aus der Versionskontrolle in Cloud Run bereitstellen
Codelab zur Verwendung von Funktionsaufrufen: Gemini-Funktionsaufrufe mit Cloud Run verwenden
Codelab zur Verarbeitung von Videoinhalten mithilfe von KI: Videos mit der Video Intelligence API von Cloud Run Jobs szenenweise verarbeiten