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 služby Azure Static Web Apps je, že hostí jak webovou aplikaci, tak rozhraní API vytvořené pomocí 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.
Nemusíte konfigurovat a udržovat úplný server pro front-end nebo back-end. Tato funkce je nejsladším místem pro Azure Static Web Apps: 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 dostupné prostřednictvím stejné adresy URL připojením /api k adrese URL.
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 dává smysl, aby vaše rozhraní API mělo koncové body odpovídající těmto potřebám.
Tady jsou čtyři koncové body:
| 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 směrují na rozhraní API/produkty. Předpona api je vyhrazená pro koncové body rozhraní API v aplikaci. Můžete definovat jakékoli další trasy tak, aby vyhovovaly potřebám vašeho webu, ale api vždy odkazuje na aplikaci Azure Functions.
Vytvoření rozhraní API pro webovou aplikaci
Zatím jste používali front-endové rozhraní. Brzy přidáte rozhraní API a připojíte ho k front-endové aplikaci. V úložišti máte projekt Api, který obsahuje nedokončený projekt Azure Functions a koncové body HTTP metod PUT, POST a DELETE pro vaše produkty. V rozhraní API chybí funkce HTTP GET. Dokončíte rozhraní API projektu Azure Functions a přidáte chybějící funkci a pak připojíte rozhraní API k front-endové webové aplikaci.
Zobrazení náhledu změn ve webové aplikaci
Osvědčeným postupem je vytvoření nové větve pro budoucí změny v aplikaci. Když dokončíte rozhraní API pro vaši aplikaci, provedete několik změn, takže vytvoříte větev pro tyto změny.
Po provedení změn je chcete zobrazit, než se rozhodnete změny sloučit. 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 náhledová adresa URL umožňuje opustit webovou aplikaci spuštěnou pomocí Azure Static Web Apps, ale také zobrazit druhou adresu URL s výsledky vaší žádosti o přijetí změn.
Konfigurace komunikace mezi webovou aplikací a rozhraním API
Když rozhraní API spustíte místně, ve výchozím nastavení poběží 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, akce se označuje jako 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.