Cette page a été traduite par l'API Cloud Translation.

Déployer automatiquement une application Web Genkit Node.js d'IA générative à partir d'un système de contrôle des versions vers Cloud Run

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 complexe, vous risquez d'éviter de déployer de nouvelles versions de votre application. Le déploiement continu vous permet de déployer facilement et automatiquement les modifications apportées à 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. Ensuite, vous modifiez 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 sur Cloud Run

Ajouter l'IA générative à votre application à l'aide de Genkit
Gérer les requêtes LLM à l'aide de la bibliothèque dotprompt

2. Prérequis

Si vous n'avez pas encore de compte Google, vous devez en créer un.
- Utilisez un compte personnel au lieu d'un compte professionnel ou scolaire. Il est possible que des restrictions s'appliquent aux comptes professionnels et scolaires, ce qui vous empêche d'activer les API nécessaires pour cet atelier.
Si vous n'avez pas encore de compte GitHub, vous devez en créer un.
- Utilisez un compte GitHub existant, si vous en avez un. GitHub est plus susceptible de bloquer un nouveau compte comme 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.
- Cet atelier devrait vous coûter moins de 1 USD en ressources Cloud.
- Vous pouvez suivre les étapes à la fin de cet atelier pour supprimer les ressources et éviter ainsi que des frais supplémentaires ne vous soient facturés.
- Les nouveaux utilisateurs peuvent bénéficier d'un essai sans frais pour un crédit de 300$.
- Vous participez à un événement "Gen AI for Devs" ? Un crédit de 1$ peut être disponible.
Créez un projet ou réutilisez-en un existant.
Vérifiez que la facturation est activée dans Mes projets de la section Facturation Cloud
- Si votre nouveau projet indique Billing is disabled dans la colonne Billing account :
  1. Cliquez sur les trois points dans la colonne Actions.
  2. Cliquez sur Modifier la facturation.
  3. Sélectionnez le compte de facturation que vous souhaitez utiliser.
- Si vous participez à un événement Gen AI for Devs, le compte s'intitulera probablement Compte de facturation d'essai de Google Cloud Platform.

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
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 la commande suivante :
```
gcloud projects list | awk '/PROJECT_ID/{print $2}'
```
Si vous êtes invité à autoriser l'accès, cliquez sur Autoriser pour continuer.
Le message suivant doit s'afficher :
```
Updated property [core/project].
```
Si le message WARNING s'affiche et que vous êtes invité à Do you want to continue (Y/N)?, cela signifie probablement que vous avez saisi l'ID du projet de manière incorrecte. Appuyez sur N, puis sur Enter, et réessayez d'exécuter la commande gcloud 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 qui suit 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 l'adresse e-mail de votre utilisateur git global :
```
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 Node.js, procédez comme suit :

Accédez au répertoire d'accueil :
```
cd ~
```
Créez le répertoire codelab-genai :
```
mkdir codelab-genai
```
Accédez au répertoire codelab-genai :
```
cd codelab-genai
```
Créez un fichier index.js :
```
touch index.js
```
Créez le fichier package.json :
```
npm init es6 -y
```
Ajouter express en tant que dépendance
```
npm install express
```
Ajouter un fichier .gitignore pour éviter de valider node_modules
```
echo node_modules/ >> .gitignore
```
Ouvrez le fichier index.js dans l'éditeur Cloud Shell :
```
cloudshell edit index.js
```
Un fichier vide devrait maintenant s'afficher en haut de l'écran. C'est ici que vous pouvez modifier ce fichier index.js.

Copiez le code suivant et collez-le dans le fichier index.js ouvert :

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}`);
});

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!".

Votre code initial pour votre application est terminé et prêt à être stocké dans le 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
```
Connectez-vous à GitHub CLI.
```
gh auth login
```
Appuyez sur Enter pour accepter les options par défaut et suivez les instructions de l'outil GitHub CLI, y compris :
1. À quel compte souhaitez-vous vous connecter ? GitHub.com
2. Quel est votre protocole préféré pour les opérations Git sur cet hôte ? HTTPS
3. Authentifier Git avec vos identifiants GitHub ? Y (Ignorez cette étape si cette option n'apparaît pas.)
4. Comment souhaitez-vous authentifier GitHub CLI ? Login with a web browser
5. Copiez votre code à usage unique
6. Ouvrez https://github.com/login/device.
7. Collez votre code unique.
8. Cliquez sur Autoriser GitHub.
9. Finaliser votre connexion
Vérifiez que vous êtes connecté :
```
gh api user -q ".login"
```
Si vous êtes connecté, votre nom d'utilisateur GitHub devrait s'afficher.

Créer une variable GITHUB_USERNAME

GITHUB_USERNAME=$(gh api user -q ".login")

Vérifiez que vous avez créé la variable d'environnement :
```
echo ${GITHUB_USERNAME}
```
Si vous avez bien créé la variable, votre nom d'utilisateur GitHub devrait s'afficher.
Créez un dépôt GitHub vide nommé codelab-genai :
```
gh repo create codelab-genai --private
```
Si vous recevez l'erreur suivante :
```
GraphQL: Name already exists on this account (createRepository)
```
Vous disposez déjà d'un dépôt nommé codelab-genai. Deux options s'offrent à vous pour continuer à suivre ce tutoriel :
- 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 que dépôt distant origin :

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ôt origin :
```
git push -u origin main
```

Vous pouvez exécuter cette commande et accéder à l'URL obtenue 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/index.js \n\n"

10. Configurer des déploiements automatiques

Laissez l'onglet de l'éditeur Cloud Shell ouvert. Nous reviendrons sur cet onglet plus tard.
Dans un nouvel onglet, accédez à la page Cloud Run.
Sélectionnez le bon projet Google Cloud dans la console .
Cliquez sur CONNECT REPO (Associer le dépôt).
Cliquez sur CONFIGURER AVEC CLOUD BUILD
1. 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.
2. Cliquez sur Authentifier, puis sur Continuer.
3. Après vous être connecté, un message s'affiche sur la page Cloud Run : L'application GitHub n'est installée sur aucun de vos dépôts.
4. Cliquez sur le bouton 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), puis choisissez le dépôt codelab-genai que vous avez créé à l'aide de l'interface de ligne de commande.
  - Cliquez sur Installer.
  - Remarque : Si vous avez beaucoup de dépôts GitHub, le chargement peut prendre quelques minutes.
5. 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.
6. Laissez le champ Branche sur ^main$.
7. 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 et Function target) tels quels.
8. Cliquez sur Enregistrer.
Faites défiler la page vers le bas jusqu'à Authentication (Authentification).
Cliquez sur Autoriser les appels non authentifiés.
Cliquez sur CRÉER.

Une fois la compilation terminée (ce qui prendra plusieurs minutes), exécutez cette commande et accédez à l'URL obtenue 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
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 la commande suivante :
```
gcloud projects list | awk '/PROJECT_ID/{print $2}'
```
Si vous êtes invité à autoriser l'accès, cliquez sur Autoriser pour continuer.
Le message suivant doit s'afficher :
```
Updated property [core/project].
```
Si le message WARNING s'affiche et que vous êtes invité à Do you want to continue (Y/N)?, cela signifie probablement que vous avez saisi l'ID du projet de manière incorrecte. Appuyez sur N, puis sur Enter, et réessayez d'exécuter la commande gcloud config set project.

Ajouter Genkit et 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 Node.js Genkit :
```
npm install @genkit-ai/ai
```
Installez le SDK Node.js Genkit pour Vertex AI :
```
npm install @genkit-ai/vertexai
```

Rouvrez index.js dans l'éditeur Cloud Shell.

cloudshell edit ~/codelab-genai/index.js

Remplacez le code de votre fichier index.js par :

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}`);
});

Assurez-vous d'être 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. Vous ne verrez vos modifications qu'une fois qu'elle sera terminée.

Vous pouvez consulter l'historique de toutes les révisions ici : https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions.

12. (Facultatif) Utiliser des fichiers .prompt avec Genkit

Revenez au terminal Cloud Shell en bas de l'écran.
Vérifiez que vous êtes toujours dans le bon répertoire :
```
cd ~/codelab-genai
```
Créez un dossier prompts pour stocker vos requêtes :
```
mkdir prompts
```
Créez un fichier animal-facts.prompt pour créer votre premier prompt :
```
touch prompts/animal-facts.prompt
```
Ouvrez le fichier animal-facts.prompt dans l'éditeur Cloud Shell :
```
cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
```

Modifiez animal-facts.prompt et collez-y le code suivant :

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

Ouvrez le fichier index.js dans l'éditeur Cloud Shell :
```
cloudshell edit ~/codelab-genai/index.js
```

Remplacez le code de votre fichier index.js par :

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}`);
});

Assurez-vous d'être 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. Vous ne verrez vos modifications qu'une fois qu'elle sera terminée.

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) Utiliser les invites système

Pour cette étape, nous partons du principe que vous avez déjà ajouté des fichiers .prompt lors de l'étape précédente.

Revenez au terminal Cloud Shell en bas de l'écran.
Vérifiez que vous êtes toujours dans le bon répertoire :
```
cd ~/codelab-genai
```
Ouvrez le fichier animal-facts.prompt dans l'éditeur Cloud Shell :
```
cloudshell edit ~/codelab-genai/prompts/animal-facts.prompt
```

Modifiez animal-facts.prompt et collez-y le code suivant :

---
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}}

Assurez-vous d'être 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. Vous ne verrez vos modifications qu'une fois qu'elle sera terminée.

Vous pouvez consulter l'historique de toutes les révisions ici : https://console.cloud.google.com/run/detail/us-central1/codelab-genai/revisions.

14. Félicitations

Dans cet atelier, vous avez écrit une application Web et configuré Cloud Run pour déployer automatiquement votre application lorsqu'une modification était apportée au code source de votre application. Vous avez ensuite modifié votre application et l'avez déployée à nouveau.

Si vous avez apprécié cet atelier, vous pouvez le refaire dans un autre langage ou framework de programmation :

Voici quelques options pour continuer à vous former :

Documentation Genkit : Premiers pas
Atelier de programmation pour ajouter l'observabilité à votre application Node.js : Techniques d'observabilité pratiques pour les applications d'IA générative en JavaScript
Atelier de programmation pour ajouter un frontend à votre application avec Next.js : Déployer automatiquement une application Web d'IA générative Next.js depuis le contrôle des versions vers Cloud Run
Atelier de programmation pour découvrir comment utiliser l'appel de fonction : Utiliser l'appel de fonction Gemini avec Cloud Run
Atelier de programmation pour utiliser l'IA afin de traiter du contenu vidéo : Utiliser l'API Cloud Run Jobs Video Intelligence pour traiter une vidéo scène par scène

Déployer automatiquement une application Web Genkit Node.js d'IA générative à partir d'un système de contrôle des versions vers Cloud Run Restez organisé à l'aide des collections Enregistrez et classez les contenus selon vos préférences.

1. Présentation

Objectifs de l'atelier

2. Prérequis

3. Configuration du projet

4. Ouvrir l'éditeur Cloud Shell

5. Activer les API

6. Configurer Git

7. Rédiger le code

8. Créer un dépôt

9. Partager votre code

10. Configurer des déploiements automatiques

11. Modifier votre code

Revenir à l'éditeur Cloud Shell

Ajouter Genkit et Vertex AI à votre application

12. (Facultatif) Utiliser des fichiers .prompt avec Genkit

13. (Facultatif) Utiliser les invites système

14. Félicitations

Déployer automatiquement une application Web Genkit Node.js d'IA générative à partir d'un système de contrôle des versions vers Cloud Run