Cvičení – vytvoření projektu Azure Functions

6 min

Webová aplikace nákupního seznamu potřebuje rozhraní API. V tomto cvičení sestavíte a spustíte rozhraní API pomocí projektu Azure Functions. Odtud rozšíříte rozhraní API o novou funkci pomocí rozšíření Azure Functions pro Visual Studio Code.

V tomto cvičení provedete následující kroky:

Při přípravě na provedení změn webové aplikace vytvořte větev.
Prozkoumejte projekt funkce Azure Functions.
Vytvořte funkci HTTP GET.
Nahraďte počáteční kód funkce logikou pro získání produktů.
Nakonfigurujte webovou aplikaci tak, aby provozovala HTTP požadavky jako proxy na rozhraní API.
Spusťte rozhraní API a webovou aplikaci.

Získejte aplikaci Function

Teď přidejte rozhraní API a připojte ho k front-endové aplikaci. Složka api-starter obsahuje neúplný projekt Azure Functions. Pojďme to teď dokončit.

Vytvoření větve rozhraní API

Před provedením změn v aplikaci je vhodné pro změny vytvořit novou větev. Chystáte se dokončit rozhraní API pro vaši aplikaci, takže teď je vhodná doba k vytvoření větve.

V editoru Visual Studio Code otevřete paletu příkazů stisknutím klávesy F1.
Zadejte a vyberte Git: Přejít na....
Vyberte Vytvořit novou větev.
Zadejte api pro název nové větve a stiskněte Enter.

Právě jste vytvořili rozhraní API git branch.

Dokončení rozhraní API služby Azure Functions

Pokud chcete rozhraní API dokončit, začněte přesunutím počátečního kódu rozhraní API do složky s názvem api. Tento název složky jste zadali pro api_location při vytváření instance Static Web Apps.

V editoru Visual Studio Code otevřete paletu příkazů stisknutím klávesy F1.
Zadejte a vyberte Terminál: Vytvořit nový terminál (Ve aktivním pracovním prostoru).
Ujistěte se, že jste v kořenové složce projektu.
Spuštěním následujícího příkazu git přejmenujte api-starter složku na api.
```
git mv api-starter api
```
Stisknutím klávesy F1otevřete paletu příkazů .
Zadejte a vyberte Git: Potvrdit vše.
Zadejte zprávu potvrzení api a stiskněte Enter.

Nyní vidíte ve Průzkumníku editoru Visual Studio Code složku API. Složka api obsahuje projekt Azure Functions spolu se třemi funkcemi.

Složka a soubor	Metoda	Cesta
api/products-post	PŘÍSPĚVEK	`products`
api/products-put	DÁT	`products/:id`
api/products-delete	VYMAZAT	`products/:id`

Vytvoření funkce HTTP GET

Vaše rozhraní API má trasy pro manipulaci s produkty pro nákupní seznam, ale nemá trasu pro získání produktů. Pojďme to teď přidat.

Instalace rozšíření Azure Functions pro Visual Studio Code

Aplikace Azure Functions můžete vytvářet a spravovat pomocí rozšíření Azure Functions pro Visual Studio Code.

Přejděte na Visual Studio Marketplacea nainstalujte rozšíření Azure Functions pro Visual Studio Code.
V editoru Visual Studio Code vyberte po načtení karty rozšíření možnost Nainstalovat.
Po dokončení instalace vyberte Znovu načíst.

Poznámka

Nezapomeňte nainstalovat Azure Functions Core Tools nástroje, které umožňují spouštět Azure Functions na místní úrovni.

Vytvoření funkce

Nyní rozšiřujete svou aplikaci Azure Function o funkci k získání svých produktů.

V editoru Visual Studio Code otevřete paletu příkazů stisknutím klávesy F1.
Zadejte a vyberte Azure Functions: Vytvořit funkci.
Až budete vyzváni k vytvoření funkce, vyberte HTTP Trigger.
Jako název funkce zadejte products-get.
Jako úroveň ověřování vyberte Anonymní.

Poznámka

Aplikace Functions je ve api složce, která ji odděluje od jednotlivých projektů webových aplikací. Všechny webové aplikace využívající front-endové rámce volají stejné rozhraní API. Můžete se rozhodnout, jak aplikaci strukturovat, ale v této ukázce vám pomůže je zobrazit oddělené.

Konfigurace metody HTTP a koncového bodu trasy

Všimněte si, že složka api/products-get obsahuje soubor function.json. Tento soubor obsahuje konfiguraci vaší funkce.

Koncový bod trasy má stejný název jako složka, která obsahuje funkci podle konvence. Vzhledem k tomu, že se funkce vytvoří ve složce products-get, koncový bod trasy se ve výchozím nastavení vygeneruje jako products-get. Chcete ale, aby koncový bod byl produkty.

Konfigurace funkce:

Otevřete soubor api/products-get/function.json.
Všimněte si, že metody umožňují GET i POST.
Změňte pole metod tak, aby umožňovalo pouze GET požadavek.
Za pole metod přidejte položku "route": "products".

Teď vaše funkce reaguje na HTTP požadavek GET k produktům . Váš function.json by měl vypadat jako následující kód:

{
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get"],
      "route": "products"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ]
}

Aktualizace logiky funkce

Soubor index.js ve složce api/products-get obsahuje logiku, která se spustí při provedení požadavku HTTP na trasu.

Abyste získali své produkty, musíte logiku aktualizovat. Logika přístupu k datům je v modulu JavaScriptu /shared/product-data.js. Modul product-data zveřejňuje funkci getProducts pro získání produktů pro nákupní seznam.

Teď změňte koncový bod funkce tak, aby vracel produkty:

Otevřete soubor api/products-get/index.js.

Nahraďte jeho obsah následujícím kódem:

const data = require('../shared/product-data');

module.exports = async function (context, req) {
  try {
    const products = data.getProducts();
    context.res.status(200).json(products);
  } catch (error) {
    context.res.status(500).send(error);
  }
};

Vaše funkce získá produkty a vrátí je se stavovým kódem 200, pokud je úspěšný.

Při publikování do Azure Static Web Apps se nemusíte starat o CORS. Azure Static Web Apps automaticky nakonfiguruje vaši aplikaci, aby mohl komunikovat s vaším rozhraním API v Azure pomocí reverzního proxy serveru. Když ale běží místně, musíte nakonfigurovat CORS tak, aby vaše webová aplikace a rozhraní API mohly komunikovat.

Teď řekněte službě Azure Functions, aby ve vašem počítači povolila webové aplikaci provádět požadavky HTTP na rozhraní API.

Vytvořte soubor s názvem api/local.settings.json.

Do souboru přidejte následující obsah:

{
  "Host": {
    "CORS": "http://localhost:4200"
  }
}

{
  "Host": {
    "CORS": "http://localhost:3000"
  }
}

{
  "Host": {
    "CORS": "http://localhost:5000"
  }
}

{
  "Host": {
    "CORS": "http://localhost:8080"
  }
}

Poznámka

Soubor local.settings.json je uvedený v souboru .gitignore, který brání v nasdílení tohoto souboru do GitHubu. Soubor je uvedený v souboru .gitignore , protože v něm můžete ukládat tajné kódy, které byste nechtěli na GitHubu. Tento výpis je důvodem, proč jste soubor museli vytvořit při vytváření úložiště ze šablony.

Spuštění rozhraní API

Teď je čas sledovat spolupráci webové aplikace a projektu Azure Functions. Začněte spuštěním projektu Azure Functions místně pomocí následujícího postupu:

Poznámka

Nezapomeňte nainstalovat Azure Functions Core Tools nástroje, které umožňují spouštět Azure Functions na místní úrovni.

Otevřete terminál Git a přejděte do api složky:
```
cd api
```
Spusťte aplikaci Azure Functions místně:
```
npm install
```
```
npm start
```

Spuštění webové aplikace

Vaše rozhraní API je spuštěné. Teď potřebujete nakonfigurovat front-endovou aplikaci tak, aby do vašeho rozhraní API nastavila požadavek HTTP. Front-endová aplikace běží na jednom portu a rozhraní API běží na jiném portu (7071). Každý front-endový framework lze nakonfigurovat tak, aby zprostředkovával požadavky HTTP na port bezpečně.

Konfigurace proxy portu

Nakonfigurujte proxy pro front-endovou aplikaci pomocí následujících kroků:

Otevřete soubor angular-app/proxy.conf.json.
Vyhledejte nastavení target: 'http://localhost:7071'.
Všimněte si, že port cíle odkazuje na 7071.

Otevřete soubor react-app/package.json.
Vyhledejte nastavení "proxy": "http://localhost:7071/",.
Všimněte si, že port proxy serveru odkazuje na 7071.

Otevřete soubor svelte-app/rollup.config.js.
Vyhledejte řádek kódu const api = 'http://localhost:7071/api';.
Všimněte si, že port rozhraní API odkazuje na 7071.

Otevřete soubor vue-app/vue.config.js.
Vyhledejte nastavení target: 'http://localhost:7071',.
Všimněte si, že port cíle odkazuje na 7071.

Spuštění front-endové webové aplikace

Vaše rozhraní API už běží na portu 7071. Když teď webovou aplikaci spustíte, provede její požadavky HTTP na vaše rozhraní API. Spusťte webovou aplikaci pomocí následujícího postupu:

Otevřete druhou instanci terminálu Git.
Potom zadáním tohoto příkazu přejděte do složky preferované front-endové architektury:
```
cd angular-app
```
```
cd react-app
```
```
cd svelte-app
```
```
cd vue-app
```

Spusťte front-endovou klientskou aplikaci:

npm start

npm start

npm run dev

npm run serve

Přejděte do aplikace.

Je čas zobrazit aplikaci spuštěnou místně v rozhraní API služby Azure Functions.

Přejděte na http://localhost:4200.

Přejděte na http://localhost:3000.

Přejděte na http://localhost:5000.

Přejděte na http://localhost:8080.

Vytvořili jste aplikaci a teď běží lokálně a provádí požadavky HTTP GET na vaše rozhraní API. Nyní zastavte spuštěnou aplikaci a rozhraní API stisknutím kláves Ctrl-C na terminálech.

Další kroky

Aplikace funguje místně a dalším krokem je publikování aplikace pomocí rozhraní API.

Váš názor

Byla tato stránka užitečná?

Cvičení – vytvoření projektu Azure Functions

Získejte aplikaci Function

Vytvoření větve rozhraní API

Dokončení rozhraní API služby Azure Functions

Vytvoření funkce HTTP GET

Instalace rozšíření Azure Functions pro Visual Studio Code

Vytvoření funkce

Konfigurace metody HTTP a koncového bodu trasy

Aktualizace logiky funkce

Konfigurujte místně sdílení prostředků mezi zdroji (CORS)

Spuštění rozhraní API

Spuštění webové aplikace

Konfigurace proxy portu

Spuštění front-endové webové aplikace

Přejděte do aplikace.

Další kroky

Váš názor