Übung: Ausführen und Debuggen von Azure Functions und Angular

Abgeschlossen

In dieser Übung führen Sie die Anwendungen Angular und Azure Functions zusammen aus und debuggen sie. Legen Sie in dem Angular-Code, mit dem die Web-App im Browser angezeigt wird, und in dem Functions-Code, mit dem die Urlaubsziele abgerufen und gerendert werden, Haltepunkte fest. Verwenden Sie anschließend die Haltepunkte für Angular und Functions, um mit dem Debugger den Functions- und Angular-Code zu durchlaufen.

Hinweis

Die Dateien .vscode/launch.json und .vscode/tasks.json sind integrale Bestandteile der Debuggingfunktion für dieses Projekt.

Starten von Azurite für lokale Functions-Speicher

Azure Functions verwendet Azure Storage, um seine Daten zu speichern. Sie können Azurite, einen lokalen Emulator für Azure Storage, verwenden, um die Functions-App lokal auszuführen. Azurite stellt eine lokale Umgebung bereit, die zu Entwicklungszwecken die Azure-Dienste Blob, Warteschlange und Tabelle emuliert.

1. Öffnen Sie in Visual Studio Code ein neues Terminal.

2. Führen Sie den folgenden Befehl aus, um Azurite zu starten.

   npx -y azurite --location ./.azurite/data --debug ./.azurite/logs
   

   Mit diesem Befehl wird Azurite installiert und im aktuellen Verzeichnis gestartet. Das --location-Flag gibt den Speicherort der Daten an, und das --debug-Flag gibt den Speicherort der Protokolle an.

3. Öffnen Sie die .gitignore-Datei, und fügen Sie die folgende Zeile hinzu, um die Azurite-Daten und -Protokolle zu ignorieren.

   .azurite
   

   Diese Zeile stellt sicher, dass die Azurite-Daten und -Protokolle nicht an das Repository committet werden.

Festlegen von Haltepunkten

Wenn die Full-Stack-Anwendung gestartet wird, fordert der Angular-Front-End-Client die Urlaubsdaten aus der Functions-Back-End-Anwendung an. Die beiden Anwendungen arbeiten zusammen, um die Daten abzurufen und im Browser zu rendern.

Zum Anzeigen einer Liste mit Urlaubszielen führt die Angular-Anwendung die Funktion getVacations() in der Datei vacations.component.ts aus, die den Endpunkt vacations in der Azure Functions-API aufruft. Die Datei functions/getVacations.ts definiert die Route des Endpunkts. Legen Sie in diesen Dateien Haltepunkte fest, sodass Sie beim Debuggen den Code zum Abrufen der Urlaubsziele durchlaufen können.

1. Öffnen Sie in Visual Studio Code die Datei src/app/vacations/vacations.component.ts der Anwendung, und suchen Sie nach der Funktion getVacations().

2. Legen Sie einen Haltepunkt fest, indem Sie den Bundsteg des Editors links neben der ersten Codezeile (this.vacationService.getAll();) in der Funktion getVacations() auswählen.

   

3. Öffnen Sie die Datei functions/src/functions/getVacations.ts, und legen Sie einen Breakpoint fest, indem Sie die Leiste des Editors links neben der try {-Zeile auswählen.

Ausführen und Debuggen der Anwendung

Nachdem Sie in den Anwendungen Angular und Functions Haltepunkte festgelegt haben, können Sie diese zusammen durchlaufen und debuggen.

Hinweis

Führen Sie die Funktionen noch nicht in Azure aus. Sie verwenden Azure Functions Core Tools (CLI), um lokal auszuführen und zu debuggen.

Weiterleiten der Anforderungen von Angular an Functions

Die Azure Functions-API wird an Port 7071 ausgeführt, die Angular-Anwendung an Port 4200. Da die Angular-Anwendung keine domänenübergreifenden Anforderungen senden kann, leiten Sie die Aufrufe von der Angular-Anwendung an die Functions-Anwendung weiter.

Damit die Angular-Anwendung mit der Functions-Anwendung kommunizieren und Anforderungen an diese weiterleiten kann, öffnen Sie proxy.conf.json und geben Port 7071 an.

{
  "/api": {
    "target": "http://localhost:7071",
    "secure": false
  }
}

Hinweis

Die Node.js Express-Anwendung hat Port 7070 verwendet. Wenn Sie die Node.js Express-Anwendung entfernt haben, können Sie für die Functions-Anwendung auch Port 7070 verwenden. Zu Lernzwecken behalten Sie jedoch beide Anwendungen bei.

Debuggen beider Anwendungen

Wenn Sie die Anwendungen zusammen ausführen und debuggen, wird die App an den Haltepunkten angehalten, sodass Sie die Möglichkeit haben, die Zusammenarbeit dieser Anwendungen zu erkunden.

1. Drücken Sie F1, um die Visual Studio Code-Befehlspalette zu öffnen.

2. Geben Sie Ansicht: Anzeigen, Ausführen und Debuggen ein, und wählen Sie die Option aus.

3. Wählen Sie oben im Bereich Ausführen und Debuggen die Option Functions und Angular debuggen in der Dropdownliste aus.

4. Drücken Sie F5, um den Debugger zu starten.

   Die Anwendung wird gestartet, um die Liste mit Urlaubszielen abzurufen. Mit VacationComponent von Angular wird eine HTTP-Anforderung gestartet, um die Urlaubsziele abzurufen. Wenn der Browser geöffnet wird, wird die Codeausführung beim ersten Haltepunkt in der Datei vacations.component.ts in der Funktion getVacations() angehalten.

   

5. Beenden Sie die Pause, und setzen Sie die Ausführung fort, indem Sie F5 drücken.

6. Der Code wird am zweiten Haltepunkt in der Datei functions/vacations-get/index.ts angehalten, da die Angular-Anwendung auf die Functions-Route vacations trifft. Beenden Sie die Pause, und setzen Sie die Ausführung fort, indem Sie F5 drücken.

7. Es werden zwei Debuggingprozesse ausgeführt: einer für Angular und einer für Azure Functions. Drücken Sie UMSCHALT+F5, um den aktiven Debugger zu beenden.

8. Drücken Sie UMSCHALT+F5, um den verbleibenden Debugger zu beenden.