Tworzenie interfejsu API za pomocą usługi Azure Functions

Ukończone

Teraz nadszedł czas, aby utworzyć interfejs API dla aplikacji listy zakupów.

Azure Functions

Jedną z największych zalet usługi Azure Static Web Apps jest hostowanie aplikacji internetowej i interfejsu API utworzonego razem z usługą Azure Functions. Usługa Azure Static Web Apps globalnie dystrybuuje statyczne zasoby aplikacji internetowej i hostuje interfejs API w usłudze Azure Functions. Dzięki tej konfiguracji uzyskasz dostępność i szybkość, która jest dostarczana z globalną dystrybucją zasobów aplikacji internetowej.

To, czego nie otrzymujesz, jest również ważne.

Do konfigurowania i obsługi front-endu ani back-endu nie jest potrzebny pełny serwer. Usługa Azure Static Web Apps pozwala osiągnąć idealną równowagę: łatwość publikowania aplikacji i interfejsu API przy minimalnej konfiguracji i konserwacji.

Usługa Azure Functions obsługuje punkty końcowe trasy, nie wymaga pełnego serwera back-end do konfigurowania lub konserwacji oraz zapewnia automatyczne skalowanie w górę i w dół na podstawie zapotrzebowania. Te funkcje sprawiają, że usługa Azure Functions jest doskonałym partnerem interfejsu API dla aplikacji internetowej listy zakupów, która obsługuje zasoby statyczne.

Usługa Azure Static Web Apps generuje unikatowy adres URL witryny, który można znaleźć na karcie Przegląd w portalu. Interfejs API jest dostępny za pośrednictwem tego samego adresu URL, dołączając /api do adresu URL.

Interfejs API listy zakupów

Aplikacja listy zakupów umożliwia użytkownikom pobieranie, dodawanie, aktualizowanie i usuwanie elementów z listy. Dlatego warto pamiętać, że interfejs API powinien mieć punkty końcowe spełniające te potrzeby.

Oto cztery utworzone punkty końcowe:

Metody	Punkty końcowe trasy	Pełny punkt końcowy interfejsu API
POBIERZ	products	api/products
POST	products	api/products
KŁAŚĆ	products/:id	api/products/:id
USUNĄĆ	products/:id	api/products/:id

Zwróć uwagę, że żądania HTTP GET kierują do api/products. Prefiks interfejsu API jest zarezerwowany dla punktów końcowych interfejsu API w aplikacji. Można zdefiniować inne trasy zgodnie z potrzebami witryny, ale API odnosi się zawsze do aplikacji Azure Functions.

Tworzenie interfejsu API dla aplikacji internetowej

Do tej pory używałeś frameworku front-endowego. Niedługo będziesz mógł dodać interfejs API i połączyć go z aplikacją front-endową. Repozytorium zawiera folder api-starter, który zawiera niekompletny projekt Azure Functions i punkty końcowe HTTP do operacji PUT, POST i DELETE dla Twoich produktów. Interfejs API nie ma funkcji HTTP GET. Ukończ interfejs API projektu usługi Azure Functions i dodaj brakującą funkcję. Następnie połącz interfejs API z aplikacją internetową front-end.

Wyświetlanie podglądu zmian w aplikacji internetowej

Przed wprowadzeniem zmian w aplikacji warto utworzyć nową gałąź dla zmian. Ponieważ wprowadzasz kilka zmian w celu ukończenia interfejsu API dla aplikacji, należy utworzyć gałąź dla tych zmian.

Po wprowadzeniu zmian będziesz chciał zobaczyć je w działaniu, zanim zdecydujesz się scalić zmiany. Po utworzeniu żądania ściągnięcia z nowej gałęzi do głównej gałęzi akcja usługi GitHub kompiluje aplikację i interfejs API i wdraża je pod adresem URL wersji zapoznawczej. Ta funkcja umożliwia pozostawienie aplikacji internetowej uruchomionej w usłudze Azure Static Web Apps, a także zobaczenie drugiego wystąpienia w wersji zapoznawczej z wynikami żądania pull.

Komunikacja między aplikacją internetową a interfejsem API

Po uruchomieniu interfejsu API lokalnie z usługą Azure Functions jest on domyślnie uruchamiany na porcie 7071. Aplikacja internetowa działa na innym porcie lokalnym. Gdy aplikacja internetowa próbuje wysłać żądanie HTTP z portu do portu 7071 interfejsu API, żądanie jest nazywane udostępnianiem zasobów między źródłami (CORS). Przeglądarka uniemożliwia ukończenie żądania HTTP, chyba że serwer interfejsu API zezwala na kontynuowanie żądania.

Podczas publikowania w usłudze Azure Static Web Apps nie musisz martwić się o mechanizm CORS. Usługa Azure Static Web Apps automatycznie konfiguruje aplikację, aby mogła komunikować się z interfejsem API na platformie Azure przy użyciu zwrotnego serwera proxy. Serwer proxy działający w kierunku zwrotnym umożliwia wyświetlanie aplikacji internetowej i interfejsu API z tej samej domeny internetowej. Dlatego mechanizm CORS trzeba skonfigurować tylko przy lokalnym uruchamianiu.

Następne kroki

Teraz możesz przystąpić do tworzenia interfejsu API i konfigurowania punktów końcowych HTTP dla aplikacji listy zakupów.