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
- 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.
- Jeśli nie masz jeszcze konta GitHub, musisz utworzyć je.
- Użyj istniejącego konta GitHub, jeśli je masz. GitHub chętniej blokuje nowe konta jako spam.
- Skonfiguruj uwierzytelnianie dwuskładnikowe na koncie GitHub, aby zmniejszyć ryzyko oznaczenia Twojego konta jako spamu.
3. Konfigurowanie projektu
- Zaloguj się w konsoli Google Cloud.
- Włącz płatności w Cloud Console.
- Ukończenie tego ćwiczenia powinno kosztować mniej niż 1 USD w zasobach Cloud.
- Aby uniknąć dalszych opłat, możesz usunąć zasoby, wykonując czynności podane na końcu tego laboratorium.
- Nowi użytkownicy mogą skorzystać z bezpłatnego okresu próbnego, w którym mają do dyspozycji środki w wysokości 300 USD.
- Uczestniczysz w wydarzeniu poświęconym generatywnej sztucznej inteligencji dla programistów? Możesz otrzymać 1 USD w gotówce.
- Utwórz nowy projekt lub użyj istniejącego.
- 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
:- Kliknij 3 kropki w kolumnie
Actions
. - Kliknij Zmień rozliczenia.
- Wybierz konto rozliczeniowe, którego chcesz użyć.
- Kliknij 3 kropki w kolumnie
- 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.
- Jeśli w kolumnie
4. Otwórz edytor Cloud Shell
- Otwórz Edytor Cloud Shell.
- Jeśli terminal nie pojawia się u dołu ekranu, otwórz go:
- Kliknij menu z 3 kreskami
- Kliknij Terminal.
- Kliknij Nowy terminal
.
- Kliknij menu z 3 kreskami
- 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}'
- Aby wyświetlić wszystkie identyfikatory projektów, użyj:
- Format:
- Jeśli pojawi się pytanie o autoryzację, kliknij Autoryzuj, aby kontynuować.
- Powinien wyświetlić się ten komunikat:
Jeśli widziszUpdated property [core/project].
WARNING
i pojawia się pytanieDo you want to continue (Y/N)?
, prawdopodobnie nieprawidłowo wpisano identyfikator projektu. NaciśnijN
, naciśnijEnter
i spróbuj ponownie uruchomić poleceniegcloud 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
- Ustaw globalny adres e-mail użytkownika Git:
git config --global user.email "you@example.com"
- Ustaw globalną nazwę użytkownika Git:
git config --global user.name "Your Name"
- Ustaw globalną gałąź domyślną git na
main
:git config --global init.defaultBranch main
7. Tworzenie kodu
Aby napisać aplikację w Node.js:
- Przejdź do katalogu domowego:
cd ~
- Utwórz katalog
codelab-genai
:mkdir codelab-genai
- Przejdź do katalogu
codelab-genai
:cd codelab-genai
- Utwórz plik
index.js
:touch index.js
- Utwórz plik
package.json
:npm init es6 -y
- Dodaj
express
jako zależnośćnpm install express
- Dodaj plik
.gitignore
, aby zapobiec zatwierdzaniu plikunode_modules
echo node_modules/ >> .gitignore
- Otwórz plik
index.js
w edytorze Cloud Shell: W górnej części ekranu powinien pojawić się pusty plik. Tutaj możesz edytować plikcloudshell edit index.js
index.js
. - Skopiuj ten kod i wklej go do otwartego pliku
index.js
: Po kilku sekundach edytor Cloud Shell automatycznie zapisze kod. Ten kod odpowiada na żądania http pozdrowieniem „Hello world”.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}`); });
Początkowy kod aplikacji jest gotowy i możesz go przechowywać w systemie kontroli wersji.
8. Tworzenie repozytorium
- Wróć do terminala Cloud Shell na dole ekranu.
- Upewnij się, że nadal jesteś w prawidłowym katalogu:
cd ~/codelab-genai
- Inicjowanie repozytorium Git
git init -b main
- Logowanie się w GitHub CLI
Naciśnijgh auth login
Enter
, aby zaakceptować domyślne opcje, i postępuj zgodnie z instrukcjami w narzędzie CLI GitHub, w tym:- Na które konto chcesz się zalogować?
GitHub.com
- Jaki jest preferowany protokół do operacji Git na tym hoście?
HTTPS
- Uwierzytelnianie Git za pomocą danych logowania do GitHuba?
Y
(pomiń, jeśli ta opcja się nie wyświetla). - Jak chcesz uwierzytelnić GitHub CLI?
Login with a web browser
- Skopiuj kod jednorazowy
- Otwórz stronę https://github.com/login/device.
- Wklej kod jednorazowy
- Kliknij Autoryzuj GitHub.
- Zaloguj się
- Na które konto chcesz się zalogować?
- Sprawdź, czy jesteś zalogowany(-a):
Jeśli udało Ci się zalogować, powinna zostać wyświetlona Twoja nazwa użytkownika GitHub.gh api user -q ".login"
- Tworzenie zmiennej
GITHUB_USERNAME
GITHUB_USERNAME=$(gh api user -q ".login")
- Sprawdź, czy utworzysz zmienną środowiskową:
Jeśli udało Ci się utworzyć zmienną, powinna ona zwrócić nazwę użytkownika GitHuba.echo ${GITHUB_USERNAME}
- Utwórz puste repozytorium GitHub o nazwie
codelab-genai
: Jeśli pojawi się błąd:gh repo create codelab-genai --private
Masz już repozytorium o nazwieGraphQL: Name already exists on this account (createRepository)
codelab-genai
. Aby kontynuować ten samouczek, masz 2 opcje:- Usuń istniejące repozytorium GitHub
- Utwórz repozytorium o innej nazwie i pamiętaj, aby zmienić ją w kolejnych poleceniach.
- Dodaj repozytorium
codelab-genai
jako repozytorium zdalneorigin
:git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai
9. Udostępnianie kodu
- Sprawdź, czy jesteś w odpowiednim katalogu:
cd ~/codelab-genai
- Dodaj wszystkie pliki w bieżącym katalogu do tego zatwierdzenia:
git add .
- Utwórz pierwsze potwierdzenie:
git commit -m "add http server"
- Wypchnij zatwierdzenie do gałęzi
main
repozytoriumorigin
: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ń
- Pozostaw otwartą kartę Edytor Cloud Shell. Wrócimy do tej karty później.
- W nowej karcie otwórz stronę Cloud Run.
- Wybierz odpowiedni projekt Google Cloud w konsoli
.
- Kliknij POŁĄCZ REPOSITORYUM.
- Kliknij SKONFIGUREWANIE Z CLOUD BUILD
- .
- Jako Dostawca repozytorium
- wybierz GitHub.
- Jeśli nie jesteś zalogowany(-a) na konto GitHub w przeglądarce, zaloguj się, podając swoje dane logowania.
- Kliknij kolejno Uwierzytelnij i Dalej.
- Po zalogowaniu się na stronie Cloud Run zobaczysz komunikat Aplikacja na GitHubie nie jest zainstalowana w żadnym Twoim repozytorium.
- 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.
- Jako repozytorium
- wybierz
- Jeśli repozytorium jest nieobecne, kliknij link Zarządzaj połączonymi repozytoriami.
your-user-name/codelab-genai
. - W polu Gałąź pozostaw wartość
^main$
. - 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
iFunction target
) bez zmian.
- Pozostaw pozostałe pola (
- Kliknij Zapisz.
- Jako Dostawca repozytorium
- Przewiń w dół do sekcji Uwierzytelnianie.
- Kliknij Zezwalaj na nieuwierzytelnione wywołania.
- 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.
- Otwórz Edytor Cloud Shell.
- Jeśli terminal nie pojawia się u dołu ekranu, otwórz go:
- Kliknij menu z 3 kreskami
- Kliknij Terminal.
- Kliknij Nowy terminal
.
- Kliknij menu z 3 kreskami
- 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}'
- Aby wyświetlić wszystkie identyfikatory projektów, użyj:
- Format:
- Jeśli pojawi się pytanie o autoryzację, kliknij Autoryzuj, aby kontynuować.
- Powinien wyświetlić się ten komunikat:
Jeśli widziszUpdated property [core/project].
WARNING
i pojawia się pytanieDo you want to continue (Y/N)?
, prawdopodobnie nieprawidłowo wpisano identyfikator projektu. NaciśnijN
, naciśnijEnter
i spróbuj ponownie uruchomić poleceniegcloud config set project
.
Dodawanie Genkit i Vertex AI do aplikacji
- Wróć do terminala Cloud Shell na dole ekranu.
- Upewnij się, że nadal jesteś w prawidłowym katalogu:
cd ~/codelab-genai
- Zainstaluj pakiet SDK Genkit dla Node.js:
npm install @genkit-ai/ai
- Zainstaluj pakiet SDK Genkit dla Node.js na potrzeby Vertex AI:
npm install @genkit-ai/vertexai
- Ponownie otwórz plik
index.js
w edytorze Cloud Shellcloudshell edit ~/codelab-genai/index.js
- 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}`); });
- Upewnij się, że nadal jesteś w odpowiednim katalogu w Cloud Shell:
cd ~/codelab-genai
- Aby wypchnąć nową wersję aplikacji do lokalnego repozytorium Git, uruchom te polecenia:
git add . git commit -m "add latest changes"
- Prześlij zmiany do GitHuba:
git push
- 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
- Wróć do terminala Cloud Shell na dole ekranu.
- Upewnij się, że nadal jesteś w prawidłowym katalogu:
cd ~/codelab-genai
- Utwórz folder
prompts
, aby przechowywać prompty:mkdir prompts
- Aby utworzyć pierwszy prompt, utwórz plik
animal-facts.prompt
:touch prompts/animal-facts.prompt
- Otwórz plik
animal-facts.prompt
w edytorze Cloud Shell:cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
- 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.
- Otwórz plik
index.js
w edytorze Cloud Shell:cloudshell edit ~/codelab-genai/index.js
- 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}`); });
- Upewnij się, że nadal jesteś w odpowiednim katalogu w Cloud Shell:
cd ~/codelab-genai
- Aby wypchnąć nową wersję aplikacji do lokalnego repozytorium Git, uruchom te polecenia:
git add . git commit -m "add latest changes"
- Prześlij zmiany do GitHuba:
git push
- 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
.
- Wróć do terminala Cloud Shell na dole ekranu.
- Upewnij się, że nadal jesteś w prawidłowym katalogu:
cd ~/codelab-genai
- Otwórz plik
animal-facts.prompt
w edytorze Cloud Shell:cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
- 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}}
- Upewnij się, że nadal jesteś w odpowiednim katalogu w Cloud Shell:
cd ~/codelab-genai
- Aby wypchnąć nową wersję aplikacji do lokalnego repozytorium Git, uruchom te polecenia:
git add . git commit -m "add latest changes"
- Prześlij zmiany do GitHuba:
git push
- 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:
- Genkit Docs: Pierwsze kroki
- Codelab do dodania możliwości monitorowania do aplikacji Node.js: Praktyczne techniki monitorowania aplikacji z generatywną AI w JavaScriptzie
- Codelab dodawania frontendu do aplikacji za pomocą Next.js: Automatyczne wdrażanie aplikacji internetowej Next.js opartej na generative AI z kontrolą wersji do Cloud Run
- Codelab pokazujący, jak używać wywoływania funkcji: Jak używać wywoływania funkcji Gemini z Cloud Run
- Codelab, w którym dowiesz się, jak używać AI do przetwarzania treści wideo: Jak za pomocą interfejsu Cloud Run Jobs Video Intelligence API przetwarzać filmy według scen