Uruchamianie i debugowanie aplikacji z włączoną obsługą narzędzia Azure Developer CLI

Artykuł
12/11/2023

Uruchamianie i debugowanie aplikacji na komputerze lokalnym przy użyciu rozszerzenia programu Visual Studio Code dla interfejsu wiersza polecenia dla deweloperów platformy Azure (azd). W tym przewodniku użyjesz aplikacji internetowej React z interfejsem API Node.js i bazą danych MongoDB na platformie Azure . Zasady, które poznasz w tym artykule, można zastosować do dowolnego z szablonów interfejsu wiersza polecenia dla deweloperów platformy Azure.

Wymagania wstępne

Instalowanie rozszerzenia programu Visual Studio Code dla interfejsu wiersza polecenia dla deweloperów platformy Azure

Za pośrednictwem programu Visual Studio Code

Otwórz Visual Studio Code.
Z menu Widok wybierz pozycję Rozszerzenia.
W polu wyszukiwania wprowadź .Azure Developer CLI
Wybierz Zainstaluj.

Za pośrednictwem witryny Marketplace

Korzystając z przeglądarki, przejdź do strony Interfejs wiersza polecenia dla deweloperów platformy Azure — rozszerzenie programu VS Code.
Wybierz Zainstaluj.

Inicjowanie nowej aplikacji

Utwórz i otwórz nowy katalog w programie Visual Studio Code.
Z menu Widok wybierz pozycję Paleta poleceń....
Wpisz i wybierz .Azure Developer: init
Wybierz szablon Azure-Samples/todo-nodejs-mongo.

Zapoznaj się z następującymi plikami zawartymi .vscode w katalogu:

Plik	opis
`launch.json`	Definiuje konfiguracje debugowania, takie jak Debugowanie internetowego i debugowania interfejsu API. aby wyświetlić opcje konfiguracji debugowania, wybierz pozycję Uruchom z menu Widok . Dostępne konfiguracje debugowania są wyświetlane w górnej części okienka. Aby dowiedzieć się więcej na temat debugowania w programie Visual Studio Code, zobacz Debugowanie.
`tasks.json`	Definiuje konfiguracje uruchamiania serwera internetowego lub serwera interfejsu API. Aby wyświetlić te opcje konfiguracji, otwórz paletę poleceń i uruchom zadanie: uruchom zadanie. Aby dowiedzieć się więcej o zadaniach programu Visual Studio Code, zobacz Integracja z narzędziami zewnętrznymi za pośrednictwem zadań.

Uwaga

Jeśli używasz szablonu JĘZYKA C# SWA-func MS SQL, musisz ręcznie uruchomić zadanie Uruchamiania interfejsu API, a następnie debugować interfejs API (F5). Po wyświetleniu monitu o wybranie z listy uruchomionych procesów platformy .NET wyszukaj nazwę aplikacji i wybierz ją.

Aprowizacja zasobów Azure

Przed rozpoczęciem debugowania aprowizuj niezbędne zasoby platformy Azure.

Otwórz paletę poleceń.
Wprowadź azure Developer: provision Azure resources (Deweloper platformy Azure: aprowizuj zasoby platformy Azure).

Debugowanie interfejsu API

Debugowanie konfiguracji Debugowanie interfejsu API automatycznie uruchamia serwer interfejsu API i dołącza debuger. Aby przetestować ten wzorzec, wykonaj następujące czynności:

Z katalogu projektu src/api/src/routes otwórz plik lists.ts.
Ustaw punkt przerwania w wierszu 16.
Na pasku działań wybierz pozycję Uruchom i Debuguj debugowanie>konfiguracji >debugowania interfejsu API Rozpocznij debugowanie strzałki.
W menu Widok wybierz pozycję Konsola debugowania.
Poczekaj na komunikat wskazujący, że debuger nasłuchuje na porcie 3100.
W preferowanej powłoce terminalu wprowadź następujące polecenie: curl http://localhost:3100/lists
Po osiągnięciu ustawionego wcześniej punktu przerwania wykonanie aplikacji zostanie wstrzymane. W tym momencie można wykonywać standardowe zadania debugowania, takie jak:
- Sprawdzanie zmiennych
- Przyjrzyj się stosowi wywołań
- Ustaw inne punkty przerwania.
Naciśnij klawisz , <F5> aby kontynuować uruchamianie aplikacji. Przykładowa aplikacja zwraca pustą listę.

Debugowanie aplikacji React Frontend

Aby użyć konfiguracji debugowania sieci Web , należy uruchomić obie te elementy:

Serwer interfejsu API
Serwer internetowy programowania

Aby przetestować ten wzorzec, wykonaj następujące czynności:

Otwórz paletę poleceń i uruchom zadanie: Uruchom zadanie.
Wprowadź i wybierz pozycję Start API and Web (Uruchom interfejs API i sieć Web)

Możesz sprawdzić, czy lokalny serwer internetowy jest uruchomiony, przechodząc do następującego adresu URL w przeglądarce internetowej: http://localhost:3000.
W katalogu projektu src/web/src/components otwórz plik todoItemListPane.tsx.
Ustaw punkt przerwania w wierszu 150 (pierwszy wiersz deleteItems funkcji).
Na pasku działań wybierz pozycję Uruchom i debuguj debugowanie>w sieci Web, a następnie > wybierz strzałkę Rozpocznij debugowanie.
Uruchomienie aplikacji internetowej spowoduje, że domyślna przeglądarka otworzy następujący adres URL: http://localhost:3000. Teraz możesz debugować aplikację, dodając element, wybierając go z listy i wybierając pozycję Usuń.
Po osiągnięciu ustawionego wcześniej punktu przerwania wykonanie aplikacji zostanie wstrzymane. W tym momencie można wykonywać standardowe zadania debugowania, takie jak:
- Sprawdzanie zmiennych
- Przyjrzyj się stosowi wywołań
- Ustawianie innych punktów przerwania
Naciśnij klawisz , <F5> aby kontynuować uruchamianie aplikacji, a wybrany element zostanie usunięty.

Uruchamianie i debugowanie aplikacji utworzonych na komputerze lokalnym przy użyciu programu Visual Studio i interfejsu wiersza polecenia dla deweloperów platformy Azure (azd). W tym przewodniku użyjesz aplikacji internetowej React z interfejsem API języka C# i bazą danych MongoDB na platformie Azure . Zasady, które poznasz w tym artykule, można zastosować do dowolnego z szablonów interfejsu wiersza polecenia dla deweloperów platformy Azure.

Wymagania wstępne

Instalowanie i włączanie funkcji w wersji zapoznawczej

Instalowanie programu Visual Studio (wersja zapoznawcza)

Uwaga

Różni się to od programu Visual Studio. Jeśli masz wersję inną niż zapoznawcza programu Visual Studio, nadal musisz ją zainstalować.
Otwórz program Visual Studio (wersja zapoznawcza).
Z menu Narzędzia wybierz pozycję Opcje funkcje> w wersji zapoznawczej.
Upewnij się, że integracja z usługą azd— interfejs wiersza polecenia dla deweloperów platformy Azure jest włączony.

Otwieranie rozwiązania interfejsu API

Todo.Api.sln Otwórz rozwiązanie w /src/api katalogu.

Jeśli włączono azd funkcję integracji, azure.yaml zostanie wykryty plik. Program Visual Studio automatycznie inicjuje model aplikacji i uruchamia polecenie azd env refresh.
Rozwiń węzeł Połączenie ed Services, aby wyświetlić wszystkie zależności.

Chociaż fronton internetowy działający w usłudze aplikacja systemu Azure nie jest częścią rozwiązania interfejsu API, jest wykrywany i uwzględniany w obszarze Zależności usług