Spouštění a ladění aplikací povolených pro Azure Developer CLI

Spouštění a ladění aplikací na místním počítači pomocí rozšíření Visual Studio Code pro Azure Developer CLI (azd). V této příručce použijete webovou aplikaci React s rozhraním Node.js API a MongoDB v šabloně Azure . Principy, které se naučíte v tomto článku, můžete použít na některou ze šablon Azure Developer CLI.

Požadavky

• Instalace azd
• Spuštění azd pomocí šablony Node.js
• Node.js s npm (v 16.13.1 LTS)

Instalace rozšíření Visual Studio Code pro Azure Developer CLI

Prostřednictvím editoru Visual Studio Code

1. Otevřete Visual Studio Code.

2. V nabídce Zobrazení vyberte Rozšíření.

3. Do vyhledávacího pole zadejte Azure Developer CLI.

4. Vyberte volbu Instalovat.

Přes Marketplace

1. V prohlížeči přejděte na stránku rozšíření azure Developer CLI – VS Code.

2. Vyberte volbu Instalovat.

Inicializace nové aplikace

1. Vytvořte a otevřete nový adresář v editoru Visual Studio Code.

2. V nabídce Zobrazení vyberte Paleta příkazů....

3. Zadejte a vyberte Azure Developer: init.

   

4. Vyberte šablonu Azure-Samples/todo-nodejs-mongo.

   

Prozkoumejte následující soubory zahrnuté v .vscode adresáři:

Soubor	Popis
launch.json	Definuje konfigurace ladění, jako je ladění webového rozhraní API a rozhraní API pro ladění. chcete-li zobrazit možnosti konfigurace ladění, vyberte Spustit z nabídky Zobrazení . Dostupné konfigurace ladění jsou uvedeny v horní části podokna. Další informace o ladění v editoru Visual Studio Code najdete v tématu Ladění.
tasks.json	Definuje konfigurace pro spuštění webu nebo serveru rozhraní API. Pokud chcete zobrazit tyto možnosti konfigurace, otevřete paletu příkazů a spusťte úlohu: spustit úlohu. Další informace o úlohách editoru Visual Studio Code najdete v tématu Integrace s externími nástroji prostřednictvím úloh.

Poznámka:

Pokud používáte šablonu MS SQL jazyka C# SWA-func, budete muset ručně spustit úlohu Spuštění rozhraní API a pak ladit rozhraní API (F5). Když se zobrazí výzva k výběru ze seznamu spuštěných procesů .NET, vyhledejte název aplikace a vyberte ji.

Zřízení prostředků Azure

Než začnete s laděním, zřiďte potřebné prostředky Azure.

1. Otevřete paletu příkazů.

2. Zadejte Azure Developer: Zřízení prostředků Azure.

   

Ladění rozhraní API

Rozhraní API pro ladění konfigurace ladění automaticky spustí server rozhraní API a připojí ladicí program. Pokud chcete tento vzor otestovat, proveďte následující kroky:

1. V adresáři src/api/src/routes projektu otevřete lists.ts.

2. Nastavte zarážku na řádku 16.

3. Na panelu aktivit vyberte spustit a ladit>konfiguraci >ladění rozhraní API spustit ladění šipku.

   

4. V nabídce Zobrazení vyberte Konzola ladění.

5. Počkejte na zprávu, že ladicí program naslouchá na portu 3100.

   

6. V upřednostňovaném prostředí terminálu zadejte následující příkaz: curl http://localhost:3100/lists

   

7. Po dosažení zarážky, kterou jste nastavili dříve, se spuštění aplikace pozastaví. V tuto chvíli můžete provádět standardní úlohy ladění, například:

   • Kontrola proměnných
   • Podívejte se na zásobník volání.
   • Nastavte další zarážky.

8. Stisknutím pokračujte <F5> ve spuštění aplikace. Ukázková aplikace vrátí prázdný seznam.

Ladění front-endové aplikace React

Pokud chcete použít konfiguraci ladění webu , musíte spustit obojí:

• Server rozhraní API
• Vývojový webový server

Pokud chcete tento vzor otestovat, proveďte následující kroky:

1. Otevřete paletu příkazů a spusťte úlohu: Spustit úlohu.

   

2. Zadejte a vyberte Spustit rozhraní API a web.

   

   Pokud chcete zkontrolovat, jestli je místní webový server spuštěný, přejděte ve webovém prohlížeči na následující adresu URL: http://localhost:3000.

3. V adresáři src/web/src/components projektu otevřete todoItemListPane.tsx.

4. Nastavte zarážku na řádku 150 (první řádek deleteItems funkce).

5. Na panelu aktivit vyberte spustit a ladit>konfiguraci > ladění webu pomocí šipky Spustit ladění.

   

6. Spuštění webové aplikace způsobí, že váš výchozí prohlížeč otevře následující adresu URL: http://localhost:3000. Teď můžete aplikaci ladit tak, že přidáte položku, vyberete ji ze seznamu a vyberete Odstranit.

   

7. Po dosažení zarážky, kterou jste nastavili dříve, se spuštění aplikace pozastaví. V tuto chvíli můžete provádět standardní úlohy ladění, například:

   • Kontrola proměnných
   • Podívejte se na zásobník volání.
   • Nastavení dalších zarážek

8. Stisknutím klávesy <F5> pokračujte ve spuštění aplikace a vybraná položka se odstraní.

Spouštění a ladění aplikací založených na místním počítači pomocí sady Visual Studio a Azure Developer CLI (azd). V této příručce použijete webovou aplikaci React s rozhraním API jazyka C# a MongoDB v šabloně Azure . Principy, které se naučíte v tomto článku, můžete použít na některou ze šablon Azure Developer CLI.

Požadavky

• Instalace azd
• Spuštění azd pomocí šablony Node.js
• .NET SDK 6.0

Instalace a povolení funkce Preview

1. Instalace sady Visual Studio Preview

   Poznámka:

   Toto se liší od sady Visual Studio. Pokud máte verzi sady Visual Studio, která není ve verzi Preview, musíte ji přesto nainstalovat.

2. Otevřete Visual Studio Preview.

3. V nabídce Nástroje vyberte Možnosti>funkce ve verzi Preview.

4. Ujistěte se, že je povolená integrace s azd, rozhraní příkazového řádku Azure Developer CLI .

   

Otevření řešení rozhraní API

1. Todo.Api.sln Otevřete řešení v /src/api adresáři.

   Pokud jste funkci integrace povolili azd , azure.yaml zjistí se soubor. Visual Studio automaticky inicializuje model aplikace a spustí azd env refresh.

2. Rozbalením Připojení ed Services zobrazte všechny závislosti.

   I když webový front-end spuštěný ve službě Aplikace Azure není součástí řešení rozhraní API, zjistí a zahrne se do závislostí služby.

   

Spuštění a ladění

1. V adresáři src/api projektu otevřete ListController.cs.

2. Nastavte zarážku na řádku 20.

   

3. Stiskněte <F5>.

4. Počkejte na zprávu, že webový server naslouchá na portu 3101.

   

5. V upřednostňovaném prohlížeči zadejte následující adresu: https://localhost:3101/lists

6. Po dosažení zarážky, kterou jste nastavili dříve, se spuštění aplikace pozastaví. V tuto chvíli můžete provádět standardní úlohy ladění, například:

   • Kontrola proměnných
   • Podívejte se na zásobník volání.
   • Nastavení dalších zarážek

7. Stisknutím pokračujte <F5> ve spuštění aplikace.

   Ukázková aplikace vrátí seznam (nebo prázdný seznam [], pokud jste ještě nespustí webový front-end):

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

Další azd integrace

Správa azd prostředí

azd Správa prostředí:

1. V pravém horním rohu podokna Závislosti služeb vyberte ... .

2. V rozevírací nabídce vyberte jednu z následujících možností:

   • Vytvoření nového prostředí
   • Výběr a nastavení konkrétního prostředí jako aktuálního aktivního prostředí
   • Zrušení zřízení prostředí

   

Zřízení prostředků prostředí

Prostředky Azure můžete zřídit pro své prostředí.

1. V Připojení ed Services klikněte na ikonu v pravém horním rohu a obnovte nebo zřiďte prostředky prostředí.

   

2. Potvrďte název prostředí, předplatné a umístění.

Publikování aplikace

Pokud provedete nějaké aktualizace, můžete aplikaci publikovat pomocí následujících kroků:

1. V Průzkumník řešení rozbalte Připojení služby.

2. Vyberte Publikovat.

3. Vyberte Přidat profil publikování.

4. Vyberte cíl Azure a vyberte Další.

5. Vyberte prostředí Azure Developer CLI a vyberte Další.

   

6. Vyberte prostředí.

7. Vyberte Dokončit.

Další prostředky

• Visual Studio Připojení ed Service
• Přehled nástroje pro publikování v sadě Visual Studio

Požádat o pomoc

Informace o tom, jak vytvořit chybu, požádat o pomoc nebo navrhnout novou funkci pro Azure Developer CLI, najdete na stránce pro řešení potíží a podporu .

Další kroky

Konfigurace kanálu a nabízených aktualizací pomocí GitHub Actions