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

6 min

Vaše webová aplikace pro nákupní seznam 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 proxy požadavky HTTP na rozhraní API.
Spusťte rozhraní API a webovou aplikaci.

Získejte aplikaci funkcí

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

Vytvoření větve rozhraní API

Osvědčeným postupem je vytvoření nové větve pro budoucí změny v aplikaci. Jste před dokončením rozhraní API pro aplikaci a to je pro vytvoření větve určitě vhodný čas.

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

Právě jste vytvořili větev Git s názvem api.

Dokončete rozhraní API pro Azure Functions

Abyste mohli 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. Název této 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 (v 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 složku api-starter na rozhraní API.
```
git mv api-starter api
```
Stisknutím klávesy F1 otevřete paletu příkazů.
Zadejte a vyberte Git: Potvrdit vše.
Zadejte rozhraní API pro potvrzení zprávy a stiskněte Enter.

Teď se v Průzkumníku editoru Visual Studio Code zobrazí složka api . Složka api obsahuje váš projekt Azure Functions spolu se třemi funkcemi.

Složka a soubor	metoda	Postup
api/products-post	POST	`products`
api/products-put	PUT	`products/:id`
api/products-delete	DELETE	`products/:id`

Vytvořte funkci HTTP GET

Vaše rozhraní API zahrnuje trasy pro manipulaci s produkty v nákupním seznamu, ale chybí v něm trasa pro jejich načtení. Pojďme to teď přidat.

Instalace rozšíření Azure Functions pro editor 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 Marketplace a nainstalujte rozšíření Azure Functions pro Visual Studio Code.
Když se v editoru Visual Studio Code načte karta rozšíření, vyberte Nainstalovat.
Po dokončení instalace vyberte Znovu načíst.

Poznámka:

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

Vytvoření funkce

Teď rozšiřujete aplikaci Funkcí Azure o funkci, abyste získali své produkty.

V editoru Visual Studio Code otevřete paletu příkazů stisknutím klávesy F1.
Zadejte a vyberte Azure Functions: Vytvořit funkci.
Po zobrazení výzvy k vytvoření funkce vyberte trigger HTTP.
Jako název funkce zadejte products-get .
Jako úroveň ověřování vyberte Anonymní .

Poznámka:

Aplikace Azure Functions se nachází ve složce api, která ji odděluje od projektů jednotlivých webových aplikací. Webové aplikace na bázi všech front-endových platforem volají stejné rozhraní API. Strukturu aplikace si můžete určit sami, ale pro účely této ukázky je užitečné si je zobrazovat odděleně.

Nakonfigurujte metodu HTTP a koncový bod trasy

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

Na základě konvence bude mít koncový bod trasy stejný název jako složka, která funkci obsahuje. 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. Vy ale chcete, aby koncovým bodem bylo products.

Nakonfigurujte funkci:

Otevřete souborové rozhraní API/products-get/function.json.
Všimnětesich GET POST
Změňte pole metod tak, aby povolovat GET pouze požadavky.
"route": "products" Za pole metod přidejte položku.

Vaše funkce se teď aktivuje při požadavku HTTP GET do products. Soubor function.json by teď 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í, když zadáte požadavek HTTP do určené trasy.

Abyste získali své produkty, musíte logiku aktualizovat. V modulu JavaScript /shared/product-data.js je logika přístupu k datům. Modul product-data vystavuje funkci getProducts, jejímž úkolem je načítat produkty pro nákupní seznam.

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

Otevřete souborové rozhraní API/products-get/index.js.

Jeho obsah nahraďte 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. Služba Azure Static Web Apps automaticky nakonfiguruje vaši aplikaci tak, aby dokázala komunikovat s vaším rozhraním API v Azure pomocí reverzního proxy. Při místním spuštění ale musíte CORS nakonfigurovat, abyste umožnili komunikaci webové aplikace a rozhraní API.

Dejte tedy službě Azure Functions pokyn, aby na vašem počítači povolila webové aplikaci zadávání požadavků 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ý znemožňuje jeho odeslání na GitHub. Důvodem je to, že byste v tomto souboru mohli ukládat tajné kódy, které nechcete mít na GitHubu. A právě proto jste si museli tento soubor vytvořit při vytváření úložiště ze šablony.

Spusťte rozhraní API

Teď je čas podívat se na to, jak vaše webová aplikace a projekt Azure Functions fungují společně. Začněte spuštěním projektu Azure Functions místně provedením následujících kroků:

Poznámka:

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

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

Spusťte webovou aplikaci

Vaše rozhraní API běží. Teď je potřeba nakonfigurovat front-endovou aplikaci tak, aby své požadavky HTTP směrovala na vaše rozhraní API. Front-endová aplikace běží na jednom portu a rozhraní API běží na jiném portu (7071). Každé front-endové rozhraní lze nakonfigurovat tak, aby požadavky HTTP bezpečně odesílala (jako proxy) na port.

Nakonfigurujte proxy port

Provedením následujících kroků nakonfigurujte proxy pro front-endovou aplikaci:

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

Otevřete soubor react-app/package.json.
"proxy": "http://localhost:7071/", Vyhledejte nastavení.
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.
target: 'http://localhost:7071', Vyhledejte nastavení.
Všimněte si, že port cíle odkazuje na 7071.

Spusťte front-endovou webovou aplikaci

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. Provedením následujících kroků webovou aplikaci spusťte:

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 podívat se, jak vaše aplikace běží místně s rozhraním API 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ď je spuštěná místně a požadavky HTTP GET na vaše rozhraní API. Teď v terminálech zastavte spuštěnou aplikaci a rozhraní API stisknutím kláves Ctrl-C .

Další kroky

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

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

Získejte aplikaci funkcí

Vytvoření větve rozhraní API

Dokončete rozhraní API pro Azure Functions

Vytvořte funkci HTTP GET

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

Vytvoření funkce

Nakonfigurujte metodu HTTP a koncový bod trasy

Aktualizace logiky funkce

Místní konfigurace sdílení prostředků mezi zdroji (CORS)

Spusťte rozhraní API

Spusťte webovou aplikaci

Nakonfigurujte proxy port

Spusťte front-endovou webovou aplikaci

Přejděte do aplikace

Další kroky

Váš názor