Planowanie statycznej aplikacji internetowej na platformie Azure

Ukończone

Ostatecznym celem jest hostowanie aplikacji na platformie Azure. Usługa Azure Static Web Apps zajmuje się aprowizowaniem wszystkich niezbędnych zasobów platformy Azure.

Jednak zanim będzie można hostować aplikację potrzebne jest jakieś narzędzie do kompilowania aplikacji w miarę wprowadzania zmian. Te zmiany mogą być wprowadzane przez zatwierdzenia lub żądania ściągnięcia do repozytorium. Kluczową funkcją usługi Azure Static Web Apps jest skonfigurowanie przepływu pracy funkcji GitHub Actions w celu kompilowania i publikowania aplikacji.

Po utworzeniu zasobu usługi Azure Static Web Apps zostanie utworzony przepływ pracy funkcji GitHub Actions. Przepływ pracy jest wyzwalany natychmiast i dba o kompilowanie i publikowanie aplikacji. Przepływ pracy jest również wyzwalany za każdym razem, gdy wprowadzisz zmiany do obserwowanej gałęzi swojego repozytorium.

Azure Static Web Apps

Są dwa zautomatyzowane aspekty wdrażania aplikacji internetowej. Pierwszy ustanawia podstawowe zasoby platformy Azure tworzące aplikację. Drugi to przepływ pracy funkcji GitHub Actions, który kompiluje i publikuje aplikację.

Gdy publikujesz aplikację w sieci Web za pomocą usługi Azure Static Web Apps, otrzymujesz szybki hosting aplikacji internetowej oraz skalowalne interfejsy API. Otrzymujesz także dostępny zunifikowany przepływ pracy kompilowania i wdrażania zapewniany przez funkcję GitHub Actions.

Łączenie wystąpienia usługi Static Web Apps z usługą GitHub

Usługa Azure Static Web Apps została zaprojektowana w celu hostowania aplikacji, których kod źródłowy znajduje się w usłudze GitHub. Podczas tworzenia wystąpienia usługi Static Web Apps logujesz się do usługi GitHub i określasz repozytorium zawierające kod aplikacji.

Potrzebujesz również określić trzy ścieżki folderów w repozytorium, aby aplikacja mogła być automatycznie kompilowana i wdrażana:

Lokalizacja Przykład lokalizacji opis Wymagania
Lokalizacja aplikacji / Lokalizacja kodu źródłowego aplikacji internetowej Tak
Lokalizacja wyjściowa kompilacji aplikacji dist Lokalizacja danych wyjściowych kompilacji aplikacji względem lokalizacji aplikacji Nie.
Lokalizacja interfejsu API api Lokalizacja kodu źródłowego interfejsu API Nie.

Dane wyjściowe kompilacji aplikacji to względna ścieżka do katalogu wyjściowego kompilacji aplikacji. Rozważmy na przykład aplikację w folderze my-app, która wyprowadza swoje skompilowane zasoby do folderu my-app/dist. W takim przypadku należy określić dist dla tej lokalizacji.

Z kodu źródłowego do zasobów statycznych przy użyciu funkcji GitHub Actions

Repozytorium GitHub zawiera kod źródłowy, dlatego należy go skompilować przed opublikowaniem.

Gdy tworzysz wystąpienie usługi Static Web Apps, platforma Azure tworzy w repozytorium przepływ pracy funkcji GitHub Actions. Przepływ pracy tworzy aplikację za każdym razem, gdy wypychasz zmiany lub tworzysz żądanie ściągnięcia względem gałęzi wybranej do śledzenia. Ten proces kompilacji przekształca kod źródłowy w zasoby statyczne, które są obsługiwane przez platformę Azure. Po zakończeniu kompilacji akcja wdraża zasoby.

Akcja usługi GitHub jest dodawana do repozytorium w folderze .github/workflows. W razie potrzeby możesz przejrzeć lub zmodyfikować ten plik. Ustawienia wprowadzane podczas tworzenia zasobu są przechowywane w pliku akcji usługi GitHub.

Interfejs API zintegrowany z usługą Azure Functions

Jeśli aplikacja wymaga interfejsu API, można zaimplementować ją jako projekt usługi Azure Functions w repozytorium. Interfejs API zostanie automatycznie wdrożony i będzie hostowany przez wystąpienie usługi Static Web Apps. Przepływ pracy funkcji GitHub Actions, który kompiluje i wdraża aplikację, znajduje interfejs API w repozytorium na postawie podanej nazwy folderu.

Zazwyczaj aplikacja interfejsu API jest umieszczana w folderze o nazwie api lub functions, ale możesz go nazwać inaczej.

Co się dzieje, gdy nie masz interfejsu API? Nie martw się. Jeśli usługa Azure Static Web Apps nie może znaleźć interfejsu API w podanym folderze, nie opublikuje interfejsu API, ale nadal będzie publikować aplikację.

Obsługa tras powrotu

Po odświeżeniu strony zobaczysz błąd 404, ponieważ przeglądarka wysyła żądanie do platformy hostingu, aby obsłużyć trasę /products. Na serwerze nie ma jednak żadnej strony o nazwie products. Na szczęście można temu łatwo zaradzić, wystarczy utworzyć trasę powrotu. Trasa powrotu to trasa, która dopasowuje wszystkie niedopasowane żądania stron do serwera.

Usługa Azure Static Web Apps obsługuje niestandardowe reguły routingu zdefiniowane w opcjonalnym pliku staticwebapp.config.json znajdującym się w folderze wyjściowym kompilacji aplikacji.

Aplikację można skonfigurować tak, aby korzystała z reguł implementujących trasę rezerwową, jak pokazano w poniższym przykładzie, która używa symbolu wieloznakowego ścieżki z filtrem plików:

{
  "navigationFallback": {
    "rewrite": "index.html",
    "exclude": ["/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}"]
  }
}

Ta reguła nakazuje usłudze Azure Static Web Apps obsługę index.html , gdy żądanie zasobu nie zostanie znalezione, z wyłączeniem obrazów i plików CSS wyświetlanych w wyrażeniu exclude .

Lokalizacja pliku tras

Usługa Azure Static Web Apps oczekuje , że plik staticwebapp.config.json będzie domyślnie znajdować się w folderze output_location . Jeśli proces kompilacji kopiuje plik staticwebapp.config.json do output_locationpliku , nie ma nic innego, co należy zrobić. W przypadku większości projektów parametr output_location jest względny względem elementu app_location.

Plik staticwebapp.config.json aplikacji znajduje się w folderze angular-app/src/assets.

Plik staticwebapp.config.json znajduje się w folderze react-app.

Plik staticwebapp.config.json znajduje się w folderze svelte-app/public.

Plik staticwebapp.config.json znajduje się w folderze vue-app/public.

Następne kroki

Czego potrzebujesz, aby opublikować aplikację internetową w usłudze Azure Static Web Apps? Wystarczy, że aplikacja znajduje się w repozytorium GitHub.

Sprawdź swoją wiedzę

1.

Jaka sekcja pliku staticwebapp.config.json umieściłaby trasę rezerwową?