Darmowe Statyczne Aplikacje Webowe Azure – Ustawienie i Wdrożenie Wyjaśnione Przez Tima Coreya

Microsoft Azure zapewnia wiele sposobów na hostowanie aplikacji webowych w chmurze, począwszy od Azure Web Apps w Azure App Service, aż po maszyny wirtualne i kontenery. W tym artykule skupiamy się konkretnie na Azure Static Web Apps, podążając za pełnym przewodnikiem autorstwa Tima Coreya. To głębsze spojrzenie na to, jak działają darmowe Azure Static Web Apps, jak są tworzone przy użyciu Azure Portal i jak deweloperzy mogą wdrażać aplikacje webowe bezpośrednio z kodu źródłowego za pomocą GitHub i ciągłego wdrażania.

Wideo Tima Coreya na temat "Konfiguracja i wdrażanie do darmowych Azure Static Web Apps" prowadzi krok po kroku przez tworzenie i wdrażanie statycznych aplikacji webowych za pomocą usług Microsoft Azure. Demonstruje, jak hostować strony webowe, zarządzać aplikacjami webowymi poprzez grupę zasobów i wdrażać zarówno proste strony HTML, jak i aplikacje Blazor WebAssembly przy użyciu w pełni zarządzanej platformy. Ten artykuł dokładnie wyjaśnia jego wideo, z uwzględnieniem znaczników czasu w nagłówkach.

Czym są Azure Static Web Apps i dlaczego się liczą

Na początku wideo, Tim Corey wyjaśnia, że Azure Static Web Apps pozwalają na wdrażanie tylu aplikacji webowych, ile chcesz, za darmo. Wskazuje, że te aplikacje są hostowane globalnie przez centra danych Microsoft Azure i dostarczane za pośrednictwem sieci dostarczania treści, co zapewnia wysoką dostępność, równoważenie obciążenia i niskie opóźnienia dla użytkowników składających żądania HTTP.

Tim zauważa, że te aplikacje webowe wspierają uwierzytelnianie, API apps i integrację z RESTful APIs. Nawet na darmowym poziomie, Azure Static Web Apps oferują lepsze bezpieczeństwo i wysoką wydajność bez potrzeby zarządzania serwerami, maszynami wirtualnymi czy infrastrukturą sieciową. To jedna z ważnych zalet korzystania z platformy jako usługi, zamiast zarządzania maszynami wirtualnymi Azure lub serwerami na potrzeby własne.

Wyjaśnia, że Azure Static Web Apps są idealne dla aplikacji webowych front-end, takich jak HTML, CSS, JavaScript, React i Blazor WebAssembly, ale nie dla aplikacji, które wymagają przetwarzania po stronie serwera.

Zakres wideo i kontekst nauki Azure

Tim wyjaśnia, że to wideo oferuje skoncentrowany tutorial, a nie pełny przegląd wszystkich usług Azure. Chociaż Azure App Service wspiera wiele języków, aplikacje mobilne, API apps, a nawet kontenery Docker, to wideo skupia się na konkretnym serwisie w Microsoft Azure.

On wspomina, że jeśli widzowie chcą głębszego omówienia tematów takich jak bezpieczeństwo, zarządzanie kosztami i aplikacje krytyczne dla misji, to tematy te są omówione w jego kursach Azure. Jednak celem jest pokazanie, jak szybko można stworzyć i wdrożyć aplikację webową z użyciem Azure Static Web Apps i ciągłego wdrażania.

Tworzenie repozytorium GitHub dla statycznej strony internetowej

Tim zaczyna od stworzenia nowego repozytorium GitHub, wyjaśniając, że GitHub jest darmowy i bezproblemowo integruje się z usługami Azure. To repozytorium będzie zawierało kod źródłowy dla prostej statycznej strony internetowej.

Tworzy repozytorium jako prywatne, dodaje plik README i wybiera plik .gitignore odpowiedni dla Visual Studio i Visual Studio Code. Tim wyjaśnia, że chociaż używa Visual Studio Code, ten sam proces działa z Visual Studio.

To repozytorium reprezentuje punkt wyjścia do hostowania stron internetowych przy użyciu Azure. Tim podkreśla, że Azure Static Web Apps wdrażają się bezpośrednio z kodu źródłowego, co sprawia, że ciągłe wdrażanie jest proste i wiarygodne.

Budowanie prostej aplikacji webowej HTML

Korzystając z Visual Studio Code, Tim tworzy plik index.html, który działa jako punkt wejściowy dla strony internetowej. Używa skrótów Emmet do wygenerowania podstawowej struktury HTML i dodaje minimalną zawartość, aby zademonstrować funkcjonalność.

Ten krok pokazuje, jak podstawowe aplikacje webowe mogą być wdrażane bez żadnych usług backendowych, baz danych czy serwerów. Tim wyjaśnia, że taka prostota jest zamierzona, ponieważ Azure Static Web Apps są zaprojektowane specjalnie dla obciążeń front-endowych.

Po zakończeniu, zatwierdza zmiany i przesyła kod źródłowy do GitHub, co uruchamia później proces wdrażania.

Tworzenie aplikacji Azure Static Web App w Azure Portal

Tim przełącza się do Azure Portal i tworzy nowe zasoby Static Web App. Wyjaśnia znaczenie tworzenia grupy zasobów, podkreślając, że grupy zasobów ułatwiają zarządzanie zasobami, oczyszczanie środowisk i unikanie niepotrzebnych kosztów.

Zaleca wybór darmowego tieru, tłumacząc, że darmowy tier jest szybki, niezawodny i wystarczający dla większości stron małych firm i projektów osobistych. Podczas gdy plany usługi Azure App mogą wymagać planu usługowego i miesięcznych opłat, Azure Static Web Apps w darmowym tierze całkowicie usuwają tę złożoność.

Tim krótko wspomina, że jego własna strona działa na Azure Static Web Apps, demonstrując rzeczywiste wykorzystanie tej usługi w produkcji.

Łączenie z GitHub i włączanie ciągłego wdrażania

Tim łączy aplikację Azure Static Web App z GitHub, wybierając repozytorium i gałąź. Wyjaśnia, że Azure automatycznie konfiguruje przepływ pracy GitHub Actions, aby obsłużyć ciągłe wdrażanie.

Ten przepływ pracy eliminuje potrzebę manualnych kroków wdrażania. Za każdym razem, gdy kod źródłowy się zmienia, aplikacja webowa jest ponownie budowana i wdrażana automatycznie. Tim zauważa, że jest to kluczowa cecha współczesnych platform chmurowych i jedna z głównych zalet korzystania z Microsoft Azure do hostingu stron internetowych.

Tokens wdrażania i konfiguracja zabezpieczeń

Tim nawigować do ustawień repozytorium GitHub, aby pokazać token wdrażania przechowywany jako sekret. Token ten umożliwia bezpieczną komunikację między GitHub a Azure.

Wyjaśnia, że to ustawienie zapewnia zwiększone bezpieczeństwo bez konieczności ręcznej konfiguracji poświadczeń przez deweloperów. Token API aplikacji Azure Static Web App zapewnia, że tylko autoryzowane przepływy pracy mogą wdrażać aplikację.

Przeglądanie wdrożonej statycznej strony internetowej

Po zakończeniu wdrażania, Tim otwiera działającą stronę internetową bezpośrednio z Azure Portal. Strona jest teraz publicznie dostępna i hostowana w chmurze.

Wyjaśnia, że ten sam proces działa dla innych frameworków front-endowych, ponieważ ostatecznie produkują one statyczne pliki, które mogą być skutecznie obsługiwane przez Azure Static Web Apps. Nie jest potrzebny żaden plan usługi aplikacji, maszyny wirtualne ani serwery backendowe.

Wdrażanie aplikacji Blazor WebAssembly

Tim następnie demonstruje wdrażanie samodzielnej aplikacji Blazor WebAssembly, podkreślając różnicę między Blazor Web Apps i Blazor WebAssembly.

Wyjaśnia, że Blazor WebAssembly działa całkowicie po stronie klienta, co czyni go odpowiednim dla Azure Static Web Apps. Technologie po stronie serwera jak ASP.NET Core MVC, PHP lub Java backend wymagają zamiast tego Azure Web Apps.

Ta sekcja podkreśla, że Azure Static Web Apps są zaprojektowane dla aplikacji webowych działających wyłącznie po stronie klienta.

Tworzenie i testowanie aplikacji Blazor

Korzystając z Visual Studio, Tim tworzy projekt Blazor WebAssembly, wybiera .NET 9 i włącza funkcje jak HTTPS i wsparcie progressive web application.

Uruchamia aplikację lokalnie, aby potwierdzić, że działa poprawnie przed wdrożeniem, wzmacniając najlepsze praktyki dotyczące przygotowania produkcyjnego. Po weryfikacji, tworzy repozytorium GitHub bezpośrednio z Visual Studio i przesyła kod źródłowy.

Wdrażanie Blazor do Azure Static Web Apps

Tim tworzy kolejne zasoby Static Web App i łączy je z repozytorium Blazor. Podkreśla, że przepływ pracy GitHub Actions automatycznie konfiguruje ścieżki specyficzne dla Blazor, takie jak katalog wyjściowy.

To demonstruje, jak Azure wspiera wiele języków programowania i frameworków bez potrzeby ręcznej konfiguracji. Platforma abstrahuje podstawową infrastrukturę i złożoność budowy.

Proces budowy i zakończenie wdrożenia

Tim wyjaśnia, że budowy Blazor trwają dłużej z powodu kroków kompilacji i optymalizacji. Azure przycina aplikację podczas wdrożenia, poprawiając wydajność.

Po zakończeniu, aplikacja Blazor WebAssembly jest działająca, globalnie dostępna i hostowana na infrastrukturze chmurowej Microsoft Azure.

Dodatkowe funkcje Azure Static Web Apps

Tim krótko omawia inne funkcje, w tym:

• Dostosowane domeny

• Integracja API z wbudowanym zabezpieczeniem

• Sloty wdrożeniowe takie jak sloty deweloperskie, staging i produkcyjne

Wyjaśnia, że API są automatycznie zablokowane, zapobiegając nieautoryzowanemu dostępowi i upraszczając integrację.

Sprzątanie zasobów przy użyciu grup zasobów

Na zakończenie, Tim kasuje grupę zasobów, pokazując, jak Azure pozwala deweloperom usunąć wszystkie powiązane zasoby naraz. Jest to szczególnie ważne podczas testowania usług chmurowych, aby uniknąć niezamierzonych kosztów.

Ostrzega, że usunięcie grupy zasobów jest trwałe i nie może być cofnięte.

Kiedy używać Azure Static Web Apps, a kiedy nie

Tim kończy, wyjaśniając, że Azure Static Web Apps nie są odpowiednie dla obciążeń po stronie serwera, takich jak aplikacje PHP, aplikacje MVC lub Blazor Web Apps.

Są idealne dla aplikacji webowych front-endowych zbudowanych przy użyciu HTML, JavaScript, CSS, React, Angular, Vue i Blazor WebAssembly. Ponieważ wszystko działa po stronie klienta, te aplikacje mogą być hostowane całkowicie za darmo.

Jak pokazuje Tim Corey w całym filmie, Azure Static Web Apps to prosty, bezpieczny i w pełni zarządzany sposób wdrażania nowoczesnych aplikacji webowych za pomocą Microsoft Azure, bez zamartwiania się o serwery, skalowanie czy infrastrukturę.