Vytvoření rozhraní API s využitím 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. Azure Static Web Apps globálně distribuuje statické prostředky vaší webové aplikace a hostuje vaše rozhraní API ve službě Azure Functions. Díky tomuto nastavení získáte dostupnost a rychlost, která je součástí globální distribuce prostředků webové aplikace.
To, co nedostanete, je také důležité.
Ke konfiguraci a údržbě front-endu ani back-endu nepotřebujete úplný 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.
Azure Functions obsluhuje koncové body tras, nevyžaduje k konfiguraci nebo údržbě úplný back-endový server a poskytuje automatické horizontální navýšení kapacity a š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.
Azure Static Web Apps vygeneruje jedinečnou adresu URL vašeho webu, 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
Aplikace nákupního seznamu umožňuje uživatelům získávat, přidávat, aktualizovat a odstraňovat položky ze svého seznamu. 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 |
|---|---|---|
| DOSTAT | products |
api/products |
| PŘÍSPĚVEK | products |
api/products |
| DÁT | products/:id |
api/products/:id |
| VYMAZAT | products/:id |
api/products/:id |
Všimněte si, že vaše požadavky HTTP GET směrují na api/products. 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-endovou architekturu. 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.
Zobrazení náhledu změn ve webové aplikaci
Před provedením změn v aplikaci je vhodné pro změny vytvořit novou větev. 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.
Jakmile provedete změny, budete je chtít vidět spuštěné, než se rozhodnete změny sloučit. Jakmile vytvoříte pull request z nové větve do hlavní větve, GitHub akce sestaví vaši aplikaci a rozhraní API a nasadí je na náhledovou adresu URL. Tato funkce umožňuje mít webovou aplikaci stále spuštěnou pomocí služby Azure Static Web Apps, a zároveň zobrazit druhou instanci náhledu s výsledky vašeho pull requestu.
Komunikace mezi webovou aplikací a rozhraním API
Když rozhraní API spouštíte místně s Azure Functions, běží ve výchozím nastavení na portu 7071. Vaše webová aplikace běží na jiném místním portu. Když se vaše webová aplikace pokusí vytvořit požadavek HTTP ze svého portu na port vašeho rozhraní API 7071, tato žádost se nazývá Sdílení prostředků mezi různými 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. 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. Reverzní proxy server umožňuje, aby webová aplikace a API pocházely ze stejné webové domény. Takže CORS musíte nastavit jenom při spuštění místně.
Další kroky
Teď jste připraveni vytvořit rozhraní API a nakonfigurovat koncové body HTTP pro aplikaci nákupního seznamu.