1. Panoramica
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. Poi 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
- Se non hai ancora un Account Google, devi crearne uno.
- Utilizzi 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.
- Se non hai ancora un account GitHub, devi crearne uno
- Utilizza un account GitHub esistente, se ne hai uno. GitHub ha maggiori probabilità di bloccare un nuovo account come spam.
- Configura l'autenticazione a due fattori sul tuo account GitHub per ridurre le probabilità che il tuo account venga contrassegnato come spam.
3. Configurazione del progetto
- Accedi alla console Google Cloud.
- 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$.
- Crea un nuovo progetto o scegli di riutilizzare un progetto esistente.
- Verifica che la fatturazione sia attivata in I miei progetti in Fatturazione Cloud
- Se nel nuovo progetto è presente
Billing is disabled
nella colonnaBilling account
:- Fai clic sui tre puntini nella colonna
Actions
- Fai clic su Modifica fatturazione.
- Seleziona l'account di fatturazione che vuoi utilizzare
- Fai clic sui tre puntini nella colonna
- Se partecipi a un evento di IA generativa per sviluppatori, l'account probabilmente si chiamerà Account di fatturazione di prova della piattaforma Google Cloud
- Se nel nuovo progetto è presente
4. Apri editor di Cloud Shell
- Vai a Cloud Shell Editor.
- Se il terminale non viene visualizzato nella parte inferiore dello schermo, aprilo:
- Fai clic sul menu a tre linee
.
- Fai clic su Terminale.
- Fai clic su Nuovo terminale
.
- Fai clic sul menu a tre linee
- 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}'
- Puoi elencare tutti gli ID progetto con:
- Formato:
- Se ti viene chiesto di concedere l'autorizzazione, fai clic su Autorizza per continuare.
- Dovresti vedere questo messaggio:
Se vedi unUpdated property [core/project].
WARNING
e ti viene chiestoDo you want to continue (Y/N)?
, è probabile che tu abbia inserito l'ID progetto in modo errato. PremiN
, premiEnter
e prova a eseguire di nuovo il comandogcloud 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
- Imposta l'indirizzo email dell'utente Git globale:
git config --global user.email "you@example.com"
- Imposta il nome utente Git globale:
git config --global user.name "Your Name"
- 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:
- Vai alla home directory:
cd ~
- Crea la directory
codelab-genai
:mkdir codelab-genai
- Vai alla directory
codelab-genai
:cd codelab-genai
- Crea un file
index.js
:touch index.js
- Crea il file
package.json
:npm init es6 -y
- Aggiungi
express
come dipendenzanpm install express
- Aggiungi il file
.gitignore
per impedire il commit dinode_modules
echo node_modules/ >> .gitignore
- Apri il file
index.js
nell'editor di Cloud Shell: Nella parte superiore dello schermo dovrebbe apparire un file vuoto. Qui puoi modificare il filecloudshell edit index.js
index.js
. - Copia il seguente codice e incollalo nel file
index.js
aperto: Dopo alcuni secondi, l'editor di Cloud Shell salverà automaticamente il codice. Questo codice risponde alle richieste HTTP con il saluto "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}`); });
Il codice iniziale dell'applicazione è stato completato ed è pronto per essere archiviato nel controllo versione.
8. Crea un repository
- Torna al terminale Cloud Shell nella parte inferiore dello schermo.
- Assicurati di essere ancora nella directory corretta:
cd ~/codelab-genai
- Inizializza il repository Git
git init -b main
- Accedi a GitHub CLI
Premigh auth login
Enter
per accettare le opzioni predefinite e segui le istruzioni nello strumento GitHub CLI, tra cui:- A quale account vuoi accedere?
GitHub.com
- Qual è il protocollo che preferisci per le operazioni Git su questo host?
HTTPS
- Autenticare Git con le credenziali di GitHub?
Y
(salta se non viene visualizzata). - Come vuoi autenticare GitHub CLI?
Login with a web browser
- Copia il codice monouso
- Apri https://github.com/login/device.
- Incolla il codice monouso
- Fai clic su Autorizza GitHub.
- Completa l'accesso
- A quale account vuoi accedere?
- Verifica di aver eseguito l'accesso:
Se hai eseguito correttamente l'accesso, dovresti visualizzare il tuo nome utente GitHub.gh api user -q ".login"
- Crea una variabile
GITHUB_USERNAME
GITHUB_USERNAME=$(gh api user -q ".login")
- Verifica di aver creato la variabile di ambiente:
Se hai creato correttamente la variabile, dovrebbe essere visualizzato il tuo nome utente GitHub.echo ${GITHUB_USERNAME}
- Crea un repository GitHub vuoto denominato
codelab-genai
: Se ricevi il messaggio di errore:gh repo create codelab-genai --private
In questo caso, hai già un repository denominatoGraphQL: Name already exists on this account (createRepository)
codelab-genai
. Hai due opzioni per continuare a seguire questo tutorial:- Elimina il repository GitHub esistente
- Crea un repository con un nome diverso e ricordati di modificarlo nei comandi seguenti.
- Aggiungi il repository
codelab-genai
come repository remotoorigin
:git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai
9. Condividere il codice
- Verifica di trovarti nella directory corretta:
cd ~/codelab-genai
- Aggiungi tutti i file nella directory corrente a questo commit:
git add .
- Crea il primo commit:
git commit -m "add http server"
- Esegui il push del commit nel ramo
main
del repositoryorigin
: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
- Lascia aperta la scheda dell'editor di Cloud Shell. Torneremo a questa scheda in un secondo momento.
- In una nuova scheda, vai alla pagina Cloud Run.
- Seleziona il progetto Google Cloud corretto nella console
- Fai clic su COLLEGA REPO.
- Fai clic su CONFIGURA CON CLOUD BUILD
- .
- Seleziona GitHub come Provider di repository
- Se non hai eseguito l'accesso al tuo account GitHub nel browser, accedi con le tue credenziali.
- Fai clic su Autenticare e poi su Continua.
- Dopo aver eseguito l'accesso, nella pagina Cloud Run viene visualizzato il messaggio L'app GitHub non è installata in nessun repository.
- 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.
- Seleziona
your-user-name/codelab-genai
come Repository- Se il repository non è presente, fai clic sul link Gestisci i repository connessi.
- Lascia Ramo su
^main$
- 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
eFunction target
).
- Lascia invariati gli altri campi (
- Fai clic su Salva.
- Seleziona GitHub come Provider di repository
- Scorri verso il basso fino ad Autenticazione.
- Fai clic su Consenti chiamate non autenticate.
- 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.
- Vai a Cloud Shell Editor.
- Se il terminale non viene visualizzato nella parte inferiore dello schermo, aprilo:
- Fai clic sul menu a tre linee
.
- Fai clic su Terminale.
- Fai clic su Nuovo terminale
.
- Fai clic sul menu a tre linee
- 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}'
- Puoi elencare tutti gli ID progetto con:
- Formato:
- Se ti viene chiesto di concedere l'autorizzazione, fai clic su Autorizza per continuare.
- Dovresti vedere questo messaggio:
Se vedi unUpdated property [core/project].
WARNING
e ti viene chiestoDo you want to continue (Y/N)?
, è probabile che tu abbia inserito l'ID progetto in modo errato. PremiN
, premiEnter
e prova a eseguire di nuovo il comandogcloud config set project
.
Aggiungere Genkit e Vertex AI all'applicazione
- Torna al terminale Cloud Shell nella parte inferiore dello schermo.
- Assicurati di essere ancora nella directory corretta:
cd ~/codelab-genai
- Installa l'SDK Genkit per Node.js:
npm install @genkit-ai/ai
- Installa l'SDK Genkit Node.js per Vertex AI:
npm install @genkit-ai/vertexai
- Riapri
index.js
nell'editor di Cloud Shellcloudshell edit ~/codelab-genai/index.js
- Sostituisci il codice nel file
index.js
con: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}`); });
- Assicurati di essere ancora nella directory corretta in Cloud Shell:
cd ~/codelab-genai
- 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"
- Esegui il push delle modifiche su GitHub:
git push
- Al termine della compilazione, esegui questo comando e visita l'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
12. (Facoltativo) Utilizzare i file .prompt con Genkit
- Torna al terminale Cloud Shell nella parte inferiore dello schermo.
- Assicurati di essere ancora nella directory corretta:
cd ~/codelab-genai
- Crea una cartella
prompts
per archiviare i prompt:mkdir prompts
- Crea un file
animal-facts.prompt
per creare il tuo primo prompt:touch prompts/animal-facts.prompt
- Apri il file
animal-facts.prompt
nell'editor di Cloud Shell:cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
- Modifica
animal-facts.prompt
e incolla il seguente codice:--- 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.
- Apri il file
index.js
nell'editor di Cloud Shell:cloudshell edit ~/codelab-genai/index.js
- Sostituisci il codice nel file
index.js
con: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}`); });
- Assicurati di essere ancora nella directory corretta in Cloud Shell:
cd ~/codelab-genai
- 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"
- Esegui il push delle modifiche su GitHub:
git push
- Al termine della compilazione, esegui questo comando e visita l'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) Utilizzare i prompt di sistema
Questo passaggio presuppone che tu abbia già aggiunto i file .prompt
nel passaggio precedente.
- Torna al terminale Cloud Shell nella parte inferiore dello schermo.
- Assicurati di essere ancora nella directory corretta:
cd ~/codelab-genai
- Apri il file
animal-facts.prompt
nell'editor di Cloud Shell:cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
- Modifica
animal-facts.prompt
e incolla il seguente codice:--- 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}}
- Assicurati di essere ancora nella directory corretta in Cloud Shell:
cd ~/codelab-genai
- 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"
- Esegui il push delle modifiche su GitHub:
git push
- Al termine della compilazione, esegui questo comando e visita l'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
14. 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:
Ecco alcune opzioni per continuare a imparare:
- Documentazione di Genkit: Guida introduttiva
- Codelab per aggiungere l'osservabilità all'applicazione Node.js: Tecniche di osservabilità pratiche per l'applicazione di AI generativa in JavaScript
- Codelab per aggiungere un frontend all'applicazione con Next.js: Esegui automaticamente il deployment dell'applicazione web Next.js di IA generativa dal controllo versione a Cloud Run
- Codelab che mostra come utilizzare le chiamate di funzione: Come utilizzare le chiamate di funzione Gemini con Cloud Run
- Codelab per utilizzare l'AI per elaborare i contenuti video: Come utilizzare l'API Video Intelligence di Cloud Run Jobs per elaborare un video scena per scena