Ćwiczenie — publikowanie interfejsu API za pomocą funkcji GitHub Actions

  • 3 min

Interfejs API został dodany do aplikacji internetowej i oba elementy działają lokalnie. Teraz nadszedł czas na opublikowanie interfejsu API i aplikacji w usłudze Azure Static Web Apps.

Po utworzeniu wystąpienia usługi Azure Static Web Apps i wyświetleniu monitu o obserwowanie gałęzi main została wygenerowana akcja usługi GitHub. Akcja usługi GitHub nasłuchuje zmian w głównej gałęzi repozytorium, a po wykryciu zatwierdzenia lub żądania ściągnięcia do serwera głównego kompiluje i publikuje aplikację.

Podczas tworzenia zasobu usługi Azure Static Web Apps możesz pamiętać, że podano lokalizację folderu dla interfejsu API. Podano wartość domyślną api. Ponieważ jednak wtedy folder api nie zawierał interfejsu API, usługa Azure Static Web Apps nie próbowała opublikować interfejsu API.

Teraz wszystko się zmienia.

Konfigurowanie akcji usługi GitHub

Folder .github/workflows zawiera plik akcji usługi GitHub. Plik zawiera ustawienia dla lokalizacji aplikacji internetowej, interfejsu API i artefaktów kompilacji. Lokalizacje wybrane podczas tworzenia zasobu usługi Azure Static Web Apps znajdują się teraz w tym pliku, jak pokazano poniżej:

app_location: 'angular-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist/angular-app' # Built app content directory - optional

app_location: 'react-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'build' # Built app content directory - optional

app_location: 'svelte-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'public' # Built app content directory - optional

app_location: 'vue-app' # App source code path
api_location: 'api' # Api source code path - optional
output_location: 'dist' # Built app content directory - optional

Lokalizacja api_location ma poprawną wartość i wskazuje interfejs API w folderze api.

Wyzwalanie akcji usługi GitHub

Akcja usługi GitHub jest gotowa do kompilowania i publikowania aplikacji internetowej oraz interfejsu API po wykryciu zmiany w gałęzi main. Aby wyzwolić akcję usługi GitHub, możesz zatwierdzić bezpośrednio lub utworzyć żądanie ściągnięcia do gałęzi głównej. Zmiany wykryte w gałęzi głównej wyzwalają akcję usługi GitHub w celu opublikowania aplikacji pod tym samym adresem URL dla aktywnej witryny internetowej.

Adresy URL podglądu

Czasami chcesz zobaczyć zmiany w witrynie przejściowej przed opublikowaniem w witrynie internetowej na żywo. Usługa Azure Static Web Apps umożliwia wyświetlenie podglądu zmian za pośrednictwem adresów URL w wersji zapoznawczej. Aby utworzyć adres URL podglądu, możesz utworzyć żądanie ściągnięcia względem gałęzi obserwowanej przez akcję usługi GitHub. Nie ma to wpływu na twoją dynamiczną witrynę internetową. Zamiast tego zostanie utworzona nowa wersja tymczasowa aplikacji. Jeśli wrócisz i sprawdzisz żądanie ściągnięcia w usłudze GitHub, powinien zostać wyświetlony link do wersji przejściowej opublikowanej na karcie Konwersacja.

W poniższej tabeli przedstawiono sposób publikowania aplikacji przez usługę Azure Static Web Apps na różne adresy URL. Aplikacja jest publikowana pod jednym adresem URL, natomiast żądanie ściągnięcia do tej samej gałęzi jest publikowane pod innym adresem URL.

Lokalizacja źródłowa opis Adres URL
Gałąź main Adres URL działającej witryny internetowej https://purple-rain-062d03304.azurestaticapps.net/
Żądanie ściągnięcia #5 Adres URL podglądu https://purple-rain-062d03304-5.azurestaticapps.net/

Pracujesz obecnie w gałęzi api. Utwórz żądanie ściągnięcia z gałęzi interfejsu API do gałęzi głównej. Po utworzeniu żądania ściągnięcia względem gałęzi main akcja usługi GitHub publikuje aplikację pod adresem URL podglądu.

Po zakończeniu kompilowania i wdrażania aplikacji bot usługi GitHub dodaje komentarz do żądania ściągnięcia, który zawiera adres URL środowiska przedprodukcyjnego. Możesz wybrać ten link, aby wyświetlić wprowadzone zmiany.

Następnie utworzysz żądanie ściągnięcia i przejdź do przygotowanej wersji aplikacji.