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

1. Przegląd

Wdrożenie aplikacji internetowej po raz pierwszy może być trudne. Nawet po pierwszym wdrożeniu, jeśli proces jest zbyt pracochłonny, możesz unikać wdrażania nowych wersji aplikacji. Ciągłe wdrażanie umożliwia łatwe automatyczne wdrażanie zmian w aplikacji.

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

Czego się nauczysz

• Pisanie 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, musisz je utworzyć.
   • Używaj konta osobistego zamiast konta 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 module.
2. Jeśli nie masz jeszcze konta GitHub, musisz utworzyć konto GitHub
   .
   • Jeśli masz już konto GitHub, użyj go. GitHub częściej blokuje nowe konto jako spam.
   • Skonfiguruj uwierzytelnianie dwuskładnikowe na koncie GitHub, aby zmniejszyć ryzyko oznaczenia Twojego konta jako spam.

3. Konfigurowanie projektu

1. Zaloguj się w konsoli Google Cloud.
2. Włącz płatności w konsoli Google Cloud.
   • Pod względem opłat za zasoby chmury ukończenie tego modułu powinno kosztować mniej niż 1 USD.
   • Jeśli chcesz uniknąć dalszych opłat, wykonaj czynności opisane na końcu tego modułu, aby usunąć zasoby.
   • Nowi użytkownicy mogą skorzystać z bezpłatnego okresu próbnego, w którym mają do dyspozycji środki w wysokości 300 USD.
   • Bierzesz udział w wydarzeniu Generatywna AI dla programistów? Możesz otrzymać środki w wysokości 1 USD.
3. Utwórz nowy projekt lub użyj już istniejącego.
4. Sprawdź, czy płatności są włączone w sekcji Moje projekty na stronie Płatności Cloud.
   • Jeśli w kolumnie Billing account przy nowym projekcie widnieje Billing is disabled:
     1. Kliknij 3 kropki w kolumnie Actions.
     2. Kliknij Zmień płatności.
     3. Wybierz konto rozliczeniowe, którego chcesz używać.
   • Jeśli uczestniczysz w wydarzeniu Gen AI for Devs, konto prawdopodobnie będzie się nazywać Próbne konto rozliczeniowe Google Cloud Platform.

4. Otwórz edytor Cloud Shell

1. Otwórz edytor Cloud Shell.
2. Jeśli terminal nie pojawi się u dołu ekranu, otwórz go:
   • Kliknij menu .
   • Kliknij Terminal.
   • Kliknij Nowy terminal.
3. W terminalu ustaw 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ć listę wszystkich identyfikatorów projektów, użyj tego polecenia:

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

     
4. Jeśli pojawi się pytanie o autoryzację, kliknij Autoryzuj, aby przejść dalej.
5. Powinien wyświetlić się ten komunikat:

   Updated property [core/project].
   

   Jeśli widzisz symbol WARNING i pojawia się pytanie Do you want to continue (Y/N)?, prawdopodobnie identyfikator projektu został wpisany nieprawidłowo. Naciśnij N, a potem Enter i spróbuj ponownie uruchomić polecenie gcloud config set project.

5. Włącz interfejsy API

W terminalu włącz interfejsy API:

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

Wykonanie tego polecenia może potrwać kilka minut, ale powinno ostatecznie wyświetlić komunikat o sukcesie 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 "[e-mail]"
   

2. Ustaw globalną nazwę użytkownika Git:

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

3. Ustaw domyślną gałąź globalną Git na main:

   git config --global init.defaultBranch main
   

7. Napisz kod

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. Dodawanie pliku .gitignore, aby zapobiec zatwierdzaniu node_modules

   echo node_modules/ >> .gitignore
   

8. Otwórz plik index.js w edytorze Cloud Shell:

   cloudshell edit index.js
   

   U góry ekranu powinien pojawić się pusty plik. W tym miejscu możesz edytować plik index.js.
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 Twój kod. Ten kod odpowiada na żądania HTTP pozdrowieniem „Hello world!”.

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

8. Tworzenie repozytorium

1. Wróć do terminala Cloud Shell u dołu ekranu.
2. Upewnij się, że nadal jesteś w odpowiednim katalogu:

   cd ~/codelab-genai
   

3. Zainicjuj repozytorium Git

   git init -b main
   

4. Logowanie się w GitHub CLI

   gh auth login
   

   Naciśnij Enter, aby zaakceptować opcje domyślne, i postępuj zgodnie z instrukcjami w narzędziu interfejsu wiersza poleceń GitHub, w tym:
   1. Na które konto chcesz się zalogować? GitHub.com
   2. Jaki jest preferowany protokół operacji Git na tym hoście? HTTPS
   3. Uwierzytelnić Git za pomocą danych logowania do GitHuba? Y (Pomiń, jeśli się nie pojawi).
   4. Jak chcesz uwierzytelnić interfejs wiersza poleceń GitHub? 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. Dokończ logowanie
5. Sprawdź, czy jesteś zalogowany:

   gh api user -q ".login"
   

   Jeśli logowanie się powiodło, powinna się wyświetlić Twoja nazwa użytkownika GitHuba.
6. Tworzenie zmiennej GITHUB_USERNAME

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

7. Sprawdź, czy zmienna środowiskowa została utworzona:

   echo ${GITHUB_USERNAME}
   

   Jeśli zmienna została utworzona, powinna wyświetlić Twoją 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 możliwości:
   • Usuń istniejące repozytorium GitHub
   • Utwórz repozytorium o innej nazwie i pamiętaj, aby zmienić ją w kolejnych poleceniach.
9. Dodaj repozytorium codelab-genai jako zdalne repozytorium 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 z bieżącego katalogu do tego zatwierdzenia:

   git add .
   

3. Utwórz pierwszy commit:

   git commit -m "add http server"
   

4. Wypchnij zatwierdzenie do gałęzi main repozytorium origin:

   git push -u origin main
   

Możesz uruchomić to polecenie i otworzyć wynikowy adres URL, aby wyświetlić kod aplikacji na GitHubie:

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ę edytora Cloud Shell. Wrócimy do tej karty później.
2. Na nowej karcie otwórz stronę Cloud Run.
3. Wybierz odpowiedni projekt Google Cloud w konsoli .
4. Kliknij POŁĄCZ REPOZYTORIUM.
5. Kliknij SKONFIGURUJ Z CLOUD BUILD.
   1. Jako dostawcę repozytorium wybierz GitHub
      .
      • Jeśli nie jesteś zalogowany(-a) na konto GitHub w przeglądarce, zaloguj się za pomocą swoich danych logowania.
   2. Kliknij Uwierzytelnij, a następnie 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 wskaż repozytorium codelab-genai utworzone za pomocą interfejsu CLI.
      • Kliknij Zainstaluj.
      • Uwaga: jeśli masz dużo repozytoriów GitHub, wczytanie listy może potrwać kilka minut.
   5. Wybierz your-user-name/codelab-genai jako repozytorium
      .
      • Jeśli repozytorium nie jest widoczne, 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 się zakończy (co potrwa kilka minut), uruchom to polecenie i otwórz wynikowy adres URL, aby wyświetlić działającą 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

Powrót do edytora Cloud Shell

Jeśli edytor Cloud Shell jest nadal otwarty, możesz pominąć te kroki.

1. Otwórz edytor Cloud Shell.
2. Jeśli terminal nie pojawi się u dołu ekranu, otwórz go:
   • Kliknij menu .
   • Kliknij Terminal.
   • Kliknij Nowy terminal.
3. W terminalu ustaw 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ć listę wszystkich identyfikatorów projektów, użyj tego polecenia:

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

     
4. Jeśli pojawi się pytanie o autoryzację, kliknij Autoryzuj, aby przejść dalej.
5. Powinien wyświetlić się ten komunikat:

   Updated property [core/project].
   

   Jeśli widzisz symbol WARNING i pojawia się pytanie Do you want to continue (Y/N)?, prawdopodobnie identyfikator projektu został wpisany nieprawidłowo. Naciśnij N, a potem Enter i spróbuj ponownie uruchomić polecenie gcloud config set project.

Dodawanie Genkit i Vertex AI do aplikacji

1. Wróć do terminala Cloud Shell u dołu ekranu.
2. Upewnij się, że nadal jesteś w odpowiednim katalogu:

   cd ~/codelab-genai
   

3. Zainstaluj pakiet SDK Genkit Node.js:

   npm install @genkit-ai/ai
   

4. Zainstaluj pakiet Node.js Genkit SDK dla Vertex AI:

   npm install @genkit-ai/vertexai
   

5. Ponowne otwieranie pliku 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 w Cloud Shell nadal jesteś w odpowiednim katalogu:

   cd ~/codelab-genai
   

2. Uruchom te polecenia, aby zatwierdzić nową wersję aplikacji w lokalnym repozytorium Git:

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

3. Wypchnij 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"
   

Zanim zobaczysz zmiany, może minąć kilka minut, zanim kompilacja się zakończy.

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

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

1. Wróć do terminala Cloud Shell u dołu ekranu.
2. Upewnij się, że nadal jesteś w odpowiednim katalogu:

   cd ~/codelab-genai
   

3. Utwórz prompts folder do przechowywania promptów:

   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. Edytuj 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 w Cloud Shell nadal jesteś w odpowiednim katalogu:

   cd ~/codelab-genai
   

2. Uruchom te polecenia, aby zatwierdzić nową wersję aplikacji w lokalnym repozytorium Git:

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

3. Wypchnij 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"
   

Zanim zobaczysz zmiany, może minąć kilka minut, zanim kompilacja się zakończy.

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

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

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

1. Wróć do terminala Cloud Shell u dołu ekranu.
2. Upewnij się, że nadal jesteś w odpowiednim katalogu:

   cd ~/codelab-genai
   

3. Otwórz plik animal-facts.prompt w edytorze Cloud Shell:

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

4. Edytuj 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 w Cloud Shell nadal jesteś w odpowiednim katalogu:

   cd ~/codelab-genai
   

2. Uruchom te polecenia, aby zatwierdzić nową wersję aplikacji w lokalnym repozytorium Git:

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

3. Wypchnij 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"
   

Zanim zobaczysz zmiany, może minąć kilka minut, zanim kompilacja się zakończy.

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

14. Gratulacje

W tym module napiszesz aplikację internetową i skonfigurujesz Cloud Run, aby automatycznie wdrażać aplikację, gdy w jej kodzie źródłowym zostaną wprowadzone zmiany. Następnie zmodyfikowano aplikację i ponownie ją wdrożono.

Jeśli to laboratorium Ci się spodobało, możesz spróbować ponownie w innym języku programowania lub frameworku:

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

Oto kilka opcji, które pozwolą Ci kontynuować naukę:

• Dokumentacja Genkit: Pierwsze kroki
• Codelab dotyczący dodawania funkcji obserwacji do aplikacji w Node.js: Praktyczne techniki obserwacji aplikacji generatywnej AI w JavaScript
• Ćwiczenia z programowania dotyczące dodawania frontendu do aplikacji za pomocą Next.js: Automatyczne wdrażanie generatywnej aplikacji internetowej AI Next.js z kontroli wersji w Cloud Run
• Codelab pokazujący, jak używać wywoływania funkcji: Jak używać wywoływania funkcji Gemini z Cloud Run
• Codelab dotyczący wykorzystania AI do przetwarzania treści wideo: How to use Cloud Run Jobs Video Intelligence API to process a Video scene-by-scene (Jak używać interfejsu Cloud Run Jobs Video Intelligence API do przetwarzania wideo scena po scenie)