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 Azure Developer CLI Visual Studio Code-bővítményének telepítése
Visual Studio Code-on keresztül
Nyissa meg a Visual Studio Code-ot.
A Nézet menüben válassza a Bővítmények lehetőséget.
A keresőmezőbe írja be a következőt
Azure Developer CLI
:Válassza a Telepítés lehetőséget.
Marketplace-en keresztül
A böngészőben nyissa meg az Azure Developer CLI – VS Code Extension lapot.
Válassza a Telepítés lehetőséget.
Új alkalmazás inicializálása
Hozzon létre és nyisson meg egy új könyvtárat a Visual Studio Code-ban.
A Nézet menüben válassza a Parancskatalógus...lehetőséget.
Írja be és válassza ki a kívánt elemet
Azure Developer: init
.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.
Nyissa meg a parancskatalógust.
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:
Nyissa meg
lists.ts
a projekt könyvtárábansrc/api/src/routes
.Állítson be egy töréspontot a 16. sorban.
A tevékenységsávon válassza a Hibakeresési API hibakeresési konfigurációjának >futtatása és hibakeresése>nyilat.
A Nézet menüben válassza a Hibakeresési konzol lehetőséget.
Várjon, amíg az üzenet azt jelzi, hogy a hibakereső figyeli a 3100-at.
Az előnyben részesített terminálhéjban adja meg a következő parancsot:
curl http://localhost:3100/lists
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.
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:
Nyissa meg a parancskatalógust, és futtassa a Feladat: Feladat futtatása parancsot.
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
.Nyissa meg
todoItemListPane.tsx
a projekt könyvtárábansrc/web/src/components
.Állítson be egy töréspontot a 150. sorban (a
deleteItems
függvény első sora).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.
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.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
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 előzetes verziójú funkció telepítése és engedélyezése
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.
Nyissa meg a Visual Studio előzetes verzióját.
Az Eszközök menüben válassza a Beállítások>előzetes verziójú szolgáltatások lehetőséget.
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
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 aazure.yaml
fájlt. A Visual Studio automatikusan inicializálja az alkalmazásmodellt, és fut.azd env refresh
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
Nyissa meg
ListController.cs
a projekt könyvtárábansrc/api
.Állítson be egy töréspontot a 20. sorban.
Nyomja le az
<F5>
gombot.Várja meg, amíg az üzenet azt jelzi, hogy a webkiszolgáló figyeli a 3101-s portot.
Az előnyben részesített böngészőben adja meg a következő címet:
https://localhost:3101/lists
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
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:
Válassza a ... lehetőséget a Szolgáltatásfüggőségek panel jobb felső sarkában.
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.
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.
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:
A Megoldáskezelő bontsa ki a Csatlakozás szolgáltatások elemet.
Válassza a Közzététel lehetőséget.
Válassza a Közzétételi profil hozzáadása lehetőséget.
Válassza ki az Azure-célértéket, és válassza a Tovább gombot.
Válassza az Azure Developer CLI-környezetet, majd a Tovább lehetőséget.
Válassza ki a környezetet.
Válassza a Befejezés lehetőséget.
Other resources
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.