Wprowadzenie

  • 4 min

Scenariusz

Firma uruchamia aplikację internetową z listą zakupów. Za pośrednictwem witryny klienci mogą dodawać, edytować, wyświetlać i usuwać elementy z listy, takie jak żywność i artykuły gospodarstwa domowego.

Aby zapewnić klientom prywatność, witryna i interfejsy API muszą być bezpieczne. Użytkownicy będą rozproszeni po całym świecie i chcesz, aby wszyscy mieli doskonałą wydajność. Potrzebujesz rozwiązania, które eliminuje jak najwięcej pracy związanej z infrastrukturą (w tym kompilowanie i publikowanie), aby skoncentrować się na funkcjach i środowisku użytkownika.

Możesz wdrożyć swoje zasoby internetowe do magazynu w chmurze, utworzyć i przypisać własny certyfikat SSL, utworzyć interfejs API na serwerze chmurowym, ustanowić odwrotny serwer proxy, który umożliwia aplikacji wykonywanie wywołań do interfejsu API, dystrybuować aplikację globalnie i skonfigurować własny proces ciągłej integracji/ciągłego wdrażania.

Jeśli skorzystasz z usługi Azure Static Web Apps, wszystko to otrzymasz gotowe do użytku.

Co to jest Azure Static Web Apps?

Usługa Azure Static Web Apps rozwiązuje trudne problemy na wszystkich etapach: od kodu źródłowego do globalnej dostępności.

Podczas gdy koncentrujesz się na tworzeniu aplikacji, usługa Azure Static Web Apps automatycznie kompiluje i hostuje ją z usługi GitHub lub Azure DevOps.

Statyczne aplikacje internetowe są często kompilowane przy użyciu bibliotek i struktur, takich jak Angular, React, Svelte lub Vue. Te aplikacje obejmują zasoby HTML, CSS, JavaScript i obrazy, które tworzą aplikację. W ramach tradycyjnej architektury serwera internetowego te pliki są obsługiwane z poziomu pojedynczego serwera wraz z dowolnymi wymaganymi punktami końcowymi interfejsu API.

W przypadku usługi Azure Static Web Apps statyczne zasoby są oddzielone od tradycyjnego serwera sieci Web. Ich obsługę zapewniają punkty globalnie rozmieszczone na całym świecie. Takie rozproszenie sprawia, że pliki są obsługiwane znacznie szybciej, ponieważ znajdują się fizycznie bliżej użytkowników. Punkty końcowe interfejsu API, które są opcjonalne, są hostowane przy użyciu architektury bezserwerowej, co pozwala całkowicie uniknąć konieczności utrzymywania pełnego serwera zaplecza.

Model usługi Azure Static Web Apps to dokładnie to, czego potrzebujesz — nie za dużo, nie za mało.

Zrzut ekranu przedstawiający przegląd usługi Static Apps.

Podczas tworzenia zasobu usługi Azure Static Web Apps platforma Azure konfiguruje przepływ pracy funkcji GitHub Actions lub usługi Azure DevOps w repozytorium kodu źródłowego aplikacji. Przepływ pracy monitoruje wybraną przez Ciebie gałąź. Za każdym razem, gdy wypychasz zatwierdzenia lub tworzysz żądania ściągnięcia do obserwowanej gałęzi, przepływ pracy automatycznie kompiluje i wdraża aplikację i jej interfejs API na platformie Azure.

Platforma Azure hostuje i obsługuje aplikację internetową. Natomiast usługa Azure Functions zapewnia funkcjonalność interfejsu API zaplecza, która umożliwia automatyczne skalowanie w poziomie i w pionie na podstawie liczby żądań.

Opcjonalne interfejsy API

Usługa Azure Static Web Apps to doskonałe rozwiązanie do obsługi typowo statycznej zawartości, które stanowi również idealne wsparcie dla statycznych aplikacji internetowych, które wymagają interfejsów API. Możesz więc zdecydować się na hostowanie statycznej aplikacji internetowej z interfejsem API lub bez niego.

W ramach ćwiczeń w tym module wdrożysz aplikację przy użyciu preferowanej platformy internetowej.

Uwaga

W tym module będzie to aplikacja bez interfejsu API. Zobacz sekcję Następne kroki w ostatniej lekcji, aby uzyskać informacje na temat następnego modułu, w którym wdrożysz interfejs API obok aplikacji.

Kluczowe cechy i funkcje

  • Globalnie rozproszony hosting w sieci Web umieszcza zawartość statyczną, taką jak HTML, CSS, JavaScript i obrazy bliżej użytkowników
  • Usługa Azure Functions zapewnia obsługę zintegrowanych interfejsów API
  • Pierwsza klasa integracji z usługami GitHub i Azure DevOps, w której zmiany repozytorium wyzwalają kompilacje i wdrożenia.
  • Bezpłatne certyfikaty SSL są automatycznie odnawiane
  • Unikatowe adresy URL podglądu na potrzeby wyświetlania podglądu żądań ściągnięcia

Cele szkolenia

W tym module utworzysz, zmodyfikujesz i wdrożysz aplikację internetową w usłudze Azure Static Web Apps.

Wybierz własną ścieżkę

Ten moduł zawiera cztery odmiany przykładowej aplikacji do wyboru: Angular, React, Svelte i Vue. Siła usługi Azure Static Web Apps polega na tym, że wszystkie te odmiany „po prostu działają”.

Kod początkowy zawiera cztery aplikacje, z których będziesz korzystać.

├ angular-app  👈 The Angular client app
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app

Co będziesz robić

Po wybraniu aplikacji klienckiej wykonasz następujące zadania:

  • Kompilowanie i uruchamianie aplikacji frontonu.
  • Automatyczne kompilowanie i wdrażanie aplikacji internetowej na platformie Azure z repozytorium GitHub przy użyciu funkcji GitHub Actions.
  • Na koniec przejrzysz i uruchomisz aplikację, jak pokazano poniżej.

Zrzut ekranu przedstawiający przykładową aplikację angular.

Zrzut ekranu przedstawiający przykładową aplikację react.

Zrzut ekranu przedstawiający przykładową aplikację svelte.

Zrzut ekranu przedstawiający przykładową aplikację Vue.

Następne kroki

Teraz możesz sądzić, że trzeba najpierw utworzyć zasoby platformy Azure, ale usługa Azure Static Web Apps uwzględnia codzienny przepływ pracy. Bardziej naturalnym podejściem jest rozpoczęcie od kodu w usłudze GitHub przed utworzeniem zasobów na platformie Azure.