Dela via

Köra och felsöka appar som är aktiverade för Azure Developer CLI

  • Artikel

Kör och felsöka appar på din lokala dator med hjälp av Visual Studio Code-tillägget för Azure Developer CLI (azd). I den här guiden använder du React Web App med Node.js API och MongoDB i Azure-mallen . Du kan tillämpa de principer som du lär dig i den här artikeln på någon av Azure Developer CLI-mallarna.

Förutsättningar

Installera Visual Studio Code-tillägget för Azure Developer CLI

Via Visual Studio Code

  1. Öppna Visual Studio Code.

  2. På menyn Visa väljer du Tillägg.

  3. I sökfältet anger du Azure Developer CLI.

  4. Välj Installera.

Via Marketplace

  1. Gå till sidan Azure Developer CLI – VS Code Extension i webbläsaren.

  2. Välj Installera.

Initiera en ny app

  1. Skapa och öppna en ny katalog i Visual Studio Code.

  2. På menyn Visa väljer du Kommandopalett....

  3. Skriv och välj Azure Developer: init.

    Screenshot of the option to initialize a new app.

  4. Välj mallen Azure-Samples/todo-nodejs-mongo.

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

Utforska följande filer som ingår i .vscode katalogen:

Fil beskrivning
launch.json Definierar felsökningskonfigurationer som Felsökningswebb och Felsöknings-API. om du vill se konfigurationsalternativen för felsökning väljer du Kör på menyn Visa . De tillgängliga felsökningskonfigurationerna visas överst i fönstret. Mer information om felsökning i Visual Studio Code finns i Felsökning.
tasks.json Definierar konfigurationerna för att starta webben eller API-servern. Om du vill se de här konfigurationsalternativen öppnar du kommandopaletten och kör Aktivitet: kör uppgift. Mer information om Visual Studio Code-uppgifter finns i Integrera med externa verktyg via uppgifter.

Kommentar

Om du använder mallen C# SWA-func MS SQL måste du starta aktiviteten Starta API manuellt och sedan felsöka API (F5). När du uppmanas att välja från en lista över att köra .NET-processer söker du efter namnet på ditt program och väljer det.

Etablera Azure-resurserna

Innan du börjar felsöka etablerar du nödvändiga Azure-resurser.

  1. Öppna kommandopaletten.

  2. Ange Azure Developer: etablera Azure-resurser.

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

Felsöka ett API

Felsökningskonfigurations-API:et felsöker automatiskt API-servern och kopplar felsökningsprogrammet. Gör följande för att testa det här mönstret:

  1. Öppna från projektets src/api/src/routes katalog lists.ts.

  2. Ange en brytpunkt på rad 16.

  3. I aktivitetsfältet väljer du Run and Debug Debug>Debug API debug configuration >Start Debugging arrow (Starta felsökningspil).

    Screenshot of setting the debug configuration to Debug API.

  4. På menyn Visa väljer du Felsökningskonsol.

  5. Vänta tills meddelandet som anger att felsökaren lyssnar på port 3100.

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

  6. I önskat terminalgränssnitt anger du följande kommando: curl http://localhost:3100/lists

    Screenshot of using cURL to connect to the API server.

  7. När brytpunkten som du angav tidigare har nåtts pausas appkörningen. Nu kan du utföra vanliga felsökningsuppgifter, till exempel:

    • Granska variabler
    • Titta på anropsstacken
    • Ange andra brytpunkter.

  8. Tryck <F5> på för att fortsätta köra appen. Exempelappen returnerar en tom lista.

Felsöka en React Frontend-app

Om du vill använda webbkonfigurationen för felsökning måste du starta båda:

  • API-servern
  • Webbservern för utveckling

Gör följande för att testa det här mönstret:

  1. Öppna kommandopaletten och kör Aktivitet: Kör uppgift.

    Screenshot of running a Visual Studio Code Task.

  2. Ange och välj Starta API och webb

    Screenshot of selecting the option to Start API and Web.

    Du kan kontrollera om den lokala webbservern körs genom att gå till följande URL i en webbläsare: http://localhost:3000.

  3. Öppna i projektets src/web/src/components katalog todoItemListPane.tsx.

  4. Ange en brytpunkt på rad 150 (funktionens deleteItems första rad).

  5. I aktivitetsfältet väljer du Run and Debug Debug>Web debug configuration > the Start Debugging arrow (Starta felsökningspilen).

    Screenshot of setting the debug configuration to Debug Web.

  6. Om du kör webbappen öppnas följande URL i standardwebbläsaren: http://localhost:3000. Du kan nu felsöka appen genom att lägga till ett objekt, välja det i listan och välja Ta bort.

    Screenshot of the sample Node JS Mongo DB app.

  7. När brytpunkten som du angav tidigare har nåtts pausas appkörningen. Nu kan du utföra vanliga felsökningsuppgifter, till exempel:

    • Granska variabler
    • Titta på anropsstacken
    • Ange andra brytpunkter

  8. Tryck <F5> på för att fortsätta köra appen så tas det markerade objektet bort.

Kör och felsöka appar som bygger på din lokala dator med hjälp av Visual Studio och Azure Developer CLI (azd). I den här guiden använder du React Web App med C#API och MongoDB i Azure-mallen . Du kan tillämpa de principer som du lär dig i den här artikeln på någon av Azure Developer CLI-mallarna.

Förutsättningar

Installera och aktivera förhandsgranskningsfunktionen

  1. Installera Visual Studio Preview

    Kommentar

    Detta skiljer sig från Visual Studio. Om du har en version av Visual Studio som inte är förhandsversion måste du fortfarande installera den.

  2. Öppna Visual Studio Preview.

  3. På menyn Verktyg väljer du Alternativ>Förhandsgranskningsfunktioner.

  4. Se till att Integrering med azd, Azure Developer CLI är aktiverat.

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

Öppna API-lösningen

  1. Todo.Api.sln Öppna lösningen i /src/api katalogen.

    Om du har aktiverat integreringsfunktionen azdazure.yaml identifieras filen. Visual Studio initierar automatiskt appmodellen och kör azd env refresh.

  2. Expandera Anslut ed Services för att se alla beroenden.

    Webbklientdelen som körs på Azure App Service är inte en del av API-lösningen, men den identifieras och ingår under Tjänstberoenden

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

Köra och felsöka

  1. Öppna från projektets src/api katalog ListController.cs.

  2. Ange en brytpunkt på rad 20.

    Screenshot of the breakpoint set in the sample code.

  3. Tryck på <F5>.

  4. Vänta på meddelandet som anger att webbservern lyssnar på port 3101.

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

  5. I önskad webbläsare anger du följande adress: https://localhost:3101/lists

  6. När brytpunkten som du angav tidigare har nåtts pausas appkörningen. Nu kan du utföra vanliga felsökningsuppgifter, till exempel:

    • Granska variabler
    • Titta på anropsstacken
    • Ange andra brytpunkter

  7. Tryck <F5> på för att fortsätta köra appen.

    Exempelappen returnerar en lista (eller en tom lista [] om du inte har startat webbklientdelen tidigare):

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

Andra azd integreringar

Hantera azd miljö

Så här hanterar du azd miljön:

  1. Välj ... i det övre högra hörnet i fönstret Tjänstberoenden .

  2. Välj något av följande alternativ i den nedrullningsbara menyn:

    • Skapa en ny miljö
    • Välj och ange en specifik miljö som den aktuella aktiva miljön
    • Avetablera en miljö

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

Etablera miljöresurser

Du kan etablera Azure-resurser i din miljö.

  1. I Anslut ed Services klickar du på ikonen längst upp till höger för att återställa/etablera miljöresurser.

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

  2. Bekräfta miljönamnet, prenumerationen och platsen.

Publicera appen

Om du gör några uppdateringar kan du publicera din app genom att göra följande:

  1. I Solution Explorer expanderar du Anslut ed Services.

  2. Välj Publicera.

  3. Välj Lägg till en publiceringsprofil.

  4. Välj ett Mål för Azure och välj Nästa.

  5. Välj Azure Developer CLI Environment och välj Nästa.

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

  6. Välj miljö.

  7. Välj Slutför.

Andra resurser

Begär hjälp

Information om hur du skickar in en bugg, begär hjälp eller föreslår en ny funktion för Azure Developer CLI finns på felsöknings - och supportsidan .

Nästa steg

Konfigurera en pipeline och push-uppdateringar med GitHub Actions