API létrehozása az Azure Functions használatával

  • 3 perc

Itt az ideje, hogy létrehozhasson egy API-t a bevásárlólista-alkalmazáshoz.

Azure Functions

Az Azure Static Web Apps egyik legnagyobb előnye az, hogy együtt üzemelteti a webalkalmazást és egy API-t, amelyet az Azure Functions használatával hozott létre! Az Azure Static Web Apps globálisan terjeszti a webalkalmazás statikus eszközeit, és az API-t az Azure Functions szolgáltatásban üzemelteti. Ezzel a beállítással elérheti a rendelkezésre állást és a sebességet, amelyet a webalkalmazás-eszközök globális terjesztése biztosít. Az is fontos, hogy mi az, amire nincs szüksége.

Nem kell teljes kiszolgálót konfigurálnia és fenntartania az előtér- vagy háttérrendszerhez. Ez a funkció az Azure Static Web Apps egyik kedvenc funkciója: minimális konfigurációval és karbantartással könnyedén közzéteheti az alkalmazást és az API-t.

Az Azure Functions szolgáltatja az útvonalvégpontokat, nem igényel teljes háttérkiszolgálót, amelyet konfigurálni kell és karban kell tartani, automatikus skálázást biztosít, és a skálázás igény szerinti. Ezek a funkciók kiváló API-partnerré teszik az Azure Functionst a statikus objektumokat kiszolgáló bevásárlólista-webalkalmazáshoz.

Az Azure Static Web Apps létrehoz egy egyedi URL-címet a webhelyhez, amely a portál Áttekintés lapján található. Az API ugyanazon az URL-címen keresztül érhető el az URL-címhez fűzve /api .

A bevásárlólista API-ja

A bevásárlólista-alkalmazás lehetővé teszi, hogy a felhasználók beolvassák az elemeket a listájukról, hozzáadjanak elemeket ahhoz, illetve frissítsék és töröljék annak elemeit. Ezért logikus, hogy az API-nak vannak olyan végpontjai, amelyek megfelelnek ezeknek az igényeknek.

Íme a négy végpont:

Módszerek Útvonalvégpontok Teljes API-végpont
GET products api/products
POST products api/products
PUT products/:id api/products/:id
Törlés... products/:id api/products/:id

Figyelje meg, hogy a HTTP GET kérések az api/termékek felé vezetnek. Az api előtag az alkalmazás API-végpontjai számára van fenntartva. Bármilyen más útvonalat meghatározhat a webhely igényeinek megfelelően, de api mindig az Azure Functions alkalmazásra mutat.

API létrehozása a webalkalmazáshoz

Az eddigiekben egy előtér-keretrendszert használt. Hamarosan hozzáad egy API-t, és csatlakoztatja az előtérbeli alkalmazáshoz. Az adattárban található egy Api nevű projekt, amely egy hiányos Azure Functions-projektet és a termékekre vonatkozó PUT, POST és DELETE műveletek HTTP-végpontjait tartalmazza. Az API-ból hiányzik a GET HTTP-függvény. Végezze el az Azure Functions-projekt API-ját, és adja hozzá a hiányzó függvényt, majd csatlakoztassa az API-t az előtérbeli webalkalmazáshoz.

A webalkalmazás módosításainak előnézete

Az alkalmazás módosítása előtt érdemes létrehozni egy új ágat a módosításokhoz. Az alkalmazás API-jának befejezésekor számos módosítást hajt végre, így létrehoz egy ágat ezekhez a módosításokhoz.

Miután végrehajtotta a módosításokat, látnia kell őket, mielőtt a módosítások egyesítése mellett dönt. Miután létrehozott egy lekéréses kérelmet az új ágból a főágba , a GitHub Action létrehozza az alkalmazást és az API-t, és mindkettőt üzembe helyezi egy előnézeti URL-címen. Ez az előnézeti URL-cím lehetővé teszi, hogy a webalkalmazást az Azure Static Web Apps használatával hagyja futni, de egy második URL-címet is megtekinthet a lekéréses kérelem eredményeivel.

A webalkalmazás és az API közötti kommunikáció konfigurálása

Ha helyileg futtatja az API-t, az alapértelmezés szerint az 7071-es porton fut. A webalkalmazás egy másik helyi porton fut. Amikor a webalkalmazás HTTP-kérést próbál küldeni a portjáról az API 7071-es portjára, a művelet neve több forrásból származó erőforrás-megosztás (CORS). A böngésző megakadályozza, hogy a HTTP-kérés befejeződjön, hacsak az API-kiszolgáló nem engedélyezi a kérés folytatását.

Az Azure Static Web Appsben való közzétételkor nem kell aggódnia a CORS miatt. Az Azure Static Web Apps automatikusan konfigurálja az alkalmazást úgy, hogy az egy fordított proxyval tudjon kommunikálni az Azure-beli API-val. A fordított proxy teszi lehetővé, hogy a webalkalmazás és az API ugyanabba a webes tartományba tartozóként jelenjen meg. Így a CORS-ot csak helyi futtatás esetén kell beállítania.

Következő lépések

Most már készen áll arra, hogy létrehozza az API-t és konfigurálja a HTTP-végpontokat a bevásárlólista-alkalmazásához.