Démarrage rapide : Développer des applications Azure avec l’IA assistée par agent

Dans ce guide de démarrage rapide, utilisez GitHub Copilot pour créer une application React to-do et la déployer sur Azure App Service à l’aide du développement assisté par l’IA. Lors du développement localement, commencez par Copilot mode Plan pour créer un plan d’implémentation détaillé, puis basculez vers le mode agent pour générer et déployer. Lorsque vous utilisez VS Code pour le web, utilisez le mode agent dans l’ensemble. À la fin, vous avez une expérience pratique avec :

• GitHub Copilot Plan mode pour rechercher votre projet et créer des plans d’implémentation (développement local)
• Le mode agent de GitHub Copilot pour créer, configurer et déployer une application complète
• Compétences Azure pour améliorer Copilot grâce à des connaissances et des outils spécifiques à Azure
• Une application de to-do opérationnelle s’exécutant sur Azure App Service
• Un endpoint d’API pour votre application de tâches
• Azure Developer CLI (azd) pour approvisionner et déployer des ressources Azure à partir d’un modèle d’infrastructure

Le mode plan permet de Copilot rechercher votre base de code et de créer un plan d’implémentation structuré avant d’écrire du code, en vous assurant que vos exigences sont claires et que votre approche est saine. Le mode Agent permet Copilot exécuter de manière autonome des commandes, de modifier des fichiers et d’effectuer une itération sur les erreurs. Vous fournissez l’objectif et Copilot détermine les étapes.

Prerequisites

• Un compte Azure avec un abonnement actif. Créez-en un gratuitement.
• Un abonnement GitHub Copilot.

# Visual Studio Code
code --version

# GitHub Copilot
code --list-extensions | grep -i github.copilot

# Node.js
node --version

# Azure Developer CLI
azd version

# Azure Skills
code --list-extensions | grep -i ms-azuretools.vscode-azure-mcp-server

Créer un espace de travail

Activer les compétences Azure

Azure Skills fournit des Copilot avec une expertise Azure organisée, des flux de travail et des garde-fous afin que l’agent puisse prendre des décisions éclairées sur les services, l’infrastructure et le déploiement Azure. L’extension mcP Azure installe une extension complémentaire qui apporte les compétences Azure dans VS Code. Ensemble, ils configurent le Azure MCP Server, Foundry MCP et la couche de compétences complètes automatiquement. Pour plus d’informations, consultez le référentiel Azure Skills Plugin.

Planifier votre application

Plan mode permet de Copilot rechercher votre projet et de générer un plan d’implémentation détaillé avant d’écrire du code. Vous passez en revue et affinez le plan, puis passez-le en mode agent pour l’exécution.

1. Ouvrez la vue Copilot Chat en sélectionnant l’icône de conversation dans la barre d’activité.

2. Connectez-vous à GitHub Copilot si ce n'est pas déjà fait. Sélectionnez le bouton GitHub Copilot logo Sign-in dans la barre d’état Visual Studio Code et suivez les invites pour vous authentifier auprès de votre compte GitHub.

3. Sélectionnez Plan dans le menu déroulant des agents du volet de chat, ou tapez /plan suivi de la description de votre tâche.

   Copiez et collez l’invite suivante dans le panneau de conversation Copilot :

   /plan 
   Create a Vite + React single-page application (SPA) to-do app
   with the following features:
   - Add, remove, and mark complete/incomplete to-do items.
   - Use localStorage to persist to-do items between sessions.
   - Choose low-cost Azure resources.
   - Create a deployment template for Azure Developer CLI (azd).
   - Create a README file with instructions on how to test, run, and deploy the app.
   

   Note

   Si vous n'avez pas encore configuré GitHub Copilot, vous êtes invité à vous connecter à votre compte GitHub et à configurer Copilot avant de pouvoir envoyer l'invite. Si vous n'avez pas d'abonnement Copilot, vous êtes associé à un compte gratuit qui vous donne une limite mensuelle d'achèvements et d'interactions de conversation.

4. Répondez à toutes les questions précises que l’agent du plan demande après avoir recherché votre tâche. Par exemple : TypeScript ou JavaScript pour l’application React ? Quelle approche de style doit être utilisée ? Le modèle azd doit-il inclure un flux de travail CI/CD GitHub Actions ?

5. Passez en revue le plan généré. Votre plan ressemble à ceci :

   Plan: Vite + React To-Do SPA with Azure Deployment
   A Vite + React + TypeScript SPA scaffolded inside todo-app, with localStorage persistence,
   and deployed to Azure Static Web Apps (Free tier) via azd. 
   No backend required — all state is client-side.
   ... 
   

   L’agent de plan produit un résumé général, des étapes d’implémentation et des étapes de vérification. Vous pouvez soumettre des prompts de suivi pour affiner le plan par itérations jusqu’à ce qu’il réponde à vos besoins.

Mode agent

Le mode Agent offre GitHub Copilot la possibilité d’exécuter des commandes de terminal, de créer et de modifier des fichiers, et de corriger automatiquement un problème. Vous fournissez un objectif de haut niveau, et l’agent décide des étapes à suivre.

1. Sélectionnez Le modèle Claude Sonnet 4.6 , le mode Agent et Autopilot (préversion) dans le panneau de conversation.

   • Le modèle par défaut Auto permet Copilot choisir le meilleur modèle pour chaque étape de manière dynamique. Pour ce guide de démarrage rapide, utilisez un modèle spécifique comme Claude Sonnet 4.6 pour un comportement plus déterministe afin que les étapes Copilot prises pour implémenter votre plan soient plus prévisibles.
   • Le mode agent et autopilot permettent Copilot d’exécuter des commandes de terminal et d’apporter des modifications de fichier de manière autonome. Le mode Autopilot permet à Copilot de s’auto-corriger et d’itérer sans nécessiter d’autre intervention de votre part. Si vous préférez davantage de contrôle, choisissez le mode d’approbations par défaut pour approuver chaque étape avant son exécution.

2. Dans le panneau de conversation, sélectionnez Démarrer l’implémentation ou Démarrer avec Autopilot pour remettre le plan en mode agent pour l’exécution. Le mode Autopilot permet à Copilot de procéder par itérations sans nécessiter d’autre intervention de votre part. Si vous préférez davantage de contrôle, choisissez le mode d’approbations par défaut pour approuver chaque étape avant son exécution.

Lorsque Copilot termine l’implémentation, vous voyez la sortie dans le panneau de conversation semblable à ceci :

All done. Here's a summary of what was built:

App (src/)

src/types.ts — Todo interface
src/hooks/useTodos.ts — addTodo, removeTodo, toggleTodo with localStorage persistence
src/components/TodoForm.tsx, TodoItem.tsx, TodoList.tsx — UI components
src/App.tsx — wired together with task remaining counter
src/App.css / src/index.css — vanilla CSS, light/dark mode
Azure / azd

azure.yaml — host: staticwebapp, dist: dist
infra/main.bicep — subscription-scoped resource group + Static Web App (Free tier)
infra/staticwebapp.bicep, main.parameters.json, abbreviations.json
Docs — README.md with local dev, build, azd up deploy, and azd down teardown instructions.

Build passes with no errors (tsc + Vite). Run npm run dev to start locally, 
or azd up to provision and deploy to Azure.

L’application est désormais générée avec les fonctionnalités spécifiées et le modèle d’infrastructure Azure est prêt pour le déploiement. Le fichier README inclut des instructions sur la façon de tester et de déployer l’application. Avant de déployer sur Azure, testez l’application localement pour confirmer qu’elle fonctionne comme prévu.

Tester l’application

Selon la façon dont vous avez répondu aux questions en mode de planification, le test de votre application localement peut dépendre de l’implémentation. Passez en revue le fichier README pour les tests localement.

npm install && npm run dev

  VITE v5.4.21  ready in 271 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

npm install && npm run dev

  VITE v5.4.21  ready in 271 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Lorsque vous avez terminé le test, arrêtez le serveur de développement en appuyant Ctrl + C sur le terminal.

Poser des questions sur les services Azure

Maintenant que vous disposez d’une application opérationnelle, demandez à l’agent sur quels Azure services seraient adaptés à l’hébergement de l’application et du stockage pour les données persistantes.

Copiez et collez l’invite suivante :

I want to change the storage persistence. What are my no-cost or low-cost storage options for this app in Azure?

L'agent utilise Azure Compétences pour analyser l'architecture de votre application, les besoins de stockage des données et les modèles d'API pour recommander un service Azure approprié pour héberger vos données to-do. L’agent considère des facteurs tels que le coût, la scalabilité, la facilité d’intégration et la pertinence de la charge de travail de l’application. L’agent explique ensuite sa recommandation comme l’exemple suivant :

For this to-do app, these are the best no-cost or low-cost Azure persistence options, ordered from cheapest/simple to stronger capability.

1. Azure Cosmos DB for NoSQL with free tier
- Cost profile: can be zero if you stay within free-tier limits.
- Best for: JSON to-do items, easy API fit, good scaling path.
- Pros: schema-flexible, globally available, SDK support, free tier available.
- Cons: RU-based model can become costly if queries are inefficient.
- Good default choice if you want cloud-native persistence with minimal redesign.

2. Azure Table Storage
- Cost profile: typically very low (often cents to a few dollars at small scale).
- Best for: simple key-based to-do storage.
- Pros: cheapest at low volume, straightforward, durable.
- Cons: limited query features versus Cosmos DB/SQL.
- Great choice if your app only needs basic CRUD by id/user partition.
...

Déployer sur Azure

Après avoir testé l’application localement et confirmé qu’elle fonctionne comme prévu, déployez-la sur Azure afin de pouvoir la voir s’exécuter dans le cloud.

1. Étant donné que vous utilisez azd pour déployer, connectez-vous à Azure dans le terminal si vous n'en êtes pas déjà. Run:

   azd auth login
   

2. Déployez l’application sur Azure.

   azd up
   

   Choisissez un nom d’environnement unique pour le déploiement lorsque vous y êtes invité. Ce nom est utilisé pour créer un groupe de ressources dans Azure et doit être globalement unique.

   Sélectionnez l’abonnement Azure sur lequel vous souhaitez effectuer le déploiement lorsque vous y êtes invité.

La commande azd up provisionne les ressources Azure définies dans le dossier infra/, génère l’application et la déploie sur Azure. La sortie du terminal inclut l’URL de votre application déployée.

Résolution des problèmes

Si le déploiement échoue ou si le site en direct ne sert pas les fichiers de production générés, utilisez l’invite suivante pour que l’agent diagnostique et corrige automatiquement le déploiement.

Deploy the app using `azd up`. If deployment is misconfigured, diagnose and fix automatically until the live site serves built production files, not source or default pages.
Final verification must confirm HTML references production assets and that the main JS/CSS asset URLs return HTTP 200.
Update the README. Return a concise summary and the app website URL.

Pendant le développement, vous pouvez utiliser GitHub Copilot pour vous aider à déboguer des problèmes. Si vous rencontrez une erreur, copiez et collez la sortie d’erreur dans la fenêtre de conversation et demandez à l’agent de vous aider à comprendre et résoudre le problème.

Explorer vos ressources déployées

Utilisez l’URL de l’application déployée à partir de la sortie du terminal ou GitHub Copilot conversation pour y accéder dans un navigateur. Accédez à votre application et testez qu’elle fonctionne comme prévu dans le cloud. Ajoutez, activez et désactivez, puis supprimez des tâches pour vérifier que tout fonctionne.

Vous pouvez explorer vos ressources Azure directement dans VS Code.

1. Ouvrez la vue Azure en sélectionnant l’icône Azure dans la barre d’activité.
2. Sur le nœud Ressources, sélectionnez l’icône Grouper par icône et choisissez Grouper par groupe de ressources pour organiser les ressources par leurs groupes de ressources.
3. Développez Ressources et recherchez le groupe de ressources pour le déploiement créé par azd up.
4. Développez le groupe de ressources pour afficher les services déployés, tels que l’App Service hébergeant votre application web et toutes les autres ressources créées par azd up.
5. Cliquez avec le bouton droit sur l’application web et sélectionnez Browse Website pour ouvrir votre application to-do déployée ou sélectionnez View dans le portail pour afficher la ressource dans le Portail Azure et l’URL de déploiement.

Nettoyer les ressources

Lorsque vous avez terminé d’explorer, supprimez les ressources Azure pour éviter les frais :

azd down

Cette commande supprime toutes les ressources Azure créées pendant le déploiement, y compris le groupe de ressources.

Étapes suivantes

Vous avez utilisé GitHub Copilot mode Plan et le mode agent pour planifier, générer une structure et déployer une application React to-do sur Azure sans écrire manuellement du code. Continuez à développer ce que vous avez appris :

• Documentation GitHub Copilot pour Azure - En savoir plus sur le développement Azure assisté par l’IA.
• VS Code for the Web for Azure development - En savoir plus sur l’environnement de développement basé sur le navigateur.
• Azure Skills Plugin - Installez Azure Skills pour améliorer le développement Azure avec Copilot.
• Modèles AZURE Developer CLI : recherchez des modèles pour différents langages et architectures.