Apps uitvoeren en fouten opsporen die zijn ingeschakeld voor Azure Developer CLI

Apps uitvoeren en fouten opsporen op uw lokale computer met behulp van de Visual Studio Code-extensie voor Azure Developer CLI (azd). In deze handleiding gebruikt u de React-web-app met node.js-API en MongoDB in azure-sjablonen . U kunt de principes die u in dit artikel leert, toepassen op een van de Azure Developer CLI-sjablonen.

Vereisten

• Azd installeren
• Uitvoeren azd met de Node.js-sjabloon
• Node.js met npm (v 16.13.1 LTS)

De Visual Studio Code-extensie voor Azure Developer CLI installeren

Via Visual Studio Code

1. Open Visual Studio Code.

2. Selecteer Extensies in het menu Beeld.

3. Voer in het zoekveld in Azure Developer CLI.

4. Selecteer Installeren.

Via Marketplace

1. Ga in uw browser naar de pagina Azure Developer CLI - VS Code-extensie .

2. Selecteer Installeren.

Een nieuwe app initialiseren

1. Maak en open een nieuwe map in Visual Studio Code.

2. Selecteer in het menu Beeld opdrachtpalet....

3. Typ en kies Azure Developer: init.

   

4. Selecteer de sjabloon Azure-Samples/todo-nodejs-mongo.

   

Verken de volgende bestanden die zijn opgenomen in de .vscode map:

Bestand	Beschrijving
launch.json	Hiermee definieert u de foutopsporingsconfiguraties, zoals de foutopsporingsweb - en foutopsporings-API. als u de configuratieopties voor foutopsporing wilt zien, selecteert u Uitvoeren in het menu Beeld. De beschikbare configuraties voor foutopsporing worden boven aan het deelvenster weergegeven. Zie Foutopsporing voor meer informatie over foutopsporing in Visual Studio Code.
tasks.json	Hiermee definieert u de configuraties voor het starten van de web- of API-server. Als u deze configuratieopties wilt zien, opent u het opdrachtpalet en voert u Taak uit : taak uitvoeren. Zie Integreren met externe hulpprogramma's via Taken voor meer informatie over Visual Studio Code Tasks.

Notitie

Als u de C#SWA-func MS SQL-sjabloon gebruikt, moet u de API-taak starten en vervolgens de foutopsporings-API (F5) handmatig starten. Wanneer u wordt gevraagd een keuze te maken uit een lijst met actieve .NET-processen, zoekt u de naam van uw toepassing en selecteert u deze.

De Azure-resources inrichten

Voordat u begint met foutopsporing, moet u de benodigde Azure-resources inrichten.

1. Open het opdrachtpalet.

2. Voer Azure Developer in: Azure-resources inrichten.

   

Fouten opsporen in een API

De foutopsporingsconfiguratie-API voert automatisch de API-server uit en koppelt het foutopsporingsprogramma. Als u dit patroon wilt testen, voert u de volgende stappen uit:

1. Open de map lists.tsvan src/api/src/routes uw project.

2. Stel een onderbrekingspunt in op regel 16.

3. Selecteer op de activiteitsbalk de foutopsporingspijl uitvoeren en foutopsporings-API-foutopsporing >>starten.

   

4. Selecteer console voor foutopsporing in het menu Beeld.

5. Wacht tot het bericht aangeeft dat het foutopsporingsprogramma luistert op poort 3100.

   

6. Voer in de terminalshell van uw voorkeur de volgende opdracht in: curl http://localhost:3100/lists

   

7. Wanneer het onderbrekingspunt dat u eerder hebt ingesteld, wordt de uitvoering van de app onderbroken. Op dit moment kunt u standaard foutopsporingstaken uitvoeren, zoals:

   • Variabelen inspecteren
   • Bekijk de aanroepstack
   • Stel andere onderbrekingspunten in.

8. Druk om <F5> door te gaan met het uitvoeren van de app. De voorbeeld-app retourneert een lege lijst.

Fouten opsporen in een React Frontend-app

Als u de foutopsporingswebconfiguratie wilt gebruiken, moet u beide starten:

• De API-server
• De ontwikkelwebserver

Als u dit patroon wilt testen, voert u de volgende stappen uit:

1. Open het opdrachtenpalet en voer de taak uit : Taak uitvoeren.

   

2. Voer de START-API en het web in en selecteer deze

   

   U kunt controleren of de lokale webserver wordt uitgevoerd door te navigeren naar de volgende URL in een webbrowser: http://localhost:3000

3. Open todoItemListPane.tsxde map van src/web/src/components uw project.

4. Stel een onderbrekingspunt in op regel 150 (de eerste regel van de deleteItems functie).

5. Selecteer in de activiteitenbalk de optie Uitvoeren en fouten opsporen in de webdebugconfiguratie>> met de pijl Foutopsporing starten.

   

6. Als u de web-app uitvoert, wordt de volgende URL geopend in uw standaardbrowser: http://localhost:3000. U kunt nu fouten in de app opsporen door een item toe te voegen, dit te selecteren in de lijst en Verwijderen te selecteren.

   

7. Wanneer het onderbrekingspunt dat u eerder hebt ingesteld, wordt de uitvoering van de app onderbroken. Op dit moment kunt u standaard foutopsporingstaken uitvoeren, zoals:

   • Variabelen inspecteren
   • Bekijk de aanroepstack
   • Andere onderbrekingspunten instellen

8. Druk <F5> om door te gaan met het uitvoeren van de app en het geselecteerde item wordt verwijderd.

Apps uitvoeren en fouten opsporen die zijn gebouwd op uw lokale computer met behulp van Visual Studio en Azure Developer CLI (azd). In deze handleiding gebruikt u de React Web App met C#-API en MongoDB in Azure-sjabloon . U kunt de principes die u in dit artikel leert, toepassen op een van de Azure Developer CLI-sjablonen.

Vereisten

• Azd installeren
• Uitvoeren azd met de Node.js-sjabloon
• .NET SDK 6.0

De preview-functie installeren en inschakelen

1. Visual Studio Preview installeren

   Notitie

   Dit verschilt van Visual Studio. Als u de niet-preview-versie van Visual Studio hebt, moet u deze nog steeds installeren.

2. Open Visual Studio Preview.

3. Selecteer in het menu Extra opties Preview-functies>.

4. Zorg ervoor dat integratie met azd, de Azure Developer CLI is ingeschakeld.

   

De API-oplossing openen

1. Open de Todo.Api.sln oplossing in de /src/api map.

   Als u de azd integratiefunctie hebt ingeschakeld, wordt het azure.yaml bestand gedetecteerd. Visual Studio initialiseert automatisch het app-model en voert het uit azd env refresh.

2. Vouw Verbinding maken ed Services uit om alle afhankelijkheden weer te geven.

   Hoewel de webfront-end die wordt uitgevoerd op Azure-app Service geen deel uitmaakt van de API-oplossing, wordt deze gedetecteerd en opgenomen onder Serviceafhankelijkheden

   

Uitvoeren en fouten opsporen

1. Open de map ListController.csvan src/api uw project.

2. Stel een onderbrekingspunt in op regel 20.

   

3. Klik op <F5>.

4. Wacht tot het bericht aangeeft dat de webserver luistert op poort 3101.

   

5. Voer in de browser van uw voorkeur het volgende adres in: https://localhost:3101/lists

6. Wanneer het onderbrekingspunt dat u eerder hebt ingesteld, wordt de uitvoering van de app onderbroken. Op dit moment kunt u standaard foutopsporingstaken uitvoeren, zoals:

   • Variabelen inspecteren
   • Bekijk de aanroepstack
   • Andere onderbrekingspunten instellen

7. Druk om <F5> door te gaan met het uitvoeren van de app.

   De voorbeeld-app retourneert een lijst (of een lege lijst [] als u de webfront-end nog niet hebt gestart):

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

Andere azd integraties

Omgeving beheren azd

De omgeving beheren azd :

1. Selecteer ... in de rechterbovenhoek van het deelvenster Serviceafhankelijkheden .

2. Selecteer een van de volgende opties in de vervolgkeuzelijst:

   • Een nieuwe omgeving maken
   • Een specifieke omgeving selecteren en instellen als de huidige actieve omgeving
   • De inrichting van een omgeving ongedaan maken

   

Omgevingsbronnen inrichten

U kunt Azure-resources inrichten in uw omgeving.

1. Klik in Verbinding maken ed Services op het pictogram rechtsboven om omgevingsbronnen te herstellen/inrichten.

   

2. Bevestig de omgevingsnaam, het abonnement en de locatie.

Uw app publiceren

Als u updates aanbrengt, kunt u uw app publiceren door de volgende stappen uit te voeren:

1. Vouw in Solution Explorer Verbinding maken ed Services uit.

2. Selecteer Publiceren.

3. Selecteer Een publicatieprofiel toevoegen.

4. Selecteer een doel van Azure en selecteer Volgende.

5. Selecteer De Azure Developer CLI-omgeving en selecteer Volgende.

   

6. Selecteer de -omgeving.

7. Selecteer Voltooien.

Meer informatie

• Visual Studio Verbinding maken ed Service
• Overzicht van het publicatieprogramma in Visual Studio

Hulp vragen

Ga naar de pagina voor probleemoplossing en ondersteuning voor informatie over het indienen van een bug, hulp vragen of een nieuwe functie voorstellen voor de Azure Developer CLI.

Volgende stappen

Een pijplijn en push-updates configureren met behulp van GitHub Actions