Automatyczne wdrażanie aplikacji internetowej Generative AI Genkit w Node.js z kontrolą wersji do Cloud Run

1. Omówienie

Wdrażanie aplikacji internetowej po raz pierwszy może wydawać się niezwykle skomplikowanym zadaniem. Nawet po pierwszym wdrożeniu, jeśli proces wymaga zbyt dużo pracy, możesz nie wdrażać nowych wersji aplikacji. Dzięki ciągłemu wdrażaniu możesz łatwo wdrażać zmiany w aplikacji.

W tym module napiszesz aplikację internetową i skonfigurujesz Cloud Run, aby automatycznie wdrażać aplikację po wprowadzeniu zmiany w kodzie źródłowym. Następnie zmodyfikuj aplikację i ponownie ją wdróż.

Czego się nauczysz

  • Tworzenie aplikacji internetowej za pomocą edytora Cloud Shell
  • Przechowywanie kodu aplikacji w GitHubie
  • Automatyczne wdrażanie aplikacji w Cloud Run
  • Dodawanie generatywnej AI do aplikacji za pomocą Genkit
  • Zarządzanie promptami LLM za pomocą biblioteki dotprompt

2. Wymagania wstępne

  1. Jeśli nie masz jeszcze konta Google, utwórz je.
    • Używasz konta osobistego, a nie służbowego lub szkolnego. Konta służbowe i szkolne mogą mieć ograniczenia, które uniemożliwiają włączenie interfejsów API potrzebnych w tym laboratorium.
  2. Jeśli nie masz jeszcze konta GitHub, musisz utworzyć je.

3. Konfigurowanie projektu

  1. Zaloguj się w konsoli Google Cloud.
  2. Włącz płatności w Cloud Console.
  3. Utwórz nowy projekt lub użyj istniejącego.
  4. Sprawdź, czy płatności są włączone w sekcji Moje projekty w Rozliczeniach usługi Google Cloud.
    • Jeśli w kolumnie Billing account w nowym projekcie widać wartość Billing is disabled:
      1. Kliknij 3 kropki w kolumnie Actions.
      2. Kliknij Zmień rozliczenia.
      3. Wybierz konto rozliczeniowe, którego chcesz użyć.
    • Jeśli uczestniczysz w wydarzeniu dotyczącem generatywnej AI dla programistów, konto będzie prawdopodobnie nazywać się Próbne konto rozliczeniowe Google Cloud Platform.

4. Otwórz edytor Cloud Shell

  1. Otwórz Edytor Cloud Shell.
  2. Jeśli terminal nie pojawia się u dołu ekranu, otwórz go:
    • Kliknij menu z 3 kreskami Ikona menu z 3 kreskami
    • Kliknij Terminal.
    • Kliknij Nowy terminalOtwieranie nowego terminala w edytorze Cloud Shell.
  3. W terminalu skonfiguruj projekt za pomocą tego polecenia:
    • Format:
      gcloud config set project [PROJECT_ID]
    • Przykład:
      gcloud config set project lab-project-id-example
    • Jeśli nie pamiętasz identyfikatora projektu:
      • Aby wyświetlić wszystkie identyfikatory projektów, użyj:
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      Ustawianie identyfikatora projektu w terminalu edytora Cloud Shell
  4. Jeśli pojawi się pytanie o autoryzację, kliknij Autoryzuj, aby kontynuować. Kliknij, aby autoryzować Cloud Shell
  5. Powinien wyświetlić się ten komunikat:
    Updated property [core/project].
    Jeśli widzisz WARNING i pojawia się pytanie Do you want to continue (Y/N)?, prawdopodobnie nieprawidłowo wpisano identyfikator projektu. Naciśnij N, naciśnij Enter i spróbuj ponownie uruchomić polecenie gcloud config set project.

5. Włącz interfejsy API

Włącz w terminalu te interfejsy API:

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

Wykonanie tego polecenia może potrwać kilka minut, ale ostatecznie powinno wyświetlić komunikat podobny do tego:

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

6. Skonfiguruj Git

  1. Ustaw globalny adres e-mail użytkownika Git:
    git config --global user.email "you@example.com"
  2. Ustaw globalną nazwę użytkownika Git:
    git config --global user.name "Your Name"
  3. Ustaw globalną gałąź domyślną git na main:
    git config --global init.defaultBranch main

7. Tworzenie kodu

Aby napisać aplikację w Node.js:

  1. Przejdź do katalogu domowego:
    cd ~
  2. Utwórz katalog codelab-genai:
    mkdir codelab-genai
  3. Przejdź do katalogu codelab-genai:
    cd codelab-genai
  4. Utwórz plik index.js:
    touch index.js
  5. Utwórz plik package.json:
    npm init es6 -y
  6. Dodaj express jako zależność
    npm install express
  7. Dodaj plik .gitignore, aby zapobiec zatwierdzaniu pliku node_modules
    echo node_modules/ >> .gitignore
  8. Otwórz plik index.js w edytorze Cloud Shell:
    cloudshell edit index.js
    W górnej części ekranu powinien pojawić się pusty plik. Tutaj możesz edytować plik index.js. Pokaż, że kod znajduje się w górnej części ekranu
  9. Skopiuj ten kod i wklej go do otwartego pliku index.js:
    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}`);
});
    Po kilku sekundach edytor Cloud Shell automatycznie zapisze kod. Ten kod odpowiada na żądania http pozdrowieniem „Hello world”.

Początkowy kod aplikacji jest gotowy i możesz go przechowywać w systemie kontroli wersji.

8. Tworzenie repozytorium

  1. Wróć do terminala Cloud Shell na dole ekranu.
  2. Upewnij się, że nadal jesteś w prawidłowym katalogu:
    cd ~/codelab-genai
  3. Inicjowanie repozytorium Git
    git init -b main
  4. Logowanie się w GitHub CLI
    gh auth login
    Naciśnij Enter, aby zaakceptować domyślne opcje, i postępuj zgodnie z instrukcjami w narzędzie CLI GitHub, w tym:
    1. Na które konto chcesz się zalogować? GitHub.com
    2. Jaki jest preferowany protokół do operacji Git na tym hoście? HTTPS
    3. Uwierzytelnianie Git za pomocą danych logowania do GitHuba? Y (pomiń, jeśli ta opcja się nie wyświetla).
    4. Jak chcesz uwierzytelnić GitHub CLI? Login with a web browser
    5. Skopiuj kod jednorazowy
    6. Otwórz stronę https://github.com/login/device.
    7. Wklej kod jednorazowy
    8. Kliknij Autoryzuj GitHub.
    9. Zaloguj się
  5. Sprawdź, czy jesteś zalogowany(-a):
    gh api user -q ".login"
    Jeśli udało Ci się zalogować, powinna zostać wyświetlona Twoja nazwa użytkownika GitHub.
  6. Tworzenie zmiennej GITHUB_USERNAME
    GITHUB_USERNAME=$(gh api user -q ".login")
  7. Sprawdź, czy utworzysz zmienną środowiskową:
    echo ${GITHUB_USERNAME}
    Jeśli udało Ci się utworzyć zmienną, powinna ona zwrócić nazwę użytkownika GitHuba.
  8. Utwórz puste repozytorium GitHub o nazwie codelab-genai:
    gh repo create codelab-genai --private
    Jeśli pojawi się błąd:
    GraphQL: Name already exists on this account (createRepository)
    Masz już repozytorium o nazwie codelab-genai. Aby kontynuować ten samouczek, masz 2 opcje:
  9. Dodaj repozytorium codelab-genai jako repozytorium zdalne origin:
    git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai

9. Udostępnianie kodu

  1. Sprawdź, czy jesteś w odpowiednim katalogu:
    cd ~/codelab-genai
  2. Dodaj wszystkie pliki w bieżącym katalogu do tego zatwierdzenia:
    git add .
  3. Utwórz pierwsze potwierdzenie:
    git commit -m "add http server"
  4. Wypchnij zatwierdzenie do gałęzi main repozytorium origin:
    git push -u origin main

Aby wyświetlić kod aplikacji na GitHubie, uruchom to polecenie i otwórz otrzymany adres URL:

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. Konfigurowanie automatycznych wdrożeń

  1. Pozostaw otwartą kartę Edytor Cloud Shell. Wrócimy do tej karty później.
  2. W nowej karcie otwórz stronę Cloud Run.
  3. Wybierz odpowiedni projekt Google Cloud w konsoli Menu projektu w konsoli Google Cloud.
  4. Kliknij POŁĄCZ REPOSITORYUM.
  5. Kliknij SKONFIGUREWANIE Z CLOUD BUILD
      .
    1. Jako Dostawca repozytorium
        wybierz GitHub.
      • Jeśli nie jesteś zalogowany(-a) na konto GitHub w przeglądarce, zaloguj się, podając swoje dane logowania.
    2. Kliknij kolejno Uwierzytelnij i Dalej.
    3. Po zalogowaniu się na stronie Cloud Run zobaczysz komunikat Aplikacja na GitHubie nie jest zainstalowana w żadnym Twoim repozytorium.
    4. Kliknij przycisk ZAINSTALUJ GOOGLE CLOUD BUILD.
      • Na stronie Konfiguracja instalacji wybierz Tylko wybrane repozytoria i wybierz repozytorium codelab-genai utworzone za pomocą CLI.
      • Kliknij Zainstaluj.
      • Uwaga: jeśli masz dużo repozytoriów GitHub, wczytywanie może potrwać kilka minut.
    5. Jako repozytorium
        wybierz your-user-name/codelab-genai.
      • Jeśli repozytorium jest nieobecne, kliknij link Zarządzaj połączonymi repozytoriami.
    6. W polu Gałąź pozostaw wartość ^main$.
    7. Kliknij Go, Node.js, Python, Java, .NET Core, Ruby lub PHP za pomocą pakietów kompilacji Google Cloud
      • Pozostaw pozostałe pola (Build context directory, Entrypoint i Function target) bez zmian.
    8. Kliknij Zapisz.
  6. Przewiń w dół do sekcji Uwierzytelnianie.
  7. Kliknij Zezwalaj na nieuwierzytelnione wywołania.
  8. Kliknij UTWÓRZ.

Gdy kompilacja zostanie ukończona (co może potrwać kilka minut), uruchom to polecenie i otwórz adres URL, który zostanie wyświetlony, aby wyświetlić uruchomioną aplikację:

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. Zmień kod

Wróć do edytora Cloud Shell

Jeśli nadal masz otwarty edytor Cloud Shell, możesz pominąć te czynności.

  1. Otwórz Edytor Cloud Shell.
  2. Jeśli terminal nie pojawia się u dołu ekranu, otwórz go:
    • Kliknij menu z 3 kreskami Ikona menu z 3 kreskami
    • Kliknij Terminal.
    • Kliknij Nowy terminalOtwieranie nowego terminala w edytorze Cloud Shell.
  3. W terminalu skonfiguruj projekt za pomocą tego polecenia:
    • Format:
      gcloud config set project [PROJECT_ID]
    • Przykład:
      gcloud config set project lab-project-id-example
    • Jeśli nie pamiętasz identyfikatora projektu:
      • Aby wyświetlić wszystkie identyfikatory projektów, użyj:
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
      Ustawianie identyfikatora projektu w terminalu edytora Cloud Shell
  4. Jeśli pojawi się pytanie o autoryzację, kliknij Autoryzuj, aby kontynuować. Kliknij, aby autoryzować Cloud Shell
  5. Powinien wyświetlić się ten komunikat:
    Updated property [core/project].
    Jeśli widzisz WARNING i pojawia się pytanie Do you want to continue (Y/N)?, prawdopodobnie nieprawidłowo wpisano identyfikator projektu. Naciśnij N, naciśnij Enter i spróbuj ponownie uruchomić polecenie gcloud config set project.

Dodawanie Genkit i Vertex AI do aplikacji

  1. Wróć do terminala Cloud Shell na dole ekranu.
  2. Upewnij się, że nadal jesteś w prawidłowym katalogu:
    cd ~/codelab-genai
  3. Zainstaluj pakiet SDK Genkit dla Node.js:
    npm install @genkit-ai/ai
  4. Zainstaluj pakiet SDK Genkit dla Node.js na potrzeby Vertex AI:
    npm install @genkit-ai/vertexai
  5. Ponownie otwórz plik index.js w edytorze Cloud Shell
    cloudshell edit ~/codelab-genai/index.js
  6. Zastąp kod w pliku index.js tym kodem:
    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. Upewnij się, że nadal jesteś w odpowiednim katalogu w Cloud Shell:
    cd ~/codelab-genai
  2. Aby wypchnąć nową wersję aplikacji do lokalnego repozytorium Git, uruchom te polecenia:
    git add .
git commit -m "add latest changes"
  3. Prześlij zmiany do GitHuba:
    git push
  4. Po zakończeniu kompilacji uruchom to polecenie i otwórz wdrożoną aplikację:
    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"

Utworzenie wersji może potrwać kilka minut.

Historię wszystkich wersji znajdziesz tutaj: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

12. (Opcjonalnie) Używanie plików prompt .txt w Genkit

  1. Wróć do terminala Cloud Shell na dole ekranu.
  2. Upewnij się, że nadal jesteś w prawidłowym katalogu:
    cd ~/codelab-genai
  3. Utwórz folder prompts, aby przechowywać prompty:
    mkdir prompts
  4. Aby utworzyć pierwszy prompt, utwórz plik animal-facts.prompt:
    touch prompts/animal-facts.prompt
  5. Otwórz plik animal-facts.prompt w edytorze Cloud Shell:
    cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
  6. Otwórz plik animal-facts.prompt i wklej do niego ten kod:
    ---
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. Otwórz plik index.js w edytorze Cloud Shell:
    cloudshell edit ~/codelab-genai/index.js
  8. Zastąp kod w pliku index.js tym kodem:
    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. Upewnij się, że nadal jesteś w odpowiednim katalogu w Cloud Shell:
    cd ~/codelab-genai
  2. Aby wypchnąć nową wersję aplikacji do lokalnego repozytorium Git, uruchom te polecenia:
    git add .
git commit -m "add latest changes"
  3. Prześlij zmiany do GitHuba:
    git push
  4. Po zakończeniu kompilacji uruchom to polecenie i otwórz wdrożoną aplikację:
    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"

Utworzenie wersji może potrwać kilka minut.

Historię wszystkich wersji znajdziesz tutaj: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

13. (Opcjonalnie) Używanie komunikatów systemowych

Zakładamy, że w poprzednim kroku dodano już pliki .prompt.

  1. Wróć do terminala Cloud Shell na dole ekranu.
  2. Upewnij się, że nadal jesteś w prawidłowym katalogu:
    cd ~/codelab-genai
  3. Otwórz plik animal-facts.prompt w edytorze Cloud Shell:
    cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
  4. Otwórz plik animal-facts.prompt i wklej do niego ten kod:
    ---
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. Upewnij się, że nadal jesteś w odpowiednim katalogu w Cloud Shell:
    cd ~/codelab-genai
  2. Aby wypchnąć nową wersję aplikacji do lokalnego repozytorium Git, uruchom te polecenia:
    git add .
git commit -m "add latest changes"
  3. Prześlij zmiany do GitHuba:
    git push
  4. Po zakończeniu kompilacji uruchom to polecenie i otwórz wdrożoną aplikację:
    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"

Utworzenie wersji może potrwać kilka minut.

Historię wszystkich wersji znajdziesz tutaj: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

14. Gratulacje

W tym module napisano aplikację internetową i skonfigurowano Cloud Run, aby automatycznie wdrażać aplikację po wprowadzeniu zmiany w kodzie źródłowym. Następnie zmodyfikowałeś aplikację i ponownie ją wdrożyłeś.

Jeśli podobał Ci się ten warsztat, możesz go powtórzyć w innym języku programowania lub środowisku:

Oto kilka opcji dalszej nauki: