Ćwiczenie — tworzenie statycznej aplikacji internetowej na platformie Azure

Ukończone

W tym ćwiczeniu utworzysz wystąpienie usługi Azure Static Web Apps, w tym akcję usługi GitHub, która automatycznie kompiluje i publikuje aplikację.

Tworzenie statycznej aplikacji internetowej

Po utworzeniu repozytorium GitHub możesz utworzyć wystąpienie usługi Static Web Apps w witrynie Azure Portal.

W tym module jest używana piaskownica platformy Azure, aby zapewnić bezpłatną, tymczasową subskrypcję platformy Azure, której można użyć do ukończenia ćwiczenia. Przed kontynuowaniem upewnij się, że piaskownica została aktywowana w górnej części tej strony.

1. Zaloguj się do witryny Azure Portal i upewnij się, że używasz do logowania tego samego konta, które zostało użyte do aktywowania piaskownicy.

2. Na stronie głównej platformy Azure w obszarze Usługi platformy Azure wybierz pozycję Utwórz zasób. Zostanie wyświetlone okienko Tworzenie zasobu .

3. W polu wyszukiwania marketplace wyszukaj i wybierz pozycję Statyczna aplikacja internetowa. Zostanie wyświetlone okienko Statyczna aplikacja internetowa.

4. Wybierz pozycję Utwórz. Zostanie wyświetlone okienko Tworzenie statycznej aplikacji internetowej. Skonfiguruj nową aplikację i połącz ją z repozytorium GitHub.

5. Na karcie Podstawy wprowadź następujące wartości dla każdego ustawienia.

   Ustawienie	Wartość
   Szczegóły projektu
   Subskrypcja	Subskrypcja Concierge
   Grupa zasobów	[Nazwa grupy zasobów piaskownicy]
   Szczegóły statycznej aplikacji internetowej
   Nazwisko	Nadaj nazwę aplikacji. Prawidłowe znaki to a-z (bez uwzględniania wielkości liter), 0-9i -.
   Plan hostingu
   Warstwa cenowa aplikacji	Wybierz pozycję Bezpłatna
   Azure Functions i szczegóły przejściowe
   Region dla interfejsu API usługi Azure Functions i środowisk przejściowych	Wybierz region znajdujący się najbliżej Ciebie
   Szczegóły wdrożenia
   Źródło	Wybierz pozycję GitHub
   Konto usługi GitHub	Wybierz pozycję Zaloguj się przy użyciu usługi GitHub. Zostanie wyświetlone okienko Autoryzowanie usługi Azure Static Web Apps . Wybierz pozycję Autoryzuj usługę Azure-App-Service-Static-Web-Apps. Wprowadź hasło.
   Organizacja	Wybierz organizację, w której utworzono repozytorium
   Repozytorium	my-static-blazor-app
   Oddział	main
   Szczegóły kompilacji
   Ustawienia wstępne kompilacji	Blazor
   Lokalizacja aplikacji	Klient
   Lokalizacja interfejsu API	Interfejs API
   Lokalizacja wyjściowa	wwwroot

6. Wybierz pozycję Przeglądanie + tworzenie>Utwórz.

7. Po zakończeniu wdrażania wybierz pozycję Przejdź do zasobu. Pojawi się okienko Statyczna aplikacja internetowa.

Przegląd akcji usługi GitHub

Na tym etapie wystąpienie usługi Static Web Apps zostało utworzone na platformie Azure, ale aplikacja nie została jeszcze wdrożona. Akcja usługi GitHub tworzona przez platformę Azure w repozytorium jest uruchamiana automatycznie w celu wyzwolenia pierwszej kompilacji i wdrożenia aplikacji, ale ukończenie jej zajmuje kilka minut.

Możesz sprawdzić stan akcji kompilacji i wdrożenia, wybierając następujący link, aby przejść do strony Akcje repozytorium GitHub:

Po zakończeniu pracy:

1. Wybierz pozycję Azure Static Web Apps CI/CD.

2. Wybierz zatwierdzenie zatytułowane Ci : dodaj plik przepływu pracy usługi Azure Static Web Apps.

3. Wybierz link Kompiluj i wdróż zadanie

W tym miejscu możesz obserwować postęp kompilowania aplikacji.

Wyświetlanie witryny internetowej

Gdy akcja usługi GitHub zakończy kompilowanie i publikowanie aplikacji internetowej, możesz wyszukać i zobaczyć działającą aplikację.

Wybierz link URL w witrynie Azure Portal, aby znaleźć swoją aplikację w przeglądarce.

Twoja aplikacja jest teraz dostępna globalnie, ale nadal mówi Ładowanie danych , ponieważ nie ma jeszcze żadnych danych ani interfejsu API. W następnej sekcji dodasz do swojej aplikacji internetowej interfejs API.

Gratulacje! Twoja pierwsza aplikacja została wdrożona w usłudze Azure Static Web Apps!

Uwaga

Nie martw się, jeśli zobaczysz stronę internetową informującą, że aplikacja nie została jeszcze skompilowana i wdrożona. Spróbuj odświeżyć przeglądarkę za minutę. Akcja usługi GitHub jest uruchamiana automatycznie po utworzeniu usługi Azure Static Web Apps. Jeśli więc zobaczysz stronę powitalną, oznacza to, aplikacja jest nadal wdrażana.

Następne kroki

Twoja aplikacja nie ma interfejsu API dla listy zakupów. Następnie dowiesz się, jak dodać interfejs API usługi Azure Functions do aplikacji publikowanej na platformie Azure wraz ze statycznymi elementami zawartości.