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 osztja el a webalkalmazás statikus eszközeit, és üzemelteti az API-t az Azure Functionsben. Ezzel a beállítással a webalkalmazás-eszközök globális terjesztésével járó rendelkezésre állást és sebességet érheti el.
Az is fontos, amit nem kapsz meg.
Nincs szükség teljes kiszolgálóra az előtérbeli vagy a háttérrendszer konfigurálásához és karbantartásához. Az Azure Static Web Apps használatával elérheti az ideális megoldást: az alkalmazás és az API könnyű közzétételét minimális konfigurációval és karbantartással.
Az Azure Functions kiszolgálja az útvonalvégpontokat, nem igényel teljes háttérkiszolgálót a konfiguráláshoz vagy karbantartáshoz, és igény szerint automatikusan skáláz felfelé és lefelé. 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, amelyet a portál Áttekintés lapján talál. 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 elemeket szerezzenek be, vegyenek fel, frissítsenek és töröljenek a listából. 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 | Útvonal végpontok | Teljes API-végpont |
|---|---|---|
| KAP | products |
api/products |
| POSZT | products |
api/products |
| HELYEZ | products/:id |
api/products/:id |
| TÖRÖL | products/:id |
api/products/:id |
Figyelje meg, hogy a HTTP GET kérések api/productsfelé irányulnak. 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
Eddig egy front-end keretrendszert használtál. Hamarosan hozzáadhat egy API-t, és csatlakoztathatja az előtérbeli alkalmazáshoz. Az adattár egy api-starter mappával rendelkezik, 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 HTTP GET 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ásainak előnézete
Mielőtt módosítanál egy alkalmazást, célszerű új ágat létrehozni 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.
Miután végrehajtotta a módosításokat, szeretné látni őket futni, mielőtt úgy dönt, hogy egyesíti a módosításokat. 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át az Azure Static Web Apps szolgáltatással futtassa, és egy második előzetes példányt is láthat a pull request eredményeivel.
Kommunikáció a webalkalmazás és az API között
Ha az API-t helyileg futtatja az Azure Functions használatával, az alapértelmezés szerint a 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, hogy fordított proxy használatával kommunikáljon az Azure-beli API-val. A fordított proxy lehetővé teszi, hogy a webalkalmazás és az API ugyanabból a webtartományból származik. Ezért csak helyi futtatáskor kell beállítania a CORS-t.
Következő lépések
Most már készen áll az API létrehozására és a HTTP-végpontok konfigurálására a bevásárlólista-alkalmazáshoz.