Sestavení rozhraní API pomocí Azure Functions
Teď je čas vytvořit rozhraní API pro aplikaci nákupního seznamu.
Azure Functions
Jednou z největších výhod Azure Static Web Apps je to, že hostuje vaši webovou aplikaci a rozhraní API vytvořené společně se službou Azure Functions. Služba Azure Static Web Apps globálně distribuuje statické prostředky vaší webové aplikace a hostí vaše rozhraní API v Azure Functions. S tímto nastavením si zajistíte dostupnost a rychlost, kterou přináší globální distribuce prostředků vaší webové aplikace.
Je důležité zmínit i to, co toto nastavení nezahrnuje.
Kvůli svému front-endu nebo back-endu nemusíte konfigurovat a udržovat kompletní server. Se službou Azure Static Web Apps jste dosáhli sladkého místa: snadno publikujete aplikaci a rozhraní API s minimální konfigurací a údržbou.
Služba Azure Functions obsluhuje vaše koncové body směrování, nevyžaduje konfiguraci nebo údržbu kompletního back-endového serveru a zajišťuje automatické horizontální škálování na základě poptávky. Díky těmto funkcím je Azure Functions skvělým partnerem rozhraní API pro webovou aplikaci nákupního seznamu, která obsluhuje statické prostředky.
Služba Azure Static Web Apps vygeneruje pro váš web jedinečnou adresu URL, kterou najdete na kartě Přehled na portálu. Rozhraní API je k dispozici prostřednictvím stejné adresy URL – stačí k ní připojit řetězec /api.
Rozhraní API pro váš nákupní seznam
Vaše aplikace pro nákupní seznam umožňuje uživatelům načítat, přidávat, aktualizovat a odstraňovat položky na jejich seznamech. Proto je vhodné, aby vaše rozhraní API mělo mít koncové body odpovídající těmto potřebám.
Tady jsou čtyři koncové body, které vytvoříte:
| Metody | Koncové body trasy | Úplný koncový bod rozhraní API |
|---|---|---|
| GET | products |
api/products |
| POST | products |
api/products |
| PUT | products/:id |
api/products/:id |
| DELETE | products/:id |
api/products/:id |
Všimněte si, že vaše požadavky HTTP GET se směrují na api/products. Prefix api je vyhrazen pro koncové body rozhraní API v aplikaci. Můžete definovat jakékoli jiné trasy podle potřeb vašeho webu, ale api vždy směruje na aplikaci Azure Functions.
Vytvoření rozhraní API pro webovou aplikaci
Zatím jste používali front-endové rozhraní. Brzy můžete přidat rozhraní API a připojit ho k front-endové aplikaci. Vaše úložiště obsahuje api-starter složku, která obsahuje neúplný projekt Azure Functions a koncové body HTTP pro PUT, POST a DELETE vašich produktů.
V rozhraní API chybí funkce HTTP GET. Dokončete rozhraní API projektu Azure Functions a přidejte chybějící funkci. Pak své rozhraní API připojte k front-endové webové aplikaci.
Náhled změn ve webové aplikaci
Osvědčeným postupem je vytvoření nové větve pro budoucí změny v aplikaci. Vzhledem k tomu, že provádíte několik změn pro dokončení rozhraní API pro vaši aplikaci, měli byste pro tyto změny vytvořit větev.
Provedené změny si budete chtít před jejich sloučením prohlédnout za běhu. Jakmile vytvoříte žádost o přijetí změn z nové větve do hlavní větve, akce GitHubu sestaví vaši aplikaci a rozhraní API a nasadí je na adresu URL ve verzi Preview. Tato funkce umožňuje nechat webovou aplikaci spuštěnou se službou Azure Static Web Apps, ale také zobrazit druhou instanci preview s výsledky vaší žádosti o přijetí změn.
Komunikace mezi webovou aplikací a rozhraním API
Když rozhraní API spustíte místně v Azure Functions, poběží ve výchozím nastavení na portu 7071. Webová aplikace běží na jiném místním portu. Když se vaše webová aplikace pokusí vytvořit požadavek HTTP z jeho portu na port vašeho rozhraní API 7071, žádost se nazývá Sdílení prostředků mezi zdroji (CORS). Prohlížeč zabrání dokončení požadavku HTTP, pokud server rozhraní API nepožaduje, aby požadavek pokračoval.
Když publikujete do Azure Static Web Apps, nemusíte se 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. Díky reverznímu proxy se vaše webová aplikace a rozhraní API můžou jevit tak, jako by pocházely ze stejné webové domény. Takže CORS je potřeba nastavit jenom v případě místního spouštění.
Další kroky
Teď jste připravení vytvořit rozhraní API a nakonfigurovat koncové body HTTP vaší aplikace pro nákupní seznam.