Cvičení – spuštění a ladění Azure Functions a Angular

Dokončeno

V tomto cvičení spustíte a ladíte aplikaci Angular a aplikaci Azure Functions společně. Zarážky nastavíte v kódu Angular, který zobrazí webovou aplikaci v prohlížeči a v kódu Functions, který načte a vykresluje dovolenou. Pomocí zarážek Angular a Functions pak můžete procházet kód Functions a Angular pomocí ladicího programu.

Poznámka:

Soubory .vscode/launch.json a .vscode/tasks.json jsou nedílnou součástí ladění tohoto projektu.

Spuštění Azurite pro místní úložiště funkcí

Azure Functions používá k ukládání dat službu Azure Storage. Aplikaci Functions můžete spustit místně pomocí Azurite, místního emulátoru pro Azure Storage. Azurite poskytuje místní prostředí, které emuluje služby Azure Blob, Queue a Table pro účely vývoje.

1. Otevřete nový terminál v editoru Visual Studio Code.

2. Spuštěním následujícího příkazu spusťte Azurite.

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

   Tento příkaz nainstaluje azurite a spustí ho v aktuálním adresáři. Příznak --location určuje umístění dat a --debug příznak určuje umístění protokolů.

3. .gitignore Otevřete soubor a přidejte následující řádek pro ignorování dat a protokolů Azurite.

   .azurite
   

   Tento řádek zajišťuje, že data a protokoly Azurite nejsou potvrzeny do úložiště.

Nastavení zarážek

Když se spustí plnohodnotná aplikace, klient front-endu Angular požádá o data dovolené z back-endové aplikace Functions. Tyto dvě aplikace spolupracují, aby získaly data a vykreslily je v prohlížeči.

Pokud chcete zobrazit seznam dovolených, aplikace Angular spustí getVacations() funkci v souboru vacations.component.ts , který volá vacations koncový bod v rozhraní API služby Azure Functions. Funkce souborů /getVacations.ts definují trasu koncového bodu. Nastavte v těchto souborech zarážky, takže během ladění můžete procházet kód, který načte dovolenou.

1. V editoru Visual Studio Code otevřete soubor src/app/vacations/vacations.component.ts aplikace a vyhledejte getVacations() funkci.

2. Nastavte zarážku výběrem hřbetu editoru vlevo od prvního řádku kódu , this.vacationService.getAll();uvnitř getVacations() funkce.

   

3. Otevřete soubor functions/src/functions/getVacations.ts a nastavte zarážku výběrem hřbetu editoru try { nalevo od řádku.

Spuštění a ladění aplikace

Teď, když máte zarážky v aplikacích Angular i Functions, můžete je procházet a ladit společně.

Poznámka:

Funkce zatím v Azure nespusíte. K místnímu spuštění a ladění používáte Azure Functions Core Tools (CLI).

Proxy požadavky z Angular do Functions

Rozhraní API služby Azure Functions běží na portu 7071, zatímco aplikace Angular běží na portu 4200. Aplikace Angular nemůže provádět požadavky napříč doménami do aplikace Functions, takže zprostředkováváte volání z aplikace Angular do aplikace Functions.

Pokud chcete aplikaci Angular povolit komunikaci s aplikacemi Functions a žádosti o proxy server, otevřete proxy.conf.json a změňte port na 7071.

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

Poznámka:

Použitý port 7070aplikace Node.js Express . Pokud jste odebrali aplikaci Node.js Express, mohli byste také použít port 7070 pro aplikaci Functions. Pro účely výuky ale obě aplikace zachováte.

Ladění obou aplikací

Když aplikace spustíte a ladíte společně, aplikace se pozastaví na zarážkách, takže máte možnost prozkoumat, jak tyto aplikace spolupracují.

1. Klávesou F1 otevřete paletu příkazů editoru Visual Studio Code.

2. Zadejte a vyberte Zobrazit: Zobrazit spuštění a ladění.

3. V horní části podokna Spustit a ladit vyberte z rozevíracího seznamu funkce Ladění a Angular .

4. Stisknutím klávesy F5 spusťte ladicí program.

   Aplikace se spustí, aby získala seznam dovolených. Angular VacationComponent spustí požadavek HTTP, aby získal dovolenou. Po otevření prohlížeče se spuštění kódu pozastaví na první zarážce v souboru vacations.component.ts ve getVacations() funkci.

   

5. Zrušte pozastavení provádění a pokračujte stisknutím klávesy F5.

6. Kód se pozastaví na druhé zarážce v souboru functions/vacations-get/index.ts , protože aplikace Angular dosáhne trasy Functions vacations . Zrušte pozastavení provádění a pokračujte stisknutím klávesy F5.

7. Máme spuštěné dva procesy ladění: jeden pro aplikaci Angular a druhý pro Azure Functions. Stisknutím kombinace kláves Shift+F5 zastavte aktivní ladicí program.

8. Stisknutím kombinace kláves Shift+F5 zastavte zbývající ladicí program.