Automatyczne wdrażanie aplikacji internetowej Next.js z generatywną AI z kontroli 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ą Vertex AI

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 Next.js:

  1. Przejdź do katalogu domowego:
    cd ~
  2. Utwórz nową aplikację codelab-genai Next.js:
    npx create-next-app@latest codelab-genai \
    --ts \
    --eslint \
    --tailwind \
    --no-src-dir \
    --app \
    --no-import-alias
  3. Jeśli pojawi się prośba o zainstalowanie create-next-app, naciśnij Enter, aby kontynuować:
    Need to install the following packages:
create-next-app@14.2.14
Ok to proceed? (y)
  4. Przejdź do katalogu codelab-genai:
    cd codelab-genai
  5. Otwórz plik page.tsx w edytorze Cloud Shell:
    cloudshell edit app/page.tsx
    Plik powinien pojawić się w górnej części ekranu. Tutaj możesz edytować plik page.tsx. Pokaż, że kod znajduje się w górnej części ekranu
  6. Usuń istniejący kod. Skopiuj ten kod i wklej go do otwartego pliku page.tsx:
    import React from "react";

export default function Home() {
return (
    <main>
        Hello World!
    </main>
);
}
    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/app/page.tsx \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 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 Vertex AI SDK dla Node.js:
    npm install @google-cloud/vertexai
  4. Zainstaluj pakiet Google Auth SDK dla Node.js:
    npm install google-auth-library
  5. Tworzenie app/actions.ts w terminalu
    touch app/actions.ts
  6. Otwórz plik actions.ts w edytorze Cloud Shell
    cloudshell edit app/actions.ts
  7. Skopiuj ten kod i wklej go do otwartego pliku actions.ts:
    'use server'

import { VertexAI } from '@google-cloud/vertexai';
import { GoogleAuth } from 'google-auth-library';
const auth = new GoogleAuth();

export async function getFunFactsAction(animal: string) {
    const project = await auth.getProjectId();

    const vertex = new VertexAI({ project: project });
    const generativeModel = vertex.getGenerativeModel({
        model: 'gemini-1.5-flash'
    });

    const prompt = `Give me 10 fun facts about ${animal || 'dog'}. 
            Return as json as an array in the format ['fact 1', 'fact 2']
            Remove backticks and other markdown formatting.`;
    const resp = await generativeModel.generateContent(prompt);

    if (!resp.response.candidates) {
        throw new Error('Did not receive response candidates.')
    }

    console.log({ text: resp.response.candidates[0].content.parts[0].text })

    const factArray = JSON.parse(resp.response.candidates[0].content.parts[0].text || '');
    return factArray;
};
  8. Otwórz plik page.tsx w edytorze Cloud Shell
    cloudshell edit ~/codelab-genai/app/page.tsx
  9. Zastąp kod w pliku page.tsx tym kodem:
    'use client'

import React, { useState } from "react";
import { getFunFactsAction } from "./actions";

export default function Home() {
    const [animal, setAnimal] = useState('');
    const [funFacts, setFunFacts] = useState<string[]>([]);
    async function getNewFunFacts() {
        const funFacts = await getFunFactsAction(animal);
        setFunFacts(funFacts);
    }
    return (
        <main>
            <h1 className="text-xl">Animal Fun Facts!</h1>
            <label className="text-lg p-2 m-2">Animal</label>
            <input
                placeholder="dog"
                value={animal}
                onChange={(e) => setAnimal(e.target.value)}
                className="text-black border-2 p-2 m-2 rounded"
            />
            <button
                onClick={getNewFunFacts}
                className="font-bold border-2 p-2 m-2 rounded hover:bg-white hover:text-black"
            >
                Get New Fun Facts
            </button>
            <ul className="list-disc list-inside">
                {funFacts.map(function (thing) {
                    return <li key={thing}>{thing}</li>
                })}
            </ul>
        </main>
    );
}

12. Wdróż ponownie

  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) Sprawdzanie korzystania z Vertex AI

Podobnie jak w przypadku innych usług Google Cloud, możesz przeprowadzić audyt operacji Vertex AI. Logi kontrolne pomagają odpowiedzieć na pytania „kto, co, gdzie i kiedy?”. Logi kontrolne administracyjne Vertex AI są domyślnie włączone. Aby sprawdzić żądania generowania treści, musisz włączyć logi kontrolne dostępu do danych:

  1. W konsoli Google Cloud otwórz stronę Logi audytu:

    Jeśli do znalezienia tej strony użyjesz paska wyszukiwania, wybierz wynik z podtytułem Administracja.
  2. Upewnij się, że tworzysz aplikację Cloud Run w istniejącym projekcie Google Cloud.
  3. W tabeli Konfiguracja logów kontrolnych dostępu do danych znajdź kolumnę Usługa i kliknij Vertex AI API.
  4. Na karcie Typy logów wybierz typy logów kontrolnych Dostęp do danych: Admin read i Data read.
  5. Kliknij Zapisz.

Po włączeniu tej opcji będziesz mieć dostęp do dzienników kontrolnych dotyczących każdego wywołania aplikacji. Aby wyświetlić dzienniki kontrolne z informacjami o wywołaniu, wykonaj te czynności:

  1. Wróć do wdrożonej aplikacji i odśwież stronę, aby wywołać dziennik.
  2. W konsoli Google Cloud otwórz stronę Eksplorator logów:

  3. W oknie zapytania wpisz:
    LOG_ID("cloudaudit.googleapis.com%2Fdata_access")
protoPayload.serviceName="aiplatform.googleapis.com"
  4. Kliknij Uruchom zapytanie.

W logach kontroli rejestrowane jest korzystanie z interfejsu Vertex AI API, ale nie zawierają one danych związanych z obciążeniem, takich jak prompty czy szczegóły odpowiedzi.

14. (Opcjonalnie) Zwiększanie możliwości dostrzegalności zbioru zadań AI

Logi audytu nie zawierają informacji związanych z obciążeniem pracą. Aby zwiększyć możliwości monitorowania obciążeń, musisz jawnie rejestrować te informacje. W tym celu możesz użyć ulubionego frameworku rejestrowania. W następujących krokach pokażemy, jak to zrobić za pomocą natywnego mechanizmu rejestrowania Node.js.

  1. Ponownie otwórz plik actions.ts w edytorze Cloud Shell
    cloudshell edit ~/codelab-genai/app/actions.ts
  2. Po wywołaniu funkcji await generativeModel.generateContent(prompt) (wiersz 19) dodaj ten wiersz:
        console.log(JSON.stringify({
        severity: 'DEBUG',
        message: 'Content is generated',
        prompt: prompt,
        response: resp.response,
    }));
    Ten kod zapisuje w stdout informacje o wygenerowanych treściach w formacie zorganizowanego rejestrowania. Agent rejestrowania w Cloud Run rejestruje dane wyjściowe wydrukowane w formacie stdout i zapisuje je w Cloud Logging.
  3. Ponownie otwórz Cloud Shell i wpisz to polecenie, aby sprawdzić, czy jesteś we właściwym katalogu:
    cd ~/codelab-genai
  4. Zatwierdź zmiany:
    git commit -am "observe generated content"
  5. Prześlij zmiany do GitHuba, aby wywołać ponowne wdrożenie zmodyfikowanej wersji:
    git push

Po wdrożeniu nowej wersji możesz obserwować informacje debugowania dotyczące wywołań Vertex AI.

Aby wyświetlić dzienniki aplikacji:

  1. W konsoli Google Cloud otwórz stronę Eksplorator logów:

  2. W oknie zapytania wpisz:
    LOG_ID("run.googleapis.com%2Fstdout")
severity=DEBUG
  3. Kliknij Uruchom zapytanie.

Wynik zapytania zawiera logi z promptem i odpowiedzią Vertex AI, w tym „oceny bezpieczeństwa”, które można wykorzystać do monitorowania praktyk bezpieczeństwa.

15. (Opcjonalnie) Czyszczenie

Cloud Run nie nalicza opłat, gdy usługa nie jest używana, ale może zostać pobrana należność za przechowywanie obrazu kontenera w Artifact Registry. Aby uniknąć opłat, możesz usunąć projekt Cloud. Usunięcie projektu Cloud powoduje zaprzestanie naliczania opłat za wszystkie zasoby używane w tym projekcie.

Jeśli chcesz, możesz usunąć projekt:

gcloud projects delete $GOOGLE_CLOUD_PROJECT

Możesz też usunąć niepotrzebne zasoby z dysku CloudShell. Możesz:

  1. Usuń katalog projektu ćwiczeń z programowania: 
    rm -rf ~/codelab-genai
  2. Ostrzeżenie! Tej czynności nie można cofnąć. Jeśli chcesz usunąć wszystko z Cloud Shell, aby zwolnić miejsce, możesz usunąć cały katalog domowy. Upewnij się, że wszystko, co chcesz zachować, jest zapisane gdzie indziej. 
    sudo rm -rf $HOME

16. 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: