Déployer des applications rapidement avec App Design Center

1. Introduction

Dans cet atelier de programmation, vous allez apprendre à déployer une application Full Stack à l'aide de Application Design Center (ADC) de Google Cloud. Vous allez déployer l'application "The Cymbal London Concierge", qui comprend un frontend Vue 3, un backend FastAPI et un serveur MCP contenant les données de l'application.

ADC vous permet de définir visuellement l'architecture de votre application et de la déployer en tant qu'unité unique, en gérant automatiquement les dépendances et les connexions.

Objectifs de l'atelier

Configurez App Design Center.
Assemblez visuellement les composants de l'application.
Déployez l'architecture de l'application.
Vérifiez que l'application est en cours d'exécution.
Vérifiez que l'application a été enregistrée dans App Hub.
Vérifiez les métriques, les traces et les journaux de l'application dans Application Monitoring.

Prérequis

Un navigateur Web tel que Chrome.
Un projet Google Cloud avec facturation activée.

Cet atelier de programmation s'adresse aux développeurs de tous niveaux, y compris aux débutants.

Durée estimée : 45 minutes Coût estimé : moins de 2 $

2. Configuration

Configuration du projet

Créer un projet Google Cloud

Dans la console Google Cloud, sur la page de sélection du projet, sélectionnez ou créez un projet Google Cloud.
Assurez-vous que la facturation est activée pour votre projet Cloud. Découvrez comment vérifier si la facturation est activée sur un projet.

Démarrer Cloud Shell

Cloud Shell est un environnement de ligne de commande exécuté dans Google Cloud et fourni avec les outils nécessaires.

Cliquez sur Activer Cloud Shell en haut de la console Google Cloud.
Une fois connecté à Cloud Shell, vérifiez votre authentification :
```
gcloud auth list
```
Vérifiez que votre projet est configuré :
```
gcloud config get project
```

Si votre projet n'est pas défini comme prévu, définissez-le :

export PROJECT_ID=<YOUR_PROJECT_ID>
gcloud config set project $PROJECT_ID

3. Configurer App Design Center

Avant de pouvoir assembler votre application, vous devez configurer votre espace de travail dans ADC.

Dans la console Google Cloud, recherchez Application Design Center et accédez-y.
Si vous utilisez ADC pour la première fois dans ce projet, un écran de configuration s'affiche.
Cliquez sur Accéder à la configuration.

Configurer App Design Center

Vous serez invité à activer les API requises si elles ne le sont pas déjà. Cliquez sur Activer pour continuer.

Activer les API

4. Découvrir les fonctionnalités d'ADC

Dans cette tâche, vous allez découvrir les composants principaux d'ADC : les espaces, les catalogues et les modèles.

ADC Spaces

Un espace est un emplacement permettant de créer des modèles et de déployer des applications. Chaque espace appartient à un projet Google Cloud. ADC crée un espace par défaut lors de la configuration initiale, mais vous pouvez ensuite créer d'autres espaces dans différentes régions.

Pour afficher vos espaces via le terminal, procédez comme suit :

Cliquez sur Ouvrir l'éditeur dans la barre d'outils Cloud Shell ou utilisez le terminal.
Exécutez la commande suivante :

gcloud alpha design-center spaces list \
--project="your PROJECT ID" \
--location=us-central1

Vous devriez obtenir un résultat semblable à celui-ci, indiquant que l'espace par défaut est présent pour la région.

createTime: '20XXXX-XX-XXT09:19:29.456016967Z'
displayName: default-space
enableGcpSharedTemplates: true
name: projects/your-project-id/locations/us-central1/spaces/default-space

5. Assembler le modèle

Dans cette étape, vous allez endosser le rôle d'ingénieur de l'équipe de plate-forme. Votre objectif est de créer un modèle réutilisable, sécurisé et conforme pour les applications agentiques de votre organisation. Vous ajouterez des composants et configurerez des restrictions pour vous assurer que toute application déployée à partir de ce modèle respecte les règles cloud de votre entreprise.

1. Créer un design

Dans la console ADC, cliquez sur Modèles > Créer un modèle.
Nommez votre modèle simple-3-tier-agentic-app, car il sera utilisé pour déployer l'application Cymbal London Concierge et d'autres applications similaires.

2. Ajouter le serveur MCP de données

Ce composant gère les interactions avec la base de données et la recherche vectorielle.

Cliquez sur Ajouter un composant > Cloud Run (service). Si vous cliquez sur ce composant, un ID de composant s'affiche en haut à droite. Elle se présentera au format suivant : cloud-run-1. Nous pouvons le remplacer par data-mcp-server en le modifiant dans la vue Code (dont nous parlerons plus tard), mais laissons-le tel quel.
Saisissez le nom du service : data-mcp-server.
Sous Afficher les paramètres avancés, définissez Membres sur allUsers. (Remarque : Dans un environnement de production, vous limiterez probablement cette autorisation, mais nous l'utilisons ici pour simplifier l'atelier de programmation.)
Sous Afficher les paramètres avancés, définissez ACCÈS VPC sur Sortie : PRIVATE_RANGES_ONLY.
Si vous le souhaitez, sous Afficher les paramètres avancés, décochez Activer le side-car Prometheus.
Cliquez sur Enregistrer.

3. Ajouter le backend de l'agent

Il s'agit de l'application FastAPI qui orchestre le comportement agentique.

Cliquez sur Ajouter un composant > Cloud Run (service).
Nommez-le agent-backend.
Sous Afficher les champs avancés, cochez Créer un compte de service, puis ajoutez les rôles suivants sous Rôles du compte de service dans le projet, un par un :
- roles/monitoring.metricWriter
- roles/logging.logWriter
- roles/cloudtrace.agent
- roles/telemetry.writer
- roles/serviceusage.serviceUsageConsumer. Ces rôles permettront à l'agent d'utiliser Cloud Monitoring, Cloud Logging et Cloud Trace. Configuration de la conformité : l'équipe de plate-forme applique le principe du moindre privilège en listant explicitement les rôles requis.
Sous Afficher les paramètres avancés, définissez Membres sur allUsers.
Sous Afficher les paramètres avancés, définissez ACCÈS VPC sur Sortie : PRIVATE_RANGES_ONLY.
Si vous le souhaitez, sous Afficher les paramètres avancés, décochez Activer le side-car Prometheus.
Connectez agent-backend à data-mcp-server en faisant glisser une connexion de agent-backend à data-mcp-server.
Cliquez sur Enregistrer.

4. Ajouter l'interface

Interface utilisateur frontend

Cliquez sur Ajouter un composant > Cloud Run (service).
Saisissez le nom du service : frontend.
Sous Afficher les paramètres avancés, décochez Créer un compte de service.
Sous Afficher les paramètres avancés, définissez Ingress sur INGRESS_TRAFFIC_INTERNAL_LOADBALANCER. Configuration de la conformité : l'accès public direct au conteneur de l'interface est bloqué, ce qui force le trafic à passer par l'équilibreur de charge.
Sous Afficher les paramètres avancés, définissez Membres sur allUsers.
Si vous le souhaitez, sous Afficher les paramètres avancés, décochez Activer le side-car Prometheus.
Cliquez sur Enregistrer.
Connectez frontend à agent-backend en faisant glisser une connexion de frontend à agent-backend.

5. Ajouter un composant Vertex AI

Cliquez sur Add Component (Ajouter un composant) > Vertex AI.
Nommez-le vertex-ai.
Connectez-le à agent-backend et à data-mcp-server en faisant glisser deux connexions de vertex-ai vers agent-backend et data-mcp-server, respectivement. Les rôles aiplatform.user seront déjà attribués aux comptes de service de agent-backend et data-mcp-server, car ils sont associés au composant Vertex AI.

6. Ajouter l'équilibreur de charge mondial

L'équilibreur de charge expose votre frontend à l'Internet public. Dans ADC, il est divisé en un composant de backend et un composant d'interface.

A. Ajouter le backend de l'équilibreur de charge

Cliquez sur **Ajouter un composant** > Équilibrage de charge Cloud mondial (backend).
Nommez-le galb-backend.
Cliquez sur Ajouter une connexion et connectez-la à frontend.

B. Ajouter l'interface de l'équilibreur de charge

Cliquez sur **Add Component > Global Cloud Load Balancing (Frontend) (Ajouter un composant > Équilibrage de charge Cloud mondial (frontend)).
Nommez-le galb-frontend.
Cliquez sur Ajouter une connexion et connectez-la à galb-backend.
Connectez galb-frontend à galb-backend en faisant glisser une connexion de galb-frontend à galb-backend.

Modèle d'application

Un catalogue vous permet de partager des modèles d'application dans différents espaces, ce qui permet de gérer l'architecture. Un catalogue sert de dépôt central pour les modèles créés et approuvés pour le partage par l'équipe de plate-forme. Le partage de catalogues entre espaces permet d'éviter les efforts inutiles pour les projets courants et de réduire les temps de démarrage.

Ajoutez maintenant votre modèle au catalogue :

Cliquez sur l'onglet Catalogues.
Cliquez sur Ajouter des modèles et sélectionnez le modèle simple-3-tier-agentic-app.
Cliquez sur Ajouter au catalogue.

Vous trouverez des modèles à trois endroits : Modèles Google (modèles prédéfinis), Modèles partagés (partagés dans votre organisation) et Modèles (plans personnalisés dans votre espace).

6. Déployer l'application

Il est maintenant temps de jouer le rôle d'un développeur d'applications qui souhaite utiliser ce modèle pour déployer l'application cymbal-london-concierge.

Dans la console ADC, rouvrez le modèle dans l'onglet Modèles, puis cliquez sur le bouton Configurer l'application.
Cliquez sur Créer une application.
Configurer l'application :
- Nom de l'application : cymbal-london-concierge
- Deployment project (Projet de déploiement) : ID de votre projet
- Région : us-central1
- Attributs d'entrée > Environnement : Development
- Attributs d'entrée > Criticité : Low
Cliquez sur Create Application (Créer une application). Pour un déploiement en production, sélectionnez "Production" pour l'environnement et "High" (Élevée) pour la criticité. Il s'agit de tags qui aideront vos équipes SRE et opérationnelles à trier et à hiérarchiser les tâches liées aux problèmes qui surviennent.
La page des détails du déploiement devrait s'ouvrir avec le modèle d'application. Étant donné qu'il ne s'agit que d'un modèle, nous devons encore ajouter une configuration spécifique à notre application.
Configurons l'interface. Cliquez sur le composant frontend.
1. Cliquez sur Conteneurs > Modifier le conteneur.
2. Nous devons remplacer l'image de conteneur générique par celle que nous souhaitons utiliser pour notre application.
3. Définissez Image de conteneur sur : us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/frontend:codelab-c2c6-v1
4. Définissez le port http1 sur 80.
5. Définissez les variables d'environnement suivantes :
  - API_BASE_URL : module.cloud-run-2.service_uri (assurez-vous que cloud-run-2 est le nom du composant de backend de l'agent. Si ce n'est pas le cas, remplacez-le par le nom réel du composant.)
6. Cliquez sur Enregistrer.
Configurons le backend de l'agent. Cliquez sur le composant agent-backend.
1. Cliquez sur Conteneurs > Modifier le conteneur.
2. Nous devons remplacer l'image de conteneur générique par celle que nous souhaitons utiliser pour notre application.
3. Définissez Image du conteneur sur : us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/agent:codelab-c2c6-v1
4. Définissez les variables d'environnement suivantes :
5. GOOGLE_CLOUD_PROJECT :
6. GOOGLE_CLOUD_LOCATION : us-central1
7. DATA_BACKEND_URL : module.cloud-run-1.service_uri (assurez-vous que cloud-run-1 correspond au nom du composant du serveur mcp de données. Si ce n'est pas le cas, remplacez-le par le nom réel du composant.)
8. Définissez le port http1 sur 8000.
9. Cliquez sur Enregistrer.
Configurons le serveur MCP de données. Cliquez sur le composant data-mcp-server.
1. Cliquez sur Conteneurs > Modifier le conteneur.
2. Nous devons remplacer l'image de conteneur générique par celle que nous souhaitons utiliser pour notre application.
3. Définissez Image du conteneur sur : us-central1-docker.pkg.dev/o11y-movie-guru/london-travel-agency/data_mcp:codelab-c2c6-v1
4. Définissez les variables d'environnement suivantes :
5. GOOGLE_CLOUD_PROJECT :
6. GOOGLE_CLOUD_LOCATION : us-central1
7. DB_TYPE : sqlite
8. EMBEDDING_MODEL : text-embedding-005
9. Définissez le port http1 sur 8002.
10. Cliquez sur Enregistrer.
Dans un scénario de production réel, vous configurerez également une base de données telle que CloudSQL ou AlloyDB, et vous fournirez la chaîne de connexion à la base de données pour le serveur MCP de données. Toutefois, pour cet atelier, nous allons utiliser une base de données en mémoire. Vous rendrez également le serveur MCP et la base de données privés et accessibles uniquement depuis le backend de l'agent ou depuis le réseau.
Cliquez sur le bouton Code en haut de la page pour afficher le code Terraform de l'application. Vous pouvez également télécharger le code Terraform de l'application en cliquant sur le bouton Obtenir le code pour le stocker dans votre base de code.
Cliquez sur le bouton Deploy (Déployer) en haut à droite de la page pour déployer l'application.
Sur la page de déploiement, vous serez invité à créer un compte de service pour le pipeline de déploiement ou à en choisir un existant. Cliquez sur Créer un compte de service (un nom sera automatiquement saisi), puis sur Continuer. La création d'un compte de service prend quelques secondes.

Créer un compte de service

Une fois le compte de service créé, la page s'actualise et la mention "Sélectionner un compte de service" est cochée.

Compte de service créé

Cliquez ensuite sur Déployer en bas de la page.
Cette opération prend quelques minutes. Une fois le déploiement terminé, une coche verte s'affiche à côté de chaque composant. Vous pouvez également vérifier l'état du déploiement en cliquant sur le bouton Lien vers les journaux, qui ouvre les journaux Cloud Build. L'affichage du bouton peut prendre quelques minutes.

![Deployment Logs](./img/10b_logs.png)

Vous pouvez consulter les journaux de compilation Cloud pour connaître l'état du déploiement ou les éventuelles erreurs survenues lors du déploiement de l'application. Vous pouvez également accéder directement aux journaux Cloud Build en recherchant Cloud Build dans la console Google Cloud, puis en cliquant sur Historique. Le déploiement de l'application prendra environ cinq à huit minutes.

![Cloud Build](./img/10c_cloudbuild.png)

Une fois le déploiement terminé, une coche verte s'affiche à côté du champ État du déploiement.

![Deployment Complete](./img/11_deployed.png)

7. Valider l'application

Testons si l'agent est actif. Dans la section Sorties de la page "Informations sur le déploiement", vous verrez l'URL du composant d'interface. Copiez cette URL et collez-la dans votre navigateur. Veillez à utiliser http et non https. Acceptez également les éventuels avertissements qui s'affichent dans le navigateur, car l'interface utilise le protocole HTTP.

Discutez avec l'application et demandez-lui de créer un itinéraire pour un voyage à Londres.

Interface

8. App Hub et surveillance des applications

Dans la console ADC, cliquez sur le bouton Afficher l'application dans l'App Hub en haut à droite de la page.

App Hub

L'application s'ouvre dans App Hub. App Hub est un outil centralisé qui vous permet d'afficher et de gérer toutes vos applications. Il vous permet de passer d'une vue axée sur les ressources à une vue axée sur les applications. Lorsque vous créez une application à l'aide d'ADC, une application est automatiquement créée dans App Hub. Vous devriez voir toutes les charges de travail et tous les services qui composent l'application listés ici. Au lieu de considérer les ressources dans le cloud comme des ressources individuelles, vous pouvez les considérer comme faisant partie d'une même application, ce qui simplifie la gestion et la gouvernance.