1. Présentation
Déployer une application Web pour la première fois peut sembler intimidant. Même après le premier déploiement, si le processus est trop lourd, vous pouvez éviter de déployer de nouvelles versions de votre application. Avec le déploiement continu, vous pouvez facilement déployer automatiquement les modifications de votre application.
Dans cet atelier, vous allez écrire une application Web et configurer Cloud Run pour déployer automatiquement votre application lorsqu'une modification est apportée au code source de votre application. Vous modifiez ensuite votre application et la déployez à nouveau.
Objectifs de l'atelier
- Écrire une application Web avec l'éditeur Cloud Shell
- Stocker le code de votre application dans GitHub
- Déployer automatiquement votre application dans Cloud Run
- Ajouter l'IA générative à votre application à l'aide de Vertex AI
2. Prérequis
- Si vous ne possédez pas encore de compte Google, vous devez en créer un.
- Vous utilisez un compte personnel au lieu d'un compte professionnel ou scolaire. Les comptes professionnels et scolaires peuvent être soumis à des restrictions qui vous empêchent d'activer les API nécessaires à cet atelier.
- Si vous ne possédez pas encore de compte GitHub, vous devez en créer un
- .
- Utilisez un compte GitHub existant, le cas échéant. GitHub est plus susceptible de bloquer un nouveau compte en tant que spam.
- Configurez l'authentification à deux facteurs sur votre compte GitHub pour réduire les risques que votre compte soit marqué comme spam.
3. Configuration du projet
- Connectez-vous à la console Google Cloud.
- Activez la facturation dans la console Cloud.
- La réalisation de cet atelier devrait coûter moins de 1 USD en ressources Cloud.
- Vous pouvez suivre les étapes à la fin de cet atelier pour supprimer des ressources afin d'éviter d'autres frais.
- Les nouveaux utilisateurs peuvent bénéficier d'un essai sans frais pour bénéficier d'un crédit de 300$.
- Vous participez à un événement sur l'IA générative pour les développeurs ? Un crédit de 1$ peut être disponible.
- Créez un projet ou choisissez de réutiliser un projet existant.
- Vérifiez que la facturation est activée dans Mes projets dans la section "Facturation Cloud".
- Si la colonne
Billing account
indiqueBilling is disabled
pour votre nouveau projet:- Cliquez sur les trois points dans la colonne
Actions
. - Cliquez sur Modifier la facturation.
- Sélectionnez le compte de facturation que vous souhaitez utiliser.
- Cliquez sur les trois points dans la colonne
- Si vous participez à un événement sur l'IA de génération pour les développeurs, le compte est probablement nommé Compte de facturation d'essai Google Cloud Platform.
- Si la colonne
4. Ouvrir l'éditeur Cloud Shell
- Accédez à l'éditeur Cloud Shell.
- Si le terminal ne s'affiche pas en bas de l'écran, ouvrez-le:
- Cliquez sur le menu hamburger
.
- Cliquez sur Terminal
- Cliquez sur Nouveau terminal
- Cliquez sur le menu hamburger
- Dans le terminal, définissez votre projet à l'aide de la commande suivante:
- Format :
gcloud config set project [PROJECT_ID]
- Exemple :
gcloud config set project lab-project-id-example
- Si vous ne vous souvenez pas de l'ID de votre projet:
- Vous pouvez lister tous vos ID de projet avec:
gcloud projects list | awk '/PROJECT_ID/{print $2}'
- Vous pouvez lister tous vos ID de projet avec:
- Format :
- Si vous y êtes invité, cliquez sur Autoriser pour continuer.
- Le message suivant doit s'afficher :
Si unUpdated property [core/project].
WARNING
s'affiche et que vous êtes invité à saisirDo you want to continue (Y/N)?
, vous avez probablement saisi l'ID de projet de manière incorrecte. Appuyez surN
, puis surEnter
, puis essayez d'exécuter à nouveau la commandegcloud config set project
.
5. Activer les API
Dans le terminal, activez les API:
gcloud services enable \
run.googleapis.com \
cloudbuild.googleapis.com \
aiplatform.googleapis.com
L'exécution de cette commande peut prendre quelques minutes, mais un message semblable à celui-ci devrait s'afficher pour vous indiquer que l'opération s'est correctement déroulée:
Operation "operations/acf.p2-73d90d00-47ee-447a-b600" finished successfully.
6. Configurer Git
- Définissez votre adresse e-mail utilisateur Git globale:
git config --global user.email "you@example.com"
- Définissez votre nom d'utilisateur Git global:
git config --global user.name "Your Name"
- Définissez votre branche git globale par défaut sur
main
:git config --global init.defaultBranch main
7. Rédiger le code
Pour écrire une application en Svelte:
- Accédez au répertoire d'accueil:
cd ~
- Créez l'application Svelte
codelab-genai
: l'application utilise SvelteKit comme framework de diffusion Web.npx sv create codelab-genai \ --template=minimal \ --types=ts \ --no-add-ons
- Si vous êtes invité à installer le package
sv
, appuyez surEnter
pour continuer:Need to install the following packages: sv@0.6.4 Ok to proceed? (y)
- Lorsque vous êtes invité à choisir un gestionnaire de paquets, sélectionnez
npm
, puis appuyez surEnter
:Which package manager do you want to install dependencies with? │ ○ None │ ● npm │ ○ yarn │ ○ pnpm │ ○ bun
- Accédez au répertoire
codelab-genai
:cd codelab-genai
- Ouvrez le fichier
+page.svelte
dans l'éditeur Cloud Shell: Un fichier devrait maintenant s'afficher en haut de l'écran. C'est là que vous pouvez modifier ce fichiercloudshell edit src/routes/+page.svelte
+page.svelte
. - Supprimez le code existant. Copiez le code suivant et collez-le dans le fichier
+page.svelte
ouvert: Au bout de quelques secondes, l'éditeur Cloud Shell enregistre automatiquement votre code. Ce code répond aux requêtes HTTP avec notre message d'accueil "Hello world!".<script lang="ts"> let greeting="Hello, World!" </script> <main> {greeting} </main>
Le code initial de votre application est terminé et prêt à être stocké dans un système de contrôle des versions.
8. Créer un dépôt
- Revenez au terminal Cloud Shell en bas de l'écran.
- Vérifiez que vous êtes toujours dans le bon répertoire:
cd ~/codelab-genai
- Initialiser votre dépôt Git
git init -b main
- Se connecter à la GitHub CLI
Appuyez surgh auth login
Enter
pour accepter les options par défaut et suivez les instructions de l'outil CLI GitHub, y compris les suivantes:- À quel compte souhaitez-vous vous connecter ?
GitHub.com
- Quel protocole préférez-vous pour les opérations Git sur cet hôte ?
HTTPS
- Authentifier Git avec vos identifiants GitHub ?
Y
(ignorez cette étape si elle ne s'affiche pas). - Comment souhaitez-vous authentifier la CLI GitHub ?
Login with a web browser
- Copiez votre code à usage unique
- Ouvrez https://github.com/login/device.
- Coller votre code unique
- Cliquez sur Autoriser GitHub.
- Connectez-vous
- À quel compte souhaitez-vous vous connecter ?
- Vérifiez que vous êtes connecté:
Si vous êtes bien connecté, votre nom d'utilisateur GitHub devrait s'afficher.gh api user -q ".login"
- Créer une variable
GITHUB_USERNAME
GITHUB_USERNAME=$(gh api user -q ".login")
- Vérifiez que vous avez créé la variable d'environnement:
Si vous avez correctement créé la variable, votre nom d'utilisateur GitHub devrait s'afficher.echo ${GITHUB_USERNAME}
- Créez un dépôt GitHub vide nommé
codelab-genai
: Si vous recevez l'erreur suivante:gh repo create codelab-genai --private
Vous disposez donc déjà d'un dépôt nomméGraphQL: Name already exists on this account (createRepository)
codelab-genai
. Pour continuer à suivre ce tutoriel, vous avez deux options:- Supprimer le dépôt GitHub existant
- Créez un dépôt avec un autre nom et n'oubliez pas de le modifier dans les commandes suivantes.
- Ajoutez le dépôt
codelab-genai
en tant queorigin
distant:git remote add origin https://github.com/${GITHUB_USERNAME}/codelab-genai
9. Partager votre code
- Vérifiez que vous êtes dans le bon répertoire:
cd ~/codelab-genai
- Ajoutez tous les fichiers du répertoire actuel à ce commit:
git add .
- Créez le premier commit:
git commit -m "add http server"
- Transférez votre commit vers la branche
main
du dépôtorigin
:git push -u origin main
Vous pouvez exécuter cette commande et accéder à l'URL générée pour afficher le code de votre application sur GitHub:
echo -e "\n\nTo see your code, visit this URL:\n \
https://github.com/${GITHUB_USERNAME}/codelab-genai/blob/main/src/routes/+page.svelte \n\n"
10. Configurer des déploiements automatiques
- Laissez l'onglet de l'éditeur Cloud Shell ouvert. Nous y reviendrons plus tard.
- Dans un nouvel onglet, accédez à la page Cloud Run.
- Sélectionnez le projet Google Cloud approprié dans la console
.
- Cliquez sur ASSOCIER UN REPO.
- Cliquez sur CONFIGURER AVEC CLOUD BUILD
- .
- Sélectionnez GitHub comme fournisseur de dépôt.
- Si vous n'êtes pas connecté à votre compte GitHub dans le navigateur, connectez-vous avec vos identifiants.
- Cliquez sur Authentifier, puis sur Continuer.
- Après vous être connecté, un message s'affiche sur la page Cloud Run indiquant que l'application GitHub n'est installée sur aucun de vos dépôts.
- Cliquez sur le bouton INSTALL GOOGLE CLOUD BUILD (INSTALLER GOOGLE CLOUD BUILD).
- Sur la page "Installation Setup" (Configuration de l'installation), sélectionnez Only select repositories (Sélectionner uniquement les dépôts) et choisissez le dépôt codelab-genai que vous avez créé à l'aide de la CLI.
- Cliquez sur Installer.
- Remarque: Si vous avez de nombreux dépôts GitHub, le chargement peut prendre quelques minutes.
- Sélectionnez
your-user-name/codelab-genai
comme dépôt- .
- Si le dépôt n'est pas présent, cliquez sur le lien Gérer les dépôts connectés.
- Laissez Branche sur
^main$
. - Cliquez sur Go, Node.js, Python, Java, .NET Core, Ruby ou PHP via les buildpacks Google Cloud
- .
- Laissez les autres champs (
Build context directory
,Entrypoint
etFunction target
) tels quels.
- Laissez les autres champs (
- Cliquez sur Enregistrer.
- Sélectionnez GitHub comme fournisseur de dépôt.
- Faites défiler la page vers le bas jusqu'à Authentification.
- Cliquez sur Autoriser les appels non authentifiés.
- Cliquez sur CRÉER.
Une fois la compilation terminée (ce qui prend plusieurs minutes), exécutez cette commande et accédez à l'URL générée pour afficher votre application en cours d'exécution:
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. Modifier votre code
Revenir à l'éditeur Cloud Shell
Si l'éditeur Cloud Shell est toujours ouvert, vous pouvez ignorer ces étapes.
- Accédez à l'éditeur Cloud Shell.
- Si le terminal ne s'affiche pas en bas de l'écran, ouvrez-le:
- Cliquez sur le menu hamburger
.
- Cliquez sur Terminal
- Cliquez sur Nouveau terminal
- Cliquez sur le menu hamburger
- Dans le terminal, définissez votre projet à l'aide de la commande suivante:
- Format :
gcloud config set project [PROJECT_ID]
- Exemple :
gcloud config set project lab-project-id-example
- Si vous ne vous souvenez pas de l'ID de votre projet:
- Vous pouvez lister tous vos ID de projet avec:
gcloud projects list | awk '/PROJECT_ID/{print $2}'
- Vous pouvez lister tous vos ID de projet avec:
- Format :
- Si vous y êtes invité, cliquez sur Autoriser pour continuer.
- Le message suivant doit s'afficher :
Si unUpdated property [core/project].
WARNING
s'affiche et que vous êtes invité à saisirDo you want to continue (Y/N)?
, vous avez probablement saisi l'ID de projet de manière incorrecte. Appuyez surN
, puis surEnter
, puis essayez d'exécuter à nouveau la commandegcloud config set project
.
Ajouter Vertex AI à votre application
- Revenez au terminal Cloud Shell en bas de l'écran.
- Vérifiez que vous êtes toujours dans le bon répertoire:
cd ~/codelab-genai
- Installez le SDK Vertex AI pour Node.js:
npm install @google-cloud/vertexai
- Installez le SDK Google Auth pour Node.js:
npm install google-auth-library
- Créer
src/routes/facts/+server.ts
dans le terminalmkdir src/routes/facts touch src/routes/facts/+server.ts
- Ouvrir
+server.ts
dans l'éditeur Cloud Shellcloudshell edit src/routes/facts/+server.ts
- Copiez le code suivant et collez-le dans le fichier
+server.ts
ouvert:import { VertexAI } from '@google-cloud/vertexai'; import { GoogleAuth } from 'google-auth-library'; const auth = new GoogleAuth(); const project = await auth.getProjectId(); const getAnimalFacts = async (animal: string): Promise<string> => { 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 }) return JSON.stringify(JSON.parse(resp.response.candidates[0].content.parts[0].text || '[]')); } export async function GET({ url }:{ url:URL}): Promise<Response> { let animal: string = url.searchParams.get('animal') || 'dog'; const animalFacts = await getAnimalFacts(animal); return new Response(animalFacts, { headers: { 'Content-Type': 'application/json' } }); }
- Ouvrir
+page.svelte
dans l'éditeur Cloud Shellcloudshell edit src/routes/+page.svelte
- Remplacez le code de votre fichier
+page.svelte
par:<script lang="ts"> let animal: string = $state(""); let animalFacts: string[] = $state([]); async function getNewFunFacts() { animalFacts = ["(loading...)"]; const response = await fetch(`/facts?animal=${animal}`); animalFacts = await response.json(); } </script> <main> <h1>Animal Fun Facts!</h1> <label for="animal">Animal</label> <input id="animal" placeholder="dog" bind:value={animal} /> <button onclick={getNewFunFacts}> Get New Fun Facts </button> <ul> {#each animalFacts as animalFact} <li>{animalFact}</li> {/each} </ul> </main>
12. Redéployer
- Vérifiez que vous êtes toujours dans le bon répertoire dans Cloud Shell:
cd ~/codelab-genai
- Exécutez ces commandes pour valider une nouvelle version de votre application dans votre dépôt Git local:
git add . git commit -m "add latest changes"
- Transférez les modifications vers GitHub:
git push
- Une fois la compilation terminée, exécutez cette commande et accédez à votre application déployée:
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"
La compilation peut prendre plusieurs minutes avant que vos modifications ne soient appliquées.
Vous pouvez consulter l'historique de toutes les révisions ici: https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions.
13. (Facultatif) Auditer votre utilisation de Vertex AI
Comme pour les autres services Google Cloud, vous pouvez effectuer un audit des opérations Vertex AI. Les journaux d'audit vous aident à répondre aux questions suivantes : "Qui a fait quoi, où et quand ?". Les journaux d'audit d'administration pour Vertex AI sont activés par défaut. Pour auditer les requêtes de génération de contenu, vous devez activer les journaux d'audit des accès aux données:
- Dans la console Google Cloud, accédez à la page Journaux d'audit:
Si vous utilisez la barre de recherche pour trouver cette page, sélectionnez le résultat dont le sous-titre est IAM et administration. - Assurez-vous que le projet Google Cloud existant est celui dans lequel vous créez votre application Cloud Run.
- Dans le tableau Configuration des journaux d'audit des accès aux données, recherchez
Vertex AI API
dans la colonne "Service". - Dans l'onglet Types de journaux, sélectionnez les types de journaux d'audit pour l'accès aux données
Admin read
etData read
. - Cliquez sur Enregistrer.
Une fois l'activation effectuée, vous pourrez consulter les journaux d'audit pour chaque appel de l'application. Pour afficher les journaux d'audit avec les détails des invocations, procédez comme suit:
- Revenez à votre application déployée et actualisez la page pour déclencher le journal.
- Dans la console Google Cloud, accédez à la page Explorateur de journaux:
- Dans la fenêtre de requête, saisissez:
LOG_ID("cloudaudit.googleapis.com%2Fdata_access") protoPayload.serviceName="aiplatform.googleapis.com"
- Cliquez sur Exécuter la requête.
Les journaux d'audit enregistrent l'utilisation de l'API Vertex AI, mais ils ne vous permettent pas d'observer les données liées à la charge de travail, telles que les invites ou les détails de la réponse.
14. (Facultatif) Améliorer l'observabilité de votre charge de travail d'IA
Les journaux d'audit ne collectent pas d'informations sur la charge de travail. Pour améliorer l'observabilité de vos charges de travail, vous devez consigner explicitement ces informations. Pour ce faire, vous pouvez utiliser votre framework de journalisation préféré. Les étapes suivantes montrent comment procéder à l'aide du mécanisme de journalisation natif de Node.js.
- Rouvrir
+server.ts
dans l'éditeur Cloud Shellcloudshell edit src/routes/facts/+server.ts
- Après l'appel de
await generativeModel.generateContent(prompt)
(ligne 17), ajoutez la ligne suivante: Ce code écrit dansconsole.log(JSON.stringify({ severity: 'DEBUG', message: 'Content is generated', prompt: prompt, response: resp.response, }));
stdout
des informations sur le contenu généré à l'aide du format de journalisation structurée. Un agent de journalisation dans Cloud Run capture la sortie imprimée dansstdout
et écrit ce format dans Cloud Logging. - Rouvrez Cloud Shell et saisissez la commande suivante pour vous assurer que vous êtes dans le bon répertoire:
cd ~/codelab-genai
- Effectuez un commit sur les modifications :
git commit -am "observe generated content"
- Transférez les modifications sur GitHub pour déclencher le redéploiement de la version modifiée:
git push
Une fois la nouvelle version déployée, vous pouvez consulter les informations de débogage sur les appels à Vertex AI.
Pour afficher les journaux de votre application, procédez comme suit:
- Dans la console Google Cloud, accédez à la page Explorateur de journaux:
- Dans la fenêtre de requête, saisissez:
LOG_ID("run.googleapis.com%2Fstdout") severity=DEBUG
- Cliquez sur Exécuter la requête.
Le résultat de la requête affiche des journaux avec l'invite et la réponse Vertex AI, y compris des "notes de sécurité" qui peuvent être utilisées pour surveiller les pratiques de sécurité.
15. (Facultatif) Effectuer un nettoyage
Bien que Cloud Run ne facture pas lorsque le service n'est pas utilisé, il se peut que des frais vous soient facturés pour le stockage de l'image de conteneur dans Artifact Registry. Vous pouvez supprimer votre projet Cloud pour éviter des frais. La suppression de votre projet Cloud arrête la facturation de toutes les ressources utilisées dans ce projet.
Si vous le souhaitez, supprimez le projet:
gcloud projects delete $GOOGLE_CLOUD_PROJECT
Vous pouvez également supprimer les ressources inutiles de votre disque cloudshell. Vous pouvez :
- Supprimez le répertoire du projet de l'atelier de programmation:
rm -rf ~/codelab-genai
- Avertissement ! Cette action est irréversible. Si vous souhaitez supprimer tout ce qui se trouve sur votre Cloud Shell pour libérer de l'espace, vous pouvez supprimer l'intégralité de votre répertoire d'accueil. Assurez-vous que tout ce que vous souhaitez conserver est enregistré ailleurs.
sudo rm -rf $HOME
16. Félicitations
Dans cet atelier, vous avez écrit une application Web et configuré Cloud Run pour déployer automatiquement votre application lorsqu'une modification a été apportée au code source de votre application. Vous avez ensuite modifié votre application et l'avez de nouveau déployée.
Si vous avez apprécié cet atelier, vous pouvez le refaire dans un autre langage de programmation ou framework:
Si vous souhaitez participer à une étude de recherche sur l'expérience utilisateur (UX) afin d'améliorer les produits que vous utilisez aujourd'hui, inscrivez-vous ici.
Voici quelques options pour poursuivre votre apprentissage:
- Documentation: utilisez Firebase GenKit comme une abstraction de modèle flexible qui facilite l'intégration de n'importe quelle API de modèle et l'utilisation de modèles gérés par la communauté.
- Atelier de programmation: Déployer une application de chat basée sur Gemini sur Cloud Run
- Utiliser l'appel de fonction Gemini avec Cloud Run
- Utiliser l'API Video Intelligence pour Cloud Run Jobs afin de traiter une vidéo scène par scène
- Atelier à la demande: Intégration de Google Kubernetes Engine