Gyakorlat – Az Azure Functions és az Angular futtatása és hibakeresése

  • 5 perc

Ebben a gyakorlatban az Angular-alkalmazás és az Azure Functions-alkalmazás együttes futtatása és hibakeresése. Töréspontokat állíthat be az Angular-kódban, amely megjeleníti a webalkalmazást a böngészőben, valamint a szabadságokat lekérő és renderelő Functions-kódban. Ezután az Angular és a Functions töréspontok használatával lépegethet a Functions és az Angular kódon a hibakeresővel.

Feljegyzés

A .vscode/launch.json és a .vscode/tasks.json fájl elengedhetetlen a projekt hibakereséséhez.

Az Azurite indítása a helyi függvénytárhoz

Az Azure Functions az Azure Storage használatával tárolja az adatait. Az Azure Storage helyi emulátora, az Azurite használatával helyileg futtathatja a Functions alkalmazást. Az Azurite egy helyi környezetet biztosít, amely fejlesztési célokra emulálja az Azure Blob-, Queue- és Table-szolgáltatásokat.

  1. Nyisson meg egy új terminált a Visual Studio Code-ban.

  2. Futtassa a következő parancsot az Azurite elindításához.

    npx -y azurite --location ./.azurite/data --debug ./.azurite/logs

    Ez a parancs telepíti az azurite-ot, és elindítja az aktuális könyvtárban. A --location jelölő megadja az adatok helyét, a --debug jelölő pedig a naplók helyét.

  3. Nyissa meg a .gitignore fájlt, és adja hozzá a következő sort az Azurite-adatok és -naplók figyelmen kívül hagyásához.

    .azurite

    Ez a sor biztosítja, hogy az Azurite-adatok és -naplók ne legyenek lekötve az adattárhoz.

Töréspontok beállítása

A teljes veremű alkalmazás elindulásakor az Angular előtér-ügyfél a Functions háttéralkalmazásából kéri le a szabadságadatokat. A két alkalmazás együtt dolgozik az adatok lekérésében és a böngészőben való megjelenítésében.

A szabadságok listájának megjelenítéséhez az Angular-alkalmazás futtatja a getVacations() függvényt a vacations.component.ts fájlban, amely meghívja a vacations végpontot az Azure Functions API-ban. A fájlfüggvények /getVacations.ts határozzák meg a végpont útvonalát. Állítson be töréspontokat ezekben a fájlokban, így a hibakeresés során végiglépkedhet a szabadságokat beolvasó kódon.

  1. A Visual Studio Code-ban nyissa meg az alkalmazás src/app/vacations/vacations.component.ts fájlját, és keresse meg a függvénytgetVacations().

  2. Állítson be töréspontot úgy, hogy kiválasztja a szerkesztő ereszcsatornáját az első kódsortól balra, this.vacationService.getAll();a getVacations() függvényen belül.

    Screenshot of the first breakpoint to set in Visual Studio Code.

  3. Nyissa meg a functions/src/functions/getVacations.ts fájlt, és állítson be töréspontot a szerkesztő vonaltól balra található ereszcsatornájának try { kiválasztásával.

Az alkalmazás futtatása és hibakeresése

Most, hogy az Angular- és a Functions-alkalmazásokban is vannak töréspontok, közösen végezheti el a hibakeresést.

Feljegyzés

Még nem futtatja a függvényeket az Azure-ban. Az Azure Functions Core Tools (CLI) használatával helyileg futtathat és hibakeresést végezhet.

Az Angular-ból a Functionsbe irányuló kérések proxyja

Az Azure Functions API porton 7071fut, míg az Angular-alkalmazás a porton 4200fut. Az Angular-alkalmazás nem tud kéréseket küldeni a tartományok között a Functions-alkalmazásnak, ezért az Angular-alkalmazásból a Functions-alkalmazásba irányuló hívásokat proxyzhatja.

Ha engedélyezni szeretné, hogy az Angular-alkalmazás beszéljen a Functions-alkalmazással, és proxykérelmeket küldjön, nyissa meg a proxy.conf.json , és módosítsa a portot a következőre 7071: .

{
  "/api": {
    "target": "http://localhost:7071",
    "secure": false
  }
}

Feljegyzés

A Node.js Express-alkalmazás portot használt 7070. Ha eltávolította a Node.js Express alkalmazást, használhat portot 7070 is a Functions-alkalmazáshoz. Tanulási célokból azonban mindkét alkalmazást megtarthatja.

A két alkalmazás hibakeresése

Amikor együtt futtatja és hibakeresésre használja az alkalmazásokat, az alkalmazás szünetel a töréspontokon, így lehetősége van arra, hogy megismerje, hogyan működnek együtt ezek az alkalmazások.

  1. Az F1 gomb megnyomásával nyissa meg a Visual Studio Code parancskatalógusát.

  2. Írja be és válassza a Nézet: Futtatás és hibakeresés megjelenítése lehetőséget.

  3. A Futtatás és hibakeresés panel tetején válassza a Hibakeresési függvények és az Angular lehetőséget a legördülő listából.

  4. Nyomja le az F5 billentyűt a hibakereső elindításához.

    Az alkalmazás elindul a szabadságok listájának lekéréséhez. Az Angular VacationComponent elindítja a HTTP-kérést a szabadságok lekéréséhez. Amikor megnyílik a böngésző, a kódvégrehajtás a függvény vacations.component.ts fájljának első töréspontján getVacations() szünetel.

    Screenshot of Visual Studio Code paused during debugging.

  5. Törölje a végrehajtást, és folytassa az F5 billentyű lenyomásával.

  6. A kód a functions/vacations-get/index.ts fájl második töréspontján szünetel, mert az Angular-alkalmazás eléri a Functions-útvonalatvacations. Törölje a végrehajtást, és folytassa az F5 billentyű lenyomásával.

  7. Két hibakeresési folyamat fut: egy az Angular-alkalmazáshoz és egy a Azure Functions-alkalmazáshoz. Az aktív hibakereső leállításához nyomja le a Shift+F5 billentyűkombinációt.

  8. A fennmaradó hibakereső leállításához nyomja le a Shift+F5 billentyűkombinációt.