Planowanie statycznej aplikacji internetowej na platformie Azure
- 5 min
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.
Aplikacje webowe Azure Static
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 | Dystrybucja | Lokalizacja danych wyjściowych kompilacji aplikacji względem lokalizacji aplikacji | Nie. |
| Lokalizacja interfejsu API | API (Interfejs Programowania Aplikacji) | Lokalizacja kodu źródłowego interfejsu API | Nie. |
Wynik kompilacji aplikacji to względna ścieżka do katalogu wynikowego kompilacji Twojej 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 aplikację interfejsu API można umieścić w folderze o nazwie api lub functions, ale możesz nadać mu dowolną nazwę.
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
Podczas odświeżania strony zostanie wyświetlony błąd 404, ponieważ przeglądarka wysyła żądanie do platformy hostingu w celu obsługi /products. Na serwerze nie ma strony o nazwie products do obsługi. 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.