Publikuj interfejs API za pomocą GitHub Actions

  • 3 min

Dodaliście swój interfejs API do swojej aplikacji internetowej i obie działają lokalnie. 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 skonfigurowaniu monitorowania twojej gałęzi głównej, akcja usługi GitHub została wygenerowana dla ciebie. Akcja usługi GitHub nasłuchuje zmian w gałęzi głównej repozytorium oraz po wykryciu zatwierdzenia lub żądania ściągnięcia w celu 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ą interfejsu API . Jednak ponieważ w tamtym czasie nie miałeś interfejsu API w folderze interfejsu API, usługa Azure Static Web Apps nie próbowała opublikować interfejsu API.

Teraz wszystko się zmienia.

Konfiguracja akcji GitHub

Folder .github/workflows zawiera plik GitHub Actions. Plik zawiera ustawienia 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

api_location jest ustawiona na poprawną wartość wskazującą interfejs API w folderze interfejsu API.

Uruchom akcję GitHub

Akcja usługi GitHub jest gotowa do zbudowania i opublikowania aplikacji internetowej oraz interfejsu API po wykryciu zmiany w gałęzi głównej . Aby wyzwolić akcję usługi GitHub, możesz zatwierdzić bezpośrednio lub utworzyć pull request do gałęzi głównej . Wykryte zmiany w gałęzi głównej wyzwalają akcję usługi GitHub w celu opublikowania aplikacji pod tym samym adresem URL aktywnej witryny internetowej.

Adresy URL podglądu

Czasami chcesz zobaczyć zmiany na stronie testowej przed opublikowaniem na żywo w witrynie internetowej. Usługa Azure Static Web Apps umożliwia wyświetlenie podglądu zmian za pośrednictwem adresów URL w wersji zapoznawczej. Adres URL podglądu można utworzyć, tworząc żądanie ściągnięcia względem gałęzi obserwowanej przez akcję usługi GitHub. Nie ma to wpływu na twoją działającą witrynę internetową. Zamiast tego zostanie utworzona nowa tymczasowa wersja aplikacji. Jeśli wrócisz do swojego pull requesta na GitHubie i sprawdzisz, powinien być widoczny link do wersji stagingowej opublikowany na karcie Dyskusja.

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

Źródło Opis Adres URL
główna gałąź Adres URL aktywnej witryny sieci Web https://purple-rain-062d03304.azurestaticapps.net/
Żądanie ściągnięcia nr 5 Adres URL podglądu https://purple-rain-062d03304-5.azurestaticapps.net/

Obecnie pracujesz w gałęzi api. Utwórz żądanie ściągnięcia z gałęzi API do gałęzi głównej . Po utworzeniu pull requestu względem głównej gałęzi , akcja GitHub publikuje aplikację pod adresem URL podglądu.

Gdy przepływ pracy zakończy kompilowanie i wdrażanie aplikacji, bot GitHub dodaje komentarz do pull request, który zawiera adres URL środowiska przedprodukcyjnego. Możesz wybrać ten link, aby wyświetlić wprowadzone zmiany.

Następnie utworzysz pull request i przejdziesz do przygotowanej wersji aplikacji.