Partager via


Démarrage rapide : Prise en main des outils de développement Azure

Dans ce guide de démarrage rapide, vous utilisez les principaux outils de développement Azure pour déployer un exemple d’application sur Azure. À la fin, vous avez une expérience pratique avec :

  • Azure Developer CLI (azd) pour configurer et déployer une application full-stack
  • Pack d’extension Azure Tools pour VS Code pour parcourir et gérer vos ressources déployées
  • GitHub Copilot pour Azure pour obtenir des réponses assistées par l’IA sur vos ressources Azure

Prerequisites

  • Un compte Azure avec un abonnement actif. Créez-en un gratuitement.
  • Un abonnement GitHub Copilot - requis par GitHub Copilot pour Azure
  • Utilisez l’installation locale des outils ou le VS Code basé sur le navigateur pour l’expérience web. Pour l’installation locale, vérifiez que vous disposez des options suivantes :

Configurer les outils

Vous pouvez choisir d’utiliser les outils directement dans le navigateur avec VS Code pour le web ou les installer localement. L’expérience basée sur un navigateur est le moyen le plus rapide de commencer, tandis que l’installation locale fournit un environnement de développement local.

VS Code pour le web (vscode.dev/azure) vous offre un environnement VS Code basé sur un navigateur avec des CLIs et plusieurs extensions préinstallées. Aucune installation locale n’est requise.

  1. Ouvrez vscode.dev/azure dans votre navigateur.
  2. Connectez-vous à l’aide de votre compte Azure lorsque vous y êtes invité.
  3. Certaines extensions Azure sont préinstallées. Pour tous les outils Azure, installez le pack d’extension Azure Tools . Vous pouvez l’installer à partir de la vue Extensions dans VS Code pour le web. Recherchez « Outils Azure », puis sélectionnez Installer.

Vous avez maintenant accès aux extensions Azure Tools et à GitHub Copilot pour Azure directement dans le navigateur.

Capture d’écran de VS Code pour le web montrant les détails du pack d’extensions Azure Tools et la liste des extensions Azure installées.

Pour plus d’informations sur l’utilisation de VS Code pour le développement Web pour le développement Azure, consultez VS Code pour le web - Azure.

Déployer un exemple d’application avec azd

Utilisez Azure Developer CLI pour déployer une application to-do complète sur Azure. Cette étape crée toutes les ressources Azure et déploie le code de l’application.

  1. Ouvrez le terminal à partir de la palette de commandes via Terminal Create New Terminal>.

  2. Dans le terminal, créez et modifiez-en un nouveau répertoire pour votre projet.

    mkdir my-todo-app && cd my-todo-app
    
  3. Initialisez un projet à partir d’un modèle de démarrage. Le todo-nodejs-mongo modèle est une application full-stack construite avec Node.js, Express et MongoDB. Le modèle inclut un modèle Azure Resource Manager (ARM) qui définit les ressources Azure requises, telles qu’un App Service pour l’hébergement de l’application et un compte Azure Cosmos DB pour la base de données.

    azd init --template todo-nodejs-mongo
    

    Lorsque vous y êtes invité, entrez un nom d’environnement tel que my-todo-dev. Utilisez ce nom comme préfixe pour les ressources Azure.

  4. Connectez-vous à Azure :

    azd auth login
    
  5. Provisionnez des ressources Azure et déployez l’application :

    azd up
    

    Lorsque vous y êtes invité, sélectionnez un abonnement et une région.

    Commande azd up :

    • Crée un groupe de ressources avec l’infrastructure définie dans le modèle.
    • Provisionne les services Azure requis, tels qu’App Service et Azure Cosmos DB.
    • Déploie le code de l’application.

    Ce processus prend quelques minutes. Une fois l’opération terminée, Azure Developer CLI affiche l’URL de votre application déployée.

  6. Ouvrez l’URL dans votre navigateur pour vérifier que l’application est en cours d’exécution. Vous voyez une application to-do où vous pouvez ajouter et terminer des tâches.

Pour plus d’informations, consultez l’interface CLI du développeur Azure.

Parcourir les ressources avec Azure Tools pour VS Code

Utilisez maintenant l’extension Azure Tools pour explorer les ressources créées par Azure Developer CLI.

  1. Vérifiez que vous êtes connecté à Azure en exécutant la commande suivante dans le terminal :

    azd auth status
    

    Si la commande retourne les détails de votre compte, vous êtes déjà connecté. Si ce n’est pas le cas, connectez-vous via VS Code :

    • Ouvrez la palette de commandes.
    • Tapez Azure : Connectez-vous et sélectionnez-le.
    • Complétez le processus d'authentification dans votre navigateur.
  2. Ouvrez la vue Azure en sélectionnant l’icône Azure dans la barre d’activité (barre latérale gauche). Développez Ressources pour afficher vos abonnements Azure. Vérifiez que la liste des ressources est regroupée par groupe de ressources en sélectionnant l’icône Grouper par en haut de l’affichage Ressources et en choisissant Groupe de ressources. Développez votre abonnement et recherchez le groupe de ressources créé par Azure Developer CLI. Le nom du groupe de ressources commence par le nom de l’environnement que vous avez choisi lors de l’exécution azd init.

    Capture d’écran de la vue Azure VS Code montrant les ressources regroupées par groupe de ressources avec le menu Groupe par ouvert.

  3. Explorez les ressources déployées :

    • Développez le groupe de ressources pour voir le App Service, le compte Cosmos DB et d'autres ressources.
    • Cliquez avec le bouton droit sur la ressource App Service et sélectionnez Parcourir le site web pour ouvrir votre application déployée.
    • Cliquez avec le bouton droit sur le compte Cosmos DB et sélectionnez Ouvrir dans le portail pour afficher la base de données dans le portail Azure.
  4. Afficher les journaux d’activité d’application :

    • Cliquez avec le bouton droit sur la ressource App Service .
    • Sélectionnez Démarrer les journaux de streaming pour afficher la sortie du journal en direct de votre application en cours d’exécution.
    • Ouvrez votre application to-do dans un navigateur et ajoutez une tâche pour afficher les entrées du journal.

Pour plus d’informations, consultez le pack d’extension Azure Tools.

Utiliser GitHub Copilot pour Azure

Utilisez GitHub Copilot pour Azure pour en savoir plus sur les ressources que vous avez déployées et obtenir des conseils sur les étapes suivantes.

  1. Dans VS Code, ouvrez le mode Conversation Copilot en sélectionnant l’icône de conversation dans la barre d’activité.

  2. Demandez des conseils sur votre application :

    How can I add authentication to my Azure App Service?
    

    Copilot fournit des instructions pas à pas adaptées à votre application déployée.

Pour obtenir des exemples d'instructions, consultez :

Pour plus d’informations sur GitHub Copilot pour Azure, consultez la vue d’ensemble de GitHub Copilot pour Azure.

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 par azd up, y compris le groupe de ressources, App Service et le compte Cosmos DB.

Étapes suivantes

Maintenant que vous avez utilisé les principaux outils de développement Azure, explorez plus :