Az Azure Developer CLI-hez engedélyezett alkalmazások futtatása és hibakeresése

Alkalmazások futtatása és hibakeresése a helyi gépen az Azure Developer CLI (azd) Visual Studio Code bővítményével. Ebben az útmutatóban a React webalkalmazást fogja használni Node.js API-val és MongoDB-vel az Azure-sablonon . A cikkben ismertetett alapelveket bármelyik Azure Developer CLI-sablonra alkalmazhatja.

Előfeltételek

• Az azd telepítése
• Futtatás azd a Node.js sablonnal
• Node.js és npm (v 16.13.1 LTS)

Az Azure Developer CLI Visual Studio Code-bővítményének telepítése

Visual Studio Code-on keresztül

1. Nyissa meg a Visual Studio Code-ot.

2. A Nézet menüben válassza a Bővítmények lehetőséget.

3. A keresőmezőbe írja be a következőt Azure Developer CLI:

4. Válassza a Telepítés lehetőséget.

Marketplace-en keresztül

1. A böngészőben nyissa meg az Azure Developer CLI – VS Code Extension lapot.

2. Válassza a Telepítés lehetőséget.

Új alkalmazás inicializálása

1. Hozzon létre és nyisson meg egy új könyvtárat a Visual Studio Code-ban.

2. A Nézet menüben válassza a Parancskatalógus...lehetőséget.

3. Írja be és válassza ki a kívánt elemet Azure Developer: init.

   

4. Válassza ki a sablont Azure-Samples/todo-nodejs-mongo.

   

Ismerkedjen meg a könyvtárban .vscode található alábbi fájlokkal:

Fájl	Leírás
launch.json	Meghatározza az olyan hibakeresési konfigurációkat, mint a Web hibakeresése és a Hibakeresési API. A hibakeresési konfigurációs beállítások megtekintéséhez válassza a Futtatás lehetőséget a Nézet menüben. Az elérhető hibakeresési konfigurációk a panel tetején jelennek meg. A Visual Studio Code hibakereséséről további információt a Hibakeresés című témakörben talál.
tasks.json	Meghatározza a web- vagy API-kiszolgáló indításához megadott konfigurációkat. A konfigurációs beállítások megtekintéséhez nyissa meg a parancskatalógust, és futtassa a Feladat: feladat futtatása parancsot. A Visual Studio Code-feladatokkal kapcsolatos további információkért lásd : Integrálás külső eszközökkel feladatokon keresztül.

Megjegyzés:

Ha A C# SWA-func MS SQL-sablont használja, manuálisan kell elindítania az API-feladat elindítását, majd az API hibakeresését (F5). Amikor azt kéri, hogy válasszon a futó .NET-folyamatok listájából, keresse meg az alkalmazás nevét, és válassza ki.

Azure-erőforrások kiépítése

A hibakeresés megkezdése előtt építse ki a szükséges Azure-erőforrásokat.

1. Nyissa meg a parancskatalógust.

2. Adja meg az Azure Developert: Azure-erőforrások kiépítése.

   

API hibakeresése

A hibakeresési konfiguráció hibakeresési API automatikusan futtatja az API-kiszolgálót, és csatolja a hibakeresőt. A minta teszteléséhez hajtsa végre a következő lépéseket:

1. Nyissa meg lists.tsa projekt könyvtárábansrc/api/src/routes.

2. Állítson be egy töréspontot a 16. sorban.

3. A tevékenységsávon válassza a Hibakeresési API hibakeresési konfigurációjának >futtatása és hibakeresése>nyilat.

   

4. A Nézet menüben válassza a Hibakeresési konzol lehetőséget.

5. Várjon, amíg az üzenet azt jelzi, hogy a hibakereső figyeli a 3100-at.

   

6. Az előnyben részesített terminálhéjban adja meg a következő parancsot: curl http://localhost:3100/lists

   

7. Ha a korábban beállított töréspontot eléri, az alkalmazás végrehajtása szünetel. Ezen a ponton szabványos hibakeresési feladatokat hajthat végre, például:

   • Változók vizsgálata
   • Tekintse meg a hívási vermet
   • Egyéb töréspontok beállítása.

8. Nyomja le <F5> az alkalmazás futtatásának folytatásához. A mintaalkalmazás üres listát ad vissza.

React Frontend-alkalmazás hibakeresése

A hibakeresési webkonfiguráció használatához mindkettőt el kell indítania:

• Az API-kiszolgáló
• A fejlesztői webkiszolgáló

A minta teszteléséhez hajtsa végre a következő lépéseket:

1. Nyissa meg a parancskatalógust, és futtassa a Feladat: Feladat futtatása parancsot.

   

2. Adja meg és válassza a Start API és a Web lehetőséget

   

   Ellenőrizheti, hogy a helyi webkiszolgáló fut-e, ha a következő URL-címre navigál egy webböngészőben: http://localhost:3000.

3. Nyissa meg todoItemListPane.tsxa projekt könyvtárábansrc/web/src/components.

4. Állítson be egy töréspontot a 150. sorban (a deleteItems függvény első sora).

5. A tevékenységsávon válassza a Webes hibakeresési konfiguráció futtatása és hibakeresése> lehetőséget > a Hibakeresés indítása nyíllal.

   

6. A webalkalmazás futtatásakor az alapértelmezett böngésző a következő URL-címet fogja megnyitni: http://localhost:3000. Az alkalmazás hibakereséséhez adjon hozzá egy elemet, jelölje ki a listából, és válassza a Törlés lehetőséget.

   

7. Ha a korábban beállított töréspontot eléri, az alkalmazás végrehajtása szünetel. Ezen a ponton szabványos hibakeresési feladatokat végezhet, például:

   • Változók vizsgálata
   • Tekintse meg a hívási vermet
   • Egyéb töréspontok beállítása

8. Nyomja le <F5> az alkalmazás futtatásának folytatásához, és a kijelölt elem törlődik.

Futtassa és hibakeresésre használja a helyi gépére épülő alkalmazásokat a Visual Studio és az Azure Developer CLI (azd) használatával. Ebben az útmutatóban a React Web Appot fogja használni c # API-val és MongoDB-vel az Azure-sablonon . A cikkben ismertetett alapelveket bármelyik Azure Developer CLI-sablonra alkalmazhatja.

Előfeltételek

• Az azd telepítése
• Futtatás azd a Node.js sablonnal
• .NET SDK 6.0

Az előzetes verziójú funkció telepítése és engedélyezése

1. A Visual Studio előzetes verziójának telepítése

   Megjegyzés:

   Ez eltér a Visual Studiótól. Ha a Visual Studio nem előzetes verziójával rendelkezik, akkor is telepítenie kell.

2. Nyissa meg a Visual Studio előzetes verzióját.

3. Az Eszközök menüben válassza a Beállítások>előzetes verziójú szolgáltatások lehetőséget.

4. Győződjön meg arról, hogy az azd integrációja engedélyezve van az Azure Developer CLI-vel .

   

Az API-megoldás megnyitása

1. Nyissa meg a Todo.Api.sln megoldást a /src/api könyvtárban.

   Ha engedélyezte az azd integrációs funkciót, a rendszer észleli a azure.yaml fájlt. A Visual Studio automatikusan inicializálja az alkalmazásmodellt, és fut.azd env refresh

2. Bontsa ki a Csatlakozás szolgáltatások elemet az összes függőség megtekintéséhez.

   Bár a Azure-alkalmazás szolgáltatáson futó webes előtér nem része az API-megoldásnak, a szolgáltatás függőségei között észleli és tartalmazza.

   

Futtatás és hibakeresés

1. Nyissa meg ListController.csa projekt könyvtárábansrc/api.

2. Állítson be egy töréspontot a 20. sorban.

   

3. Nyomja le az <F5> gombot.

4. Várja meg, amíg az üzenet azt jelzi, hogy a webkiszolgáló figyeli a 3101-s portot.

   

5. Az előnyben részesített böngészőben adja meg a következő címet: https://localhost:3101/lists

6. Ha a korábban beállított töréspontot eléri, az alkalmazás végrehajtása szünetel. Ezen a ponton szabványos hibakeresési feladatokat hajthat végre, például:

   • Változók vizsgálata
   • Tekintse meg a hívási vermet
   • Egyéb töréspontok beállítása

7. Nyomja le <F5> az alkalmazás futtatásának folytatásához.

   A mintaalkalmazás egy listát (vagy egy üres listát [] ad vissza, ha korábban még nem indította el a webes előtért):

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

Egyéb azd integrációk

Környezet kezelése azd

A azd környezet kezelése:

1. Válassza a ... lehetőséget a Szolgáltatásfüggőségek panel jobb felső sarkában.

2. A legördülő menüben válassza az alábbi lehetőségek egyikét:

   • Új környezet létrehozása
   • Adott környezet kiválasztása és beállítása aktuális aktív környezetként
   • Környezet bontása

   

Környezeti erőforrások kiépítése

Azure-erőforrásokat építhet ki a környezetében.

1. A Csatlakozás ed Servicesben kattintson a jobb felső sarokban lévő ikonra a környezeti erőforrások visszaállításához/kiépítéséhez.

   

2. Erősítse meg a környezet nevét, előfizetését és helyét.

Alkalmazás közzététele

Ha bármilyen frissítést végez, az alábbi lépésekkel teheti közzé az alkalmazást:

1. A Megoldáskezelő bontsa ki a Csatlakozás szolgáltatások elemet.

2. Válassza a Közzététel lehetőséget.

3. Válassza a Közzétételi profil hozzáadása lehetőséget.

4. Válassza ki az Azure-célértéket, és válassza a Tovább gombot.

5. Válassza az Azure Developer CLI-környezetet, majd a Tovább lehetőséget.

   

6. Válassza ki a környezetet.

7. Válassza a Befejezés lehetőséget.

Other resources

• Visual Studio Csatlakozás szolgáltatás
• A Publish Tool áttekintése a Visual Studióban

Segítség kérése

Ha tudni szeretné, hogyan nyújthat be hibát, kérhet segítséget, vagy javasolhat új funkciót az Azure Developer CLI-hez, látogasson el a hibaelhárítási és támogatási oldalra.

További lépések

Folyamat konfigurálása és frissítések leküldése a GitHub Actions használatával