Freigeben über

Ausführen und Debuggen von Apps, die für Azure Developer CLI aktiviert sind

  • Artikel

Ausführen und Debuggen von Apps auf Ihrem lokalen Computer mithilfe der Visual Studio Code-Erweiterung für Azure Developer CLI (azd). In diesem Leitfaden verwenden Sie die React Web App mit der Node.js-API und MongoDB auf Azure-Vorlage . Sie können die in diesem Artikel beschriebenen Prinzipien auf eine der Azure Developer CLI-Vorlagen anwenden.

Voraussetzungen

Installieren der Visual Studio Code-Erweiterung für azure Developer CLI

Über Visual Studio Code

  1. Öffnen Sie Visual Studio Code.

  2. Wählen Sie im Menü "Ansicht" die Option "Erweiterungen" aus.

  3. Geben Sie im Suchfeld die Zeichenfolge Azure Developer CLIein.

  4. Wählen Sie Installieren aus.

Via Marketplace

  1. Wechseln Sie mit Ihrem Browser zur Azure Developer CLI – VS Code Extension-Seite .

  2. Wählen Sie Installieren aus.

Initialisieren einer neuen App

  1. Erstellen und Öffnen eines neuen Verzeichnisses in Visual Studio Code.

  2. Wählen Sie im Menü Ansicht die Option Befehlspalette... aus.

  3. Geben Sie ein, und wählen Sie es aus Azure Developer: init.

    Screenshot of the option to initialize a new app.

  4. Wählen Sie die Vorlage Azure-Samples/todo-nodejs-mongo aus.

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

Erkunden Sie die folgenden Dateien, die .vscode im Verzeichnis enthalten sind:

Datei Beschreibung
launch.json Definiert die Debugkonfigurationen wie Debugweb - und Debug-API. um die Debugkonfigurationsoptionen anzuzeigen, wählen Sie im Menü "Ansicht" die Option "Ausführen" aus. Die verfügbaren Debugkonfigurationen werden oben im Bereich aufgelistet. Weitere Informationen zum Debuggen in Visual Studio Code finden Sie unter Debuggen.
tasks.json Definiert die Konfigurationen zum Starten des Web- oder API-Servers. Um diese Konfigurationsoptionen anzuzeigen, öffnen Sie die Befehlspalette, und führen Sie "Aufgabe: Ausführen" aus. Weitere Informationen zu Visual Studio Code Tasks finden Sie unter Integration mit externen Tools über Aufgaben.

Hinweis

Wenn Sie die C#-SWA-func MS SQL-Vorlage verwenden, müssen Sie die Start-API-Aufgabe und dann die Debug-API (F5) manuell starten. Wenn Sie aufgefordert werden, aus einer Liste der ausgeführten .NET-Prozesse auszuwählen, suchen Sie nach dem Namen Ihrer Anwendung, und wählen Sie sie aus.

Bereitstellen der Azure-Ressourcen

Bevor Sie mit dem Debuggen beginnen, stellen Sie die erforderlichen Azure-Ressourcen bereit.

  1. Öffnen Sie die Befehlspalette.

  2. Geben Sie Azure-Entwickler ein : Bereitstellen von Azure-Ressourcen.

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

Debuggen einer API

Die Debugkonfigurations-API führt automatisch den API-Server aus und fügt den Debugger an. Führen Sie die folgenden Schritte aus, um dieses Muster zu testen:

  1. Öffnen lists.tsSie im src/api/src/routes Verzeichnis Ihres Projekts .

  2. Legen Sie einen Haltepunkt in Zeile 16 fest.

  3. Wählen Sie in der Aktivitätsleiste "Ausführen" und>"Debug-API debuggen"-Debugkonfiguration >den Pfeil "Debuggen starten" aus.

    Screenshot of setting the debug configuration to Debug API.

  4. Wählen Sie im Menü "Ansicht" die Option "Debugkonsole" aus.

  5. Warten Sie, bis die Meldung angibt, dass der Debugger auf Port 3100 lauscht.

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

  6. Geben Sie in Der bevorzugten Terminalshell den folgenden Befehl ein: curl http://localhost:3100/lists

    Screenshot of using cURL to connect to the API server.

  7. Wenn der zuvor festgelegte Haltepunkt erreicht wird, wird die App-Ausführung angehalten. An diesem Punkt können Sie Standarddebuggingaufgaben ausführen, z. B.:

    • Variablen überprüfen
    • Sehen Sie sich den Aufrufstapel an
    • Legen Sie andere Haltepunkte fest.

  8. Drücken Sie <F5> , um mit der Ausführung der App fortzufahren. Die Beispiel-App gibt eine leere Liste zurück.

Debuggen einer React-Frontend-App

Um die Debugwebkonfiguration zu verwenden, müssen Sie beide starten:

  • Der API-Server
  • Der Entwicklungswebserver

Führen Sie die folgenden Schritte aus, um dieses Muster zu testen:

  1. Öffnen Sie die Befehlspalette, und führen Sie "Task: Aufgabe ausführen" aus.

    Screenshot of running a Visual Studio Code Task.

  2. Geben Sie die Start-API und das Web ein, und wählen Sie sie aus .

    Screenshot of selecting the option to Start API and Web.

    Sie können überprüfen, ob der lokale Webserver ausgeführt wird, indem Sie zu der folgenden URL in einem Webbrowser navigieren: http://localhost:3000

  3. Öffnen todoItemListPane.tsxSie im src/web/src/components Verzeichnis Ihres Projekts .

  4. Legen Sie einen Haltepunkt in Zeile 150 (die erste Zeile der deleteItems Funktion) fest.

  5. Wählen Sie in der Aktivitätsleiste die Konfiguration > zum Debuggen des Webdebugs ausführen und debuggen>, und wählen Sie den Pfeil "Debuggen starten" aus.

    Screenshot of setting the debug configuration to Debug Web.

  6. Wenn Sie die Web-App ausführen, wird ihr Standardbrowser die folgende URL öffnen: http://localhost:3000 Sie können die App jetzt debuggen, indem Sie ein Element hinzufügen, es aus der Liste auswählen und "Löschen" auswählen.

    Screenshot of the sample Node JS Mongo DB app.

  7. Wenn der zuvor festgelegte Haltepunkt erreicht wird, wird die App-Ausführung angehalten. An diesem Punkt können Sie Standarddebuggingaufgaben ausführen, z. B.:

    • Variablen überprüfen
    • Sehen Sie sich den Aufrufstapel an
    • Festlegen anderer Haltepunkte

  8. Drücken Sie <F5> , um mit der Ausführung der App fortzufahren, und das ausgewählte Element wird gelöscht.

Ausführen und Debuggen von Apps, die auf Ihrem lokalen Computer mit Visual Studio und Azure Developer CLI (azd) basieren. In diesem Leitfaden verwenden Sie die React Web App mit der C#-API und MongoDB in azure-Vorlage . Sie können die in diesem Artikel beschriebenen Prinzipien auf eine der Azure Developer CLI-Vorlagen anwenden.

Voraussetzungen

Installieren und Aktivieren des Vorschaufeatures

  1. Installieren von Visual Studio Preview

    Hinweis

    Dies unterscheidet sich von Visual Studio. Wenn Sie über die Nichtvorschauversion von Visual Studio verfügen, müssen Sie dies trotzdem installieren.

  2. Öffnen Sie Visual Studio Preview.

  3. Wählen Sie im Menü "Extras" die Option "Vorschaufeatures">aus.

  4. Stellen Sie sicher, dass die Integration mit azd, die Azure Developer CLI aktiviert ist.

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

Öffnen der API-Lösung

  1. Öffnen Sie die Todo.Api.sln Lösung im /src/api Verzeichnis.

    Wenn Sie das Integrationsfeature aktiviert haben, wird die azure.yaml Datei erkannt.azd Visual Studio initialisiert das App-Modell automatisch und wird ausgeführt azd env refresh.

  2. Erweitern Sie Verbinden ed Services, um alle Abhängigkeiten anzuzeigen.

    Während das Web-Front-End, das auf Azure-App Dienst ausgeführt wird, nicht Teil der API-Lösung ist, wird es erkannt und unter Dienstabhängigkeiten enthalten.

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

Ausführen und Debuggen

  1. Öffnen ListController.csSie im src/api Verzeichnis Ihres Projekts .

  2. Legen Sie einen Haltepunkt in Zeile 20 fest.

    Screenshot of the breakpoint set in the sample code.

  3. Drücken Sie <F5>.

  4. Warten Sie, bis die Nachricht angibt, dass der Webserver auf Port 3101 lauscht.

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

  5. Geben Sie in Ihrem bevorzugten Browser die folgende Adresse ein: https://localhost:3101/lists

  6. Wenn der zuvor festgelegte Haltepunkt erreicht wird, wird die App-Ausführung angehalten. An diesem Punkt können Sie Standarddebuggingaufgaben ausführen, z. B.:

    • Variablen überprüfen
    • Sehen Sie sich den Aufrufstapel an
    • Festlegen anderer Haltepunkte

  7. Drücken Sie <F5> , um mit der Ausführung der App fortzufahren.

    Die Beispiel-App gibt eine Liste (oder eine leere Liste [] zurück, wenn Sie das Web-Front-End noch nicht gestartet haben):

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

Andere azd Integrationen

Verwalten der azd Umgebung

So verwalten Sie die azd Umgebung:

  1. Wählen Sie " ... in der oberen rechten Ecke des Bereichs "Dienstabhängigkeiten" aus.

  2. Wählen Sie eine der folgenden Optionen im Dropdownmenü aus:

    • Eine neue Umgebung erstellen
    • Auswählen und Festlegen einer bestimmten Umgebung als aktuelle aktive Umgebung
    • Aufheben der Bereitstellung einer Umgebung

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

Bereitstellen von Umgebungsressourcen

Sie können Azure-Ressourcen in Ihrer Umgebung bereitstellen.

  1. Klicken Sie in Verbinden ed Services oben rechts auf das Symbol, um Umgebungsressourcen wiederherzustellen/bereitzustellen.

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

  2. Bestätigen Sie den Namen, das Abonnement und den Standort der Umgebung.

Veröffentlichen der App

Wenn Sie Aktualisierungen vornehmen, können Sie Ihre App veröffentlichen, indem Sie die folgenden Schritte ausführen:

  1. Erweitern Sie im Projektmappen-Explorer Verbinden ed Services.

  2. Wählen Sie Veröffentlichen aus.

  3. Wählen Sie "Veröffentlichungsprofil hinzufügen" aus.

  4. Wählen Sie ein Ziel von Azure und dann "Weiter" aus.

  5. Wählen Sie Azure Developer CLI-Umgebung und dann "Weiter" aus.

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

  6. Die Umgebung auswählen.

  7. Klicken Sie auf Fertig stellen.

Weitere Ressourcen

Hilfe anfordern

Informationen zum Ablegen eines Fehlers, Anfordern von Hilfe oder Vorschlagen eines neuen Features für die Azure Developer CLI finden Sie auf der Seite "Problembehandlung und Support ".

Nächste Schritte

Konfigurieren einer Pipeline und Pushupdates mithilfe von GitHub-Aktionen