Ćwiczenie — uruchamianie i debugowanie usług Azure Functions i Angular

Ukończone

W tym ćwiczeniu uruchomisz i debugujesz aplikację Angular i aplikację usługi Azure Functions razem. Punkty przerwania ustawia się w kodzie Angular, który wyświetla aplikację internetową w przeglądarce i w kodzie usługi Functions, który pobiera i renderuje urlopy. Następnie użyjesz punktów przerwania usługi Angular i Functions, aby przejść przez kod Functions i Angular za pomocą debugera.

Uwaga

Pliki .vscode/launch.json i .vscode/tasks.json są integralną częścią debugowania tego projektu.

Uruchamianie usługi Azurite dla magazynu funkcji lokalnych

Usługa Azure Functions używa usługi Azure Storage do przechowywania danych. Aby lokalnie uruchomić aplikację usługi Functions, możesz użyć rozwiązania Azurite, lokalnego emulatora usługi Azure Storage. Usługa Azurite udostępnia środowisko lokalne, które emuluje usługi Azure Blob, Queue i Table na potrzeby programowania.

1. Otwórz nowy terminal w programie Visual Studio Code.

2. Uruchom następujące polecenie, aby uruchomić Azurite.

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

   To polecenie instaluje azurite i uruchamia go w bieżącym katalogu. Flaga --location określa lokalizację danych, a flaga --debug określa lokalizację dzienników.

3. .gitignore Otwórz plik i dodaj następujący wiersz, aby zignorować dane i dzienniki Azurite.

   .azurite
   

   Ten wiersz zapewnia, że dane i dzienniki Azurite nie są zatwierdzane w repozytorium.

Ustawianie punktów przerwania

Po uruchomieniu aplikacji pełnego stosu klient frontonu Angular żąda danych urlopowych z aplikacji zaplecza usługi Functions. Obie aplikacje współpracują ze sobą, aby pobrać dane i renderować je w przeglądarce.

Aby wyświetlić listę urlopów, aplikacja Angular uruchamia getVacations() funkcję w pliku vacations.component.ts , który wywołuje vacations punkt końcowy w interfejsie API usługi Azure Functions. Funkcje/getVacations.ts plików definiują trasę punktu końcowego. Ustaw punkty przerwania w tych plikach, więc podczas debugowania można przejść przez kod pobierający urlopy.

1. W programie Visual Studio Code otwórz plik src/app/vacations/vacations.component.ts aplikacji i znajdź getVacations() funkcję.

2. Ustaw punkt przerwania, wybierając rynnę edytora po lewej stronie pierwszego wiersza kodu , this.vacationService.getAll();wewnątrz getVacations() funkcji .

   

3. Otwórz plik functions/src/functions/getVacations.ts i ustaw punkt przerwania, wybierając rynnę edytora po lewej try { stronie wiersza.

Uruchamianie i debugowanie aplikacji

Teraz, gdy masz punkty przerwania zarówno w aplikacjach Angular, jak i w aplikacjach usługi Functions, możesz wykonać kroki i debugować je razem.

Uwaga

Nie uruchamiasz jeszcze funkcji na platformie Azure. Do uruchamiania i debugowania lokalnego używasz narzędzi Azure Functions Core Tools (CLI).

Serwer proxy żądań z usługi Angular do usługi Functions

Interfejs API usługi Azure Functions działa na porcie 7071, a aplikacja Angular działa na porcie 4200. Aplikacja Angular nie może wysyłać żądań między domenami do aplikacji usługi Functions, dlatego serwer proxy wywołań z aplikacji Angular do aplikacji usługi Functions.

Aby umożliwić aplikacji Angular rozmowę z żądaniami i serwerem proxy do aplikacji usługi Functions, otwórz proxy.conf.json i zmień port na 7071.

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

Uwaga

Aplikacja Node.js Express używała portu 7070. Jeśli usunięto aplikację Node.js Express, możesz również użyć portu 7070 dla aplikacji usługi Functions. Jednak w celach szkoleniowych zachowasz obie aplikacje.

Debugowanie obu aplikacji

Podczas uruchamiania i debugowania aplikacji aplikacja wstrzymuje się w punktach przerwania, dzięki czemu masz możliwość zapoznania się ze sposobem współdziałania tych aplikacji.

1. Otwórz paletę poleceń programu Visual Studio Code, naciskając klawisz F1.

2. Wpisz i wybierz pozycję Widok: Pokaż polecenie Uruchom i Debuguj.

3. W górnej części okienka Uruchamianie i debugowanie wybierz pozycję Debuguj funkcje i rozwiązanie Angular z listy rozwijanej.

4. Naciśnij klawisz F5 , aby uruchomić debuger.

   Aplikacja zostanie uruchomiona, aby uzyskać listę urlopów. Usługa Angular VacationComponent uruchamia żądanie HTTP, aby uzyskać urlopy. Po otwarciu przeglądarki wykonywanie kodu zostanie wstrzymane w pierwszym punkcie przerwania w pliku vacations.component.ts w getVacations() funkcji.

   

5. Usuń wykonywanie i kontynuuj, naciskając klawisz F5.

6. Kod wstrzymuje się w drugim punkcie przerwania w pliku functions/vacations-get/index.ts , ponieważ aplikacja Angular osiąga trasę usługi Functions vacations . Usuń wykonywanie i kontynuuj, naciskając klawisz F5.

7. Uruchomione są dwa procesy debugowania: jeden dla środowiska Angular i jeden dla usługi Azure Functions. Naciśnij klawisze Shift+F5 , aby zatrzymać aktywny debuger.

8. Naciśnij klawisze Shift+F5 , aby zatrzymać pozostały debuger.