Esegui automaticamente il deployment dell'applicazione web Genkit Node.js di IA generativa dal controllo delle versioni a Cloud Run

1. Panoramica

Eseguire il deployment di un'applicazione web per la prima volta può sembrare difficile. Anche dopo il primo deployment, se il processo richiede troppo lavoro, potresti evitare di eseguire il deployment di nuove versioni dell'applicazione. Con il deployment continuo, puoi eseguire facilmente il deployment automatico delle modifiche dell'applicazione.

In questo lab scrivi un'applicazione web e configuri Cloud Run per eseguire automaticamente il deployment dell'applicazione quando viene apportata una modifica al codice sorgente dell'applicazione. Quindi, modifica l'applicazione ed esegui nuovamente il deployment.

Cosa imparerai a fare

  • Scrivere un'applicazione web con l'editor di Cloud Shell
  • Memorizza il codice dell'applicazione su GitHub
  • Esegui automaticamente il deployment dell'applicazione in Cloud Run
  • Aggiungere l'IA generativa all'applicazione utilizzando Genkit
  • Gestire i prompt LLM utilizzando la libreria dotprompt

2. Prerequisiti

  1. Se non hai ancora un Account Google, devi crearne uno.
    • Utilizza un account personale anziché un account di lavoro o della scuola. Gli account di lavoro e della scuola potrebbero avere limitazioni che ti impediscono di attivare le API necessarie per questo lab.
  2. Se non hai ancora un account GitHub, devi crearne uno

3. Configurazione del progetto

  1. Accedi alla console Google Cloud.
  2. Attiva la fatturazione in Cloud Console.
    • Il completamento di questo lab dovrebbe costare meno di 1 $in risorse Cloud.
    • Per eliminare le risorse ed evitare ulteriori addebiti, puoi seguire i passaggi alla fine di questo lab.
    • I nuovi utenti sono idonei per la prova senza costi di 300$.
    • Parteciperai a un evento sull'IA generativa per gli sviluppatori? Potrebbe essere disponibile un credito di 1$.
  3. Crea un nuovo progetto o scegli di riutilizzare un progetto esistente.

4. Apri editor di Cloud Shell

  1. Vai a Cloud Shell Editor.
  2. Se il terminale non viene visualizzato nella parte inferiore dello schermo, aprilo:
    • Fai clic sul menu a tre linee Icona del menu di navigazione.
    • Fai clic su Terminale.
    • Fai clic su Nuovo terminaleAprire un nuovo terminale nell'editor di Cloud Shell.
  3. Nel terminale, imposta il progetto con questo comando:
    • Formato:
      gcloud config set project [PROJECT_ID]
      
    • Esempio:
      gcloud config set project lab-project-id-example
      
    • Se non ricordi l'ID progetto:
      • Puoi elencare tutti gli ID progetto con:
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
        
      Impostare l'ID progetto nel terminale dell'editor di Cloud Shell
  4. Se ti viene chiesto di concedere l'autorizzazione, fai clic su Autorizza per continuare. Fai clic per autorizzare Cloud Shell
  5. Dovresti vedere questo messaggio:
    Updated property [core/project].
    
    Se vedi un WARNING e ti viene chiesto Do you want to continue (Y/N)?, è probabile che tu abbia inserito l'ID progetto in modo errato. Premi N, premi Enter e prova a eseguire di nuovo il comando gcloud config set project.

5. Abilita API

Nel terminale, abilita le API:

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

Il completamento di questo comando potrebbe richiedere alcuni minuti, ma alla fine dovrebbe essere visualizzato un messaggio di operazione riuscita simile a questo:

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

6. Configura Git

  1. Imposta l'email dell'utente Git globale:
    git config --global user.email "you@example.com"
    
  2. Imposta il nome utente Git globale:
    git config --global user.name "Your Name"
    
  3. Imposta il ramo predefinito di Git globale su main:
    git config --global init.defaultBranch main
    

7. Scrivi il tuo codice

Per scrivere un'applicazione in Node.js:

  1. Vai alla home directory:
    cd ~
    
  2. Crea la directory codelab-genai:
    mkdir codelab-genai
    
  3. Vai alla directory codelab-genai:
    cd codelab-genai
    
  4. Crea un file index.js:
    touch index.js
    
  5. Crea il file package.json:
    npm init es6 -y
    
  6. Aggiungi express come dipendenza
    npm install express
    
  7. Aggiungi il file .gitignore per impedire il commit di node_modules
    echo node_modules/ >> .gitignore
    
  8. Apri il file index.js nell'editor di Cloud Shell:
    cloudshell edit index.js
    
    ora nella parte superiore dello schermo dovrebbe apparire un file vuoto. Qui puoi modificare il file index.js. Mostra che il codice deve essere inserito nella sezione superiore dello schermo
  9. Copia il seguente codice e incollalo nel file index.js aperto:
    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}`);
    });
    
    Dopo alcuni secondi, Cloud Shell Editor salverà automaticamente il codice. Questo codice risponde alle richieste HTTP con il saluto "Hello world!".

Il codice iniziale dell'applicazione è stato completato ed è pronto per essere archiviato nel controllo versione.

8. Crea un repository

  1. Torna al terminale Cloud Shell nella parte inferiore dello schermo.
  2. Assicurati di essere ancora nella directory corretta:
    cd ~/codelab-genai
    
  3. Inizializza il repository Git
    git init -b main
    
  4. Accedi a GitHub CLI
    gh auth login
    
    Premi Enter per accettare le opzioni predefinite e segui le istruzioni nello strumento GitHub CLI, tra cui:
    1. A quale account vuoi accedere? GitHub.com
    2. Qual è il protocollo che preferisci per le operazioni Git su questo host? HTTPS
    3. Autenticare Git con le credenziali di GitHub? Y (salta se non viene visualizzata).
    4. Come vuoi autenticare GitHub CLI? Login with a web browser
    5. Copia il codice monouso
    6. Apri https://github.com/login/device.
    7. Incolla il codice monouso
    8. Fai clic su Autorizza GitHub.
    9. Completa l'accesso
  5. Verifica di aver eseguito l'accesso:
    gh api user -q ".login"
    
    Se hai eseguito correttamente l'accesso, dovresti visualizzare il tuo nome utente GitHub.
  6. Crea una GITHUB_USERNAMEvariabile
    GITHUB_USERNAME=$(gh api user -q ".login")
    
  7. Verifica di aver creato la variabile di ambiente:
    echo ${GITHUB_USERNAME}
    
    Se hai creato correttamente la variabile, dovresti visualizzare il tuo nome utente GitHub.
  8. Crea un repository GitHub vuoto denominato codelab-genai:
    gh repo create codelab-genai --private
    
    Se ricevi l'errore:
    GraphQL: Name already exists on this account (createRepository)
    
    Significa che hai già un repository denominato codelab-genai. Hai due opzioni per continuare a seguire questo tutorial:
  9. Aggiungi il repository codelab-genai come repository remoto origin:
    git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai
    

9. Condividere il codice

  1. Verifica di trovarti nella directory corretta:
    cd ~/codelab-genai
    
  2. Aggiungi tutti i file nella directory corrente a questo commit:
    git add .
    
  3. Crea il primo commit:
    git commit -m "add http server"
    
  4. Esegui il push del commit sul ramo main del repository origin:
    git push -u origin main
    

Puoi eseguire questo comando e visitare l'URL risultante per visualizzare il codice dell'applicazione su GitHub:

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. Configurare i deployment automatici

  1. Lascia aperta la scheda dell'editor di Cloud Shell. Torneremo a questa scheda in seguito.
  2. In una nuova scheda, vai alla pagina Cloud Run.
  3. Seleziona il progetto Google Cloud corretto nella console Menu a discesa del progetto nella console Google Cloud
  4. Fai clic su COLLEGA REPO.
  5. Fai clic su CONFIGURA CON CLOUD BUILD
      .
    1. Seleziona GitHub come Provider di repository
      • Se non hai eseguito l'accesso al tuo account GitHub nel browser, accedi con le tue credenziali.
    2. Fai clic su Autenticare e poi su Continua.
    3. Dopo aver eseguito l'accesso, nella pagina Cloud Run viene visualizzato il messaggio L'app GitHub non è installata in nessun repository.
    4. Fai clic sul pulsante INSTALLA GOOGLE CLOUD BUILD.
      • Nella pagina Configurazione dell'installazione, seleziona Seleziona solo i repository e scegli il repository codelab-genai che hai creato tramite la CLI.
      • Fai clic su Installa.
      • Nota: se hai molti repository GitHub, il caricamento potrebbe richiedere alcuni minuti.
    5. Seleziona your-user-name/codelab-genai come Repository
      • Se il repository non è presente, fai clic sul link Gestisci i repository connessi.
    6. Lascia Ramo su ^main$
    7. Fai clic su Go, Node.js, Python, Java, .NET Core, Ruby o PHP tramite i buildpack di Google Cloud
      • Lascia invariati gli altri campi (Build context directory, Entrypoint e Function target).
    8. Fai clic su Salva.
  6. Scorri verso il basso fino ad Autenticazione.
  7. Fai clic su Consenti chiamate non autenticate.
  8. Fai clic su CREA.

Al termine della compilazione (che richiederà diversi minuti), esegui questo comando e visita l'URL risultante per visualizzare l'applicazione in esecuzione:

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. Modificare il codice

Torna all'editor di Cloud Shell

Se hai ancora aperto Cloud Shell Editor, puoi saltare questi passaggi.

  1. Vai a Cloud Shell Editor.
  2. Se il terminale non viene visualizzato nella parte inferiore dello schermo, aprilo:
    • Fai clic sul menu a tre linee Icona del menu di navigazione.
    • Fai clic su Terminale.
    • Fai clic su Nuovo terminaleAprire un nuovo terminale nell'editor di Cloud Shell.
  3. Nel terminale, imposta il progetto con questo comando:
    • Formato:
      gcloud config set project [PROJECT_ID]
      
    • Esempio:
      gcloud config set project lab-project-id-example
      
    • Se non ricordi l'ID progetto:
      • Puoi elencare tutti gli ID progetto con:
        gcloud projects list | awk '/PROJECT_ID/{print $2}'
        
      Impostare l'ID progetto nel terminale dell'editor di Cloud Shell
  4. Se ti viene chiesto di concedere l'autorizzazione, fai clic su Autorizza per continuare. Fai clic per autorizzare Cloud Shell
  5. Dovresti vedere questo messaggio:
    Updated property [core/project].
    
    Se vedi un WARNING e ti viene chiesto Do you want to continue (Y/N)?, è probabile che tu abbia inserito l'ID progetto in modo errato. Premi N, premi Enter e prova a eseguire di nuovo il comando gcloud config set project.

Aggiungere Vertex AI all'applicazione

  1. Torna al terminale Cloud Shell nella parte inferiore dello schermo.
  2. Assicurati di essere ancora nella directory corretta:
    cd ~/codelab-genai
    
  3. Installa l'SDK Genkit per Node.js:
    npm install @genkit-ai/ai
    
  4. Installa l'SDK Genkit Node.js per Vertex AI:
    npm install @genkit-ai/vertexai
    
  5. Installa l'SDK Google Auth per Node.js:
    npm install google-auth-library
    
  6. Riapri index.js nell'editor di Cloud Shell
    cloudshell edit ~/codelab-genai/index.js
    
  7. Sostituisci il codice nel file index.js con:
    import express from 'express';
    const app = express();
    
    import { generate } from '@genkit-ai/ai';
    import { gemini15Flash, vertexAI } from '@genkit-ai/vertexai';
    
    import { GoogleAuth } from 'google-auth-library';
    const auth = new GoogleAuth();
    
    app.get('/', async (req, res) => {
        const project = await auth.getProjectId();
    
        const animal = req.query.animal || 'dog';
        const prompt = `Give me 10 fun facts about ${animal}. Return this as html without backticks.`
        const result = await generate({
            plugins: [
                vertexAI({ projectId: project, location: 'us-central1' }),
            ],
            model: gemini15Flash,
            prompt,
        });
        const html = result.text;
        res.send(html);
    });
    
    const port = process.env.PORT || 8080;
    app.listen(port, () => {
        console.log(`codelab-genai: listening on port ${port}`);
    });
    

12. Esegui di nuovo il deployment

  1. Assicurati di essere ancora nella directory corretta in Cloud Shell:
    cd ~/codelab-genai
    
  2. Esegui questi comandi per eseguire il commit di una nuova versione dell'applicazione nel repository Git locale:
    git add .
    git commit -m "add latest changes"
    
  3. Esegui il push delle modifiche su GitHub:
    git push
    
  4. Al termine della compilazione, esegui questo comando e vai all'applicazione di cui è stato eseguito il deployment:
    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"
    

Potrebbero essere necessari alcuni minuti prima che la compilazione venga completata e tu possa visualizzare le modifiche.

Puoi visualizzare la cronologia di tutte le revisioni qui: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions

13. (Facoltativo) Controlla l'utilizzo di Vertex AI

Come per altri servizi Google Cloud, puoi controllare le operazioni di Vertex AI. Gli audit log ti aiutano a rispondere a domande quali "Chi ha fatto cosa, dove e quando?". Gli audit log amministrativi per Vertex AI sono abilitati per impostazione predefinita. Per eseguire il controllo delle richieste di generazione di contenuti, devi abilitare gli audit log di accesso ai dati:

  1. Nella console Google Cloud, vai alla pagina Log di controllo:

    Se utilizzi la barra di ricerca per trovare questa pagina, seleziona il risultato con il sottotitolo IAM e amministrazione.
  2. Assicurati che il progetto Google Cloud esistente sia quello in cui crei l'applicazione Cloud Run.
  3. Nella tabella Configurazione degli audit log di accesso ai dati, seleziona Vertex AI API dalla colonna Servizio.
  4. Nella scheda Tipi di log, seleziona i tipi di log di controllo dell'accesso ai dati Admin read e Data read.
  5. Fai clic su Salva.

Dopo averlo attivato, potrai visualizzare i log di controllo per ogni chiamata dell'applicazione. Per visualizzare i log di controllo con i dettagli delle chiamate:

  1. Torna all'applicazione di cui è stato eseguito il deployment e aggiorna la pagina per attivare il log.
  2. Nella console Google Cloud, vai alla pagina Esplora log:

  3. Nella finestra della query, digita:
    LOG_ID("cloudaudit.googleapis.com%2Fdata_access")
    protoPayload.serviceName="aiplatform.googleapis.com"
    
  4. Fai clic su Esegui query.

I log di controllo acquisiscono l'utilizzo dell'API Vertex AI, ma non ti consentono di osservare i dati relativi al carico di lavoro, come i prompt o i dettagli della risposta.

14. (Facoltativo) Aumenta l'osservabilità del tuo carico di lavoro di IA

Gli audit log non acquisiscono informazioni relative al carico di lavoro. Per aumentare l'osservabilità dei carichi di lavoro, devi registrare esplicitamente queste informazioni. Per farlo, puoi utilizzare il tuo framework di logging preferito. I passaggi riportati di seguito mostrano come eseguire questa operazione utilizzando il meccanismo di logging nativo di Node.js.

  1. Riapri index.js nell'editor di Cloud Shell
    cloudshell edit ~/codelab-genai/index.js
    
  2. Dopo la chiamata a await generativeModel.generateContent(prompt) (riga 19), aggiungi la seguente riga:
        console.log(JSON.stringify({
            severity: 'DEBUG',
            message: 'Content is generated',
            prompt: prompt,
            response: resp.response,
        }));
    
    Questo codice scrive in stdout informazioni sui contenuti generati utilizzando il formato logging strutturato. Un agente di logging in Cloud Run acquisisce l'output stampato su stdout e scrive questo formato in Cloud Logging.
  3. Riapri Cloud Shell e digita il seguente comando per assicurarti di trovarti nella directory corretta:
    cd ~/codelab-genai
    
  4. Esegui il commit delle modifiche:
    git commit -am "observe generated content"
    
  5. Esegui il push delle modifiche su GitHub per attivare il ricollocamento della versione modificata:
    git push
    

Dopo il deployment della nuova versione, puoi osservare le informazioni di debug sulle chiamate a Vertex AI.

Per visualizzare i log dell'applicazione:

  1. Nella console Google Cloud, vai alla pagina Esplora log:

  2. Nella finestra della query, digita:
    LOG_ID("run.googleapis.com%2Fstdout")
    severity=DEBUG
    
  3. Fai clic su Esegui query.

Il risultato della query mostra i log con il prompt e la risposta di Vertex AI, incluse le "valutazioni di sicurezza" che possono essere utilizzate per monitorare le pratiche di sicurezza.

15. (Facoltativo) Pulizia

Sebbene non siano previsti addebiti per Cloud Run quando il servizio non è in uso, ti potrebbero comunque essere addebitati i costi di archiviazione dell'immagine container in Artifact Registry. Puoi eliminare il progetto Cloud per evitare addebiti. L'eliminazione del progetto Cloud interrompe la fatturazione per tutte le risorse utilizzate al suo interno.

Se vuoi, elimina il progetto:

gcloud projects delete $GOOGLE_CLOUD_PROJECT

Ti consigliamo inoltre di eliminare le risorse non necessarie dal disco CloudShell. Puoi:

  1. Elimina la directory del progetto codelab:
    rm -rf ~/codelab-genai
    
  2. Attenzione. Questa azione non può essere annullata. Se vuoi eliminare tutto su Cloud Shell per liberare spazio, puoi eliminare l'intera home directory. Assicurati che tutto ciò che vuoi conservare sia salvato altrove.
    sudo rm -rf $HOME
    

16. Complimenti

In questo lab hai scritto un'applicazione web e configurato Cloud Run per eseguire automaticamente il deployment dell'applicazione quando è stata apportata una modifica al codice sorgente dell'applicazione. Poi hai modificato l'applicazione e ne hai eseguito nuovamente il deployment.

Se ti è piaciuto questo lab, puoi riprovarlo in un altro linguaggio di programmazione o framework:

Se ti interessa partecipare a uno studio di ricerca sull'esperienza utente (UX) per migliorare i prodotti che utilizzi oggi, registrati qui.

Ecco alcune opzioni per continuare a imparare: