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

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 biblioteki azd
• Uruchamianie azd za pomocą szablonu Node.js
• Node.js z serwerem npm (wersja 16.13.1 LTS)

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

Za pośrednictwem programu Visual Studio Code

1. Otwórz Visual Studio Code.

2. Z menu Widok wybierz pozycję Rozszerzenia.

3. W polu wyszukiwania wprowadź .Azure Developer CLI

4. Wybierz Zainstaluj.

Za pośrednictwem witryny Marketplace

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

2. Wybierz Zainstaluj.

Inicjowanie nowej aplikacji

1. Utwórz i otwórz nowy katalog w programie Visual Studio Code.

2. Z menu Widok wybierz pozycję Paleta poleceń....

3. Wpisz i wybierz .Azure Developer: init

   

4. 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.

1. Otwórz paletę poleceń.

2. 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:

1. Z katalogu projektu src/api/src/routes otwórz plik lists.ts.

2. Ustaw punkt przerwania w wierszu 16.

3. Na pasku działań wybierz pozycję Uruchom i Debuguj debugowanie>konfiguracji >debugowania interfejsu API Rozpocznij debugowanie strzałki.

   

4. W menu Widok wybierz pozycję Konsola debugowania.

5. Poczekaj na komunikat wskazujący, że debuger nasłuchuje na porcie 3100.

   

6. W preferowanej powłoce terminalu wprowadź następujące polecenie: curl http://localhost:3100/lists

   

7. 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.

8. 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:

1. Otwórz paletę poleceń i uruchom zadanie: Uruchom zadanie.

   

2. 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.

3. W katalogu projektu src/web/src/components otwórz plik todoItemListPane.tsx.

4. Ustaw punkt przerwania w wierszu 150 (pierwszy wiersz deleteItems funkcji).

5. Na pasku działań wybierz pozycję Uruchom i debuguj debugowanie>w sieci Web, a następnie >wybierz strzałkę Rozpocznij debugowanie.

   

6. 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ń.

   

7. 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

8. 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 biblioteki azd
• Uruchamianie azd za pomocą szablonu Node.js
• Zestaw .NET SDK 6.0

Instalowanie i włączanie funkcji w wersji zapoznawczej

1. 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ć.

2. Otwórz program Visual Studio (wersja zapoznawcza).

3. Z menu Narzędzia wybierz pozycję Opcje funkcje> w wersji zapoznawczej.

4. Upewnij się, że integracja z usługą azd— interfejs wiersza polecenia dla deweloperów platformy Azure jest włączony.

   

Otwieranie rozwiązania interfejsu API

1. 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.

2. 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

   

Uruchamianie i debugowanie

1. Z katalogu projektu src/api otwórz plik ListController.cs.

2. Ustaw punkt przerwania w wierszu 20.

   

3. Naciśnij klawisz <F5>.

4. Poczekaj na komunikat wskazujący, że serwer internetowy nasłuchuje na porcie 3101.

   

5. W preferowanej przeglądarce wprowadź następujący adres: https://localhost:3101/lists

6. 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

7. Naciśnij klawisz , <F5> aby kontynuować uruchamianie aplikacji.

   Przykładowa aplikacja zwraca listę (lub pustą listę [], jeśli wcześniej nie uruchomiono frontonu internetowego):

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

Inne azd integracje

Zarządzanie azd środowiskiem

Aby zarządzać azd środowiskiem:

1. Wybierz pozycję ... w prawym górnym rogu okienka Zależności usługi.

2. Wybierz jedną z następujących opcji w menu rozwijanym:

   • Utwórz nowe środowisko
   • Wybierz i ustaw określone środowisko jako bieżące aktywne środowisko
   • Anulowanie aprowizacji środowiska

   

Aprowizuj zasoby środowiska

Zasoby platformy Azure można aprowizować w swoim środowisku.

1. W Połączenie ed Services kliknij ikonę w prawym górnym rogu, aby przywrócić/aprowizować zasoby środowiska.

   

2. Potwierdź nazwę środowiska, subskrypcję i lokalizację.

Publikowanie aplikacji

Jeśli wprowadzisz jakiekolwiek aktualizacje, możesz opublikować aplikację, wykonując następujące kroki:

1. W Eksplorator rozwiązań rozwiń węzeł usługi Połączenie ed.

2. Wybierz Publikuj.

3. Wybierz pozycję Dodaj profil publikowania.

4. Wybierz pozycję Docelowa platformy Azure, a następnie wybierz pozycję Dalej.

5. Wybierz pozycję Środowisko interfejsu wiersza polecenia dla deweloperów platformy Azure, a następnie wybierz pozycję Dalej.

   

6. Wybierz środowisko.

7. Wybierz Zakończ.

Inne zasoby

• Usługa Połączenie programu Visual Studio
• Omówienie narzędzia publikowania w programie Visual Studio

Zażądaj pomocy

Aby uzyskać informacje na temat tworzenia usterki, żądania pomocy lub zaproponowania nowej funkcji dla interfejsu wiersza polecenia dla deweloperów platformy Azure, odwiedź stronę rozwiązywania problemów i pomocy technicznej .

Następne kroki

Konfigurowanie potoku i aktualizacji wypychanych przy użyciu funkcji GitHub Actions