Exécuter et déboguer des applications activées pour Azure Developer CLI

  • Article

Exécutez et déboguez des applications sur votre ordinateur local à l’aide de l’extension Visual Studio Code pour Azure Developer CLI (azd). Dans ce guide, vous allez utiliser l’application web React avec l’API Node.js et MongoDB sur le modèle Azure . Vous pouvez appliquer les principes que vous découvrez dans cet article à l’un des modèles AZURE Developer CLI.

Prérequis

Installer l’extension Visual Studio Code pour Azure Developer CLI

Via Visual Studio Code

  1. Ouvrez Visual Studio Code.

  2. Dans le menu Affichage , sélectionnez Extensions.

  3. Dans le champ de recherche, entrez Azure Developer CLI.

  4. Sélectionnez Installer.

Via la Place de marché

  1. À l’aide de votre navigateur, accédez à la page Azure Developer CLI - VS Code Extension .

  2. Sélectionnez Installer.

Initialiser une nouvelle application

  1. Créez et ouvrez un répertoire dans Visual Studio Code.

  2. Dans le menu Affichage, sélectionnez Palette de commandes....

  3. Tapez et sélectionnez Azure Developer: init.

    Screenshot of the option to initialize a new app.

  4. Sélectionnez le modèle Azure-Samples/todo-nodejs-mongo.

    Screenshot of selecting the todo-nodejs-mongo sample template.

Explorez les fichiers suivants inclus dans le .vscode répertoire :

Fichier Description
launch.json Définit les configurations de débogage telles que l’API Debug Web et Debug. pour afficher les options de configuration de débogage, sélectionnez Exécuter dans le menu Affichage . Les configurations de débogage disponibles sont répertoriées en haut du volet. Pour en savoir plus sur le débogage dans Visual Studio Code, consultez Débogage.
tasks.json Définit les configurations pour démarrer le serveur web ou l’API. Pour afficher ces options de configuration, ouvrez la palette de commandes et exécutez la tâche : exécuter la tâche. Pour en savoir plus sur les tâches Visual Studio Code, consultez Intégrer à des outils externes via des tâches.

Remarque

Si vous utilisez le modèle C# SWA-func MS SQL, vous devez démarrer manuellement la tâche d’API Démarrer, puis déboguer l’API (F5) manuellement. Lorsque vous êtes invité à choisir dans une liste de processus .NET en cours d’exécution, recherchez le nom de votre application et sélectionnez-la.

Approvisionner les ressources Azure

Avant de commencer le débogage, provisionnez les ressources Azure nécessaires.

  1. Ouvrez la palette de commandes.

  2. Entrez Le développeur Azure : provisionnez des ressources Azure.

    Screenshot of option to provision the Azure resources for a new app.

Déboguer une API

L’API de débogage de débogage exécute automatiquement le serveur d’API et attache le débogueur. Pour tester ce modèle, procédez comme suit :

  1. À partir du répertoire de src/api/src/routes votre projet, ouvrez lists.ts.

  2. Définissez un point d’arrêt à la ligne 16.

  3. Dans la barre d’activité, sélectionnez Exécuter et déboguer>la flèche de débogage de la configuration >de débogage de l’API Démarrer le débogage.

    Screenshot of setting the debug configuration to Debug API.

  4. Dans le menu Affichage , sélectionnez Déboguer la console.

  5. Attendez que le message indiquant que le débogueur écoute sur le port 3100.

    Screenshot of the message in the Debug Console indicating the debugger is listening on port 3100.

  6. Dans votre interpréteur de commandes de terminal préféré, entrez la commande suivante : curl http://localhost:3100/lists

    Screenshot of using cURL to connect to the API server.

  7. Lorsque le point d’arrêt que vous définissez précédemment est atteint, l’exécution de l’application s’interrompt. À ce stade, vous pouvez effectuer des tâches de débogage standard, telles que :

    • Inspecter des variables
    • Examinez la pile des appels
    • Définissez d’autres points d’arrêt.

  8. Appuyez <F5> pour continuer à exécuter l’application. L’exemple d’application retourne une liste vide.

Déboguer une application front-end React

Pour utiliser la configuration web de débogage, vous devez démarrer les deux :

  • Le serveur API
  • Serveur web de développement

Pour tester ce modèle, procédez comme suit :

  1. Ouvrez la palette de commandes et exécutez la tâche : exécuter la tâche.

    Screenshot of running a Visual Studio Code Task.

  2. Entrez et sélectionnez Démarrer l’API et le web

    Screenshot of selecting the option to Start API and Web.

    Vous pouvez case activée si le serveur web local est en cours d’exécution en accédant à l’URL suivante dans un navigateur web : http://localhost:3000.

  3. Dans le répertoire de src/web/src/components votre projet, ouvrez todoItemListPane.tsx.

  4. Définissez un point d’arrêt sur la ligne 150 (la première ligne de la deleteItems fonction).

  5. Dans la barre d’activité, sélectionnez Exécuter et déboguer>la configuration > de débogage web de débogage de la flèche Démarrer le débogage.

    Screenshot of setting the debug configuration to Debug Web.

  6. L’exécution de l’application web entraîne l’ouverture de l’URL suivante par votre navigateur par défaut : http://localhost:3000. Vous pouvez désormais déboguer l’application en ajoutant un élément, en le sélectionnant dans la liste et en sélectionnant Supprimer.

    Screenshot of the sample Node JS Mongo DB app.

  7. Lorsque le point d’arrêt que vous définissez précédemment est atteint, l’exécution de l’application s’interrompt. À ce stade, vous pouvez effectuer des tâches de débogage standard, telles que :

    • Inspecter des variables
    • Examinez la pile des appels
    • Définir d’autres points d’arrêt

  8. Appuyez <F5> pour continuer à exécuter l’application et l’élément sélectionné sera supprimé.

Exécutez et déboguez des applications basées sur votre ordinateur local à l’aide de Visual Studio et d’Azure Developer CLI (azd). Dans ce guide, vous allez utiliser l’application web React avec l’API C# et MongoDB sur le modèle Azure . Vous pouvez appliquer les principes que vous découvrez dans cet article à l’un des modèles AZURE Developer CLI.

Prérequis

Installer et activer la fonctionnalité d’aperçu

  1. Installer Visual Studio Preview

    Remarque

    Cela est différent de Visual Studio. Si vous disposez de la version non préliminaire de Visual Studio, vous devez toujours l’installer.

  2. Ouvrez Visual Studio Preview.

  3. Dans le menu Outils , sélectionnez Options>d’aperçu des fonctionnalités.

  4. Assurez-vous que l’intégration avec azd, l’interface CLI du développeur Azure est activée.

    Screenshot of the Visual Studio option to turn on integration with the Azure Developer CLI.

Ouvrir la solution d’API

  1. Ouvrez la Todo.Api.sln solution dans le /src/api répertoire.

    Si vous avez activé la azd fonctionnalité d’intégration, le azure.yaml fichier est détecté. Visual Studio initialise automatiquement le modèle d’application et s’exécute azd env refresh.

  2. Développez Connecter servicesed pour afficher toutes les dépendances.

    Bien que le serveur frontal web s’exécutant sur Azure App Service ne fait pas partie de la solution d’API, il est détecté et inclus dans les dépendances de service

    Screenshot of the message indicating the Azure Developer CLI is initialized.

Exécuter et déboguer

  1. À partir du répertoire de src/api votre projet, ouvrez ListController.cs.

  2. Définissez un point d’arrêt à la ligne 20.

    Screenshot of the breakpoint set in the sample code.

  3. Appuyez sur <F5>.

  4. Attendez que le message indique que le serveur web écoute sur le port 3101.

    Screenshot of the status bar message indicating the debugger is listening on port 3101.

  5. Dans votre navigateur préféré, entrez l’adresse suivante : https://localhost:3101/lists

  6. Lorsque le point d’arrêt que vous définissez précédemment est atteint, l’exécution de l’application s’interrompt. À ce stade, vous pouvez effectuer des tâches de débogage standard, telles que :

    • Inspecter des variables
    • Examinez la pile des appels
    • Définir d’autres points d’arrêt

  7. Appuyez <F5> pour continuer à exécuter l’application.

    L’exemple d’application retourne une liste (ou une liste vide [] si vous n’avez pas lancé le serveur web frontal avant) :

    [{"id":"fb9c1cb3811349b993421fc0e815c4c1","name":"My List","description":null,"createdDate":"2022-06-27T01:10:16.7721172+00:00","updatedDate":null}]

Autres azd intégrations

Gérer l’environnement azd

Pour gérer l’environnement azd :

  1. Sélectionnez ... dans le coin supérieur droit du volet Dépendances du service.

  2. Sélectionnez l’une des options suivantes dans le menu déroulant :

    • Créer un nouvel environnement
    • Sélectionner et définir un environnement spécifique comme environnement actif actuel
    • Déprovisionner un environnement

    Screenshot of the options to manage the Azure Developer CLI environment in Visual Studio.

Provisionner des ressources d’environnement

Vous pouvez approvisionner des ressources Azure dans votre environnement.

  1. Dans Connecter servicesed, cliquez sur l’icône en haut à droite pour restaurer/approvisionner des ressources d’environnement.

    Screenshot of option to provision Azure Developer CLI environment resources in Visual Studio.

  2. Confirmez le nom, l’abonnement et l’emplacement de l’environnement.

Publier votre application

Si vous effectuez des mises à jour, vous pouvez publier votre application en procédant comme suit :

  1. Dans le Explorateur de solutions, développez les services Connecter ed.

  2. Cliquez sur Publier.

  3. Sélectionnez Ajouter un profil de publication.

  4. Sélectionnez une cible d’Azure, puis sélectionnez Suivant.

  5. Sélectionnez Environnement CLI pour développeurs Azure, puis sélectionnez Suivant.

    Screenshot of message in Debug Console indicating debugger is listening on port 3100.

  6. Sélectionner l’environnement.

  7. Cliquez sur Terminer.

Autres ressources

Demander de l’aide

Pour plus d’informations sur la façon de déposer un bogue, de demander de l’aide ou de proposer une nouvelle fonctionnalité pour l’interface CLI développeur Azure, visitez la page de dépannage et de support .

Étapes suivantes

Configurer un pipeline et envoyer (push) des mises à jour à l’aide de GitHub Actions