API létrehozása az Azure Functions használatával
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, hogy együtt üzemelteti a webalkalmazást és az Azure Functions használatával készült API-t. 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.
Nincs szüksége egy teljes kiszolgálóra az előtér- vagy a háttérrendszerhez, amelyet konfigurálnia kell és karban kell tartania. Az Azure Static Web Apps segítségével a lehető legkisebb konfigurációval és karbantartással érheti el 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 ezen az URL-címen érhető el a /api kifejezést hozzáfűzve az URL-címhez.
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 ezeknek az igényeknek megfelelő végpontokkal kell rendelkeznie.
Az alábbi négy végpontot hozza létre:
| Módszerek | Útvonalvégpontok | Teljes API-végpont |
|---|---|---|
| KAP | 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 útvonala a api/products. Az api előtag az API-végpontok számára van fenntartva az alkalmazásban. Bármilyen más útvonalakat is meghatározhat a webhely igényeinek megfelelően, de az 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áadhat egy API-t, és csatlakoztathatja az előtérbeli alkalmazáshoz. Az adattár egy olyan mappával rendelkezik api-starter , amely egy hiányos Azure Functions-projektet és a termékek PUT, POST és DELETE http-végpontjait tartalmazza.
Az API-ból hiányzik a GET HTTP-függvény. Töltse ki az Azure Functions-projekt API-ját, és adja hozzá a hiányzó függvényt. Ezután csatlakoztassa az API-t az előtérbeli webalkalmazáshoz.
A webalkalmazás módosításai előnézetének megtekintése
Az alkalmazás módosítása előtt érdemes létrehozni egy új ágat a módosításokhoz. Mivel számos módosítást végez az alkalmazás API-jának befejezéséhez, létre kell hoznia egy ágat ezekhez a módosításokhoz.
A módosítások elvégzése után meg szeretné majd nézni őket futás közben, mielőtt döntene a módosítások egyesítéséről. 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 üzembe helyezi őket egy előzetes verziójú URL-címen. Ez a funkció lehetővé teszi, hogy a webalkalmazás az Azure Static Web Apps szolgáltatással fusson, de egy második előzetes példányt is láthat a lekéréses kérelem eredményeivel.
A webalkalmazás és az API közötti kommunikáció
Ha az API-t helyileg futtatja az Azure Functions segítségével, akkor alapértelmezés szerint az 7071-es porton fut. A webalkalmazás egy másik helyi porton fut. Amikor a webalkalmazás MEGPRÓBÁL HTTP-kérést küldeni a portjáról az API 7071-es portjára, a kérés 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.