Wdrażanie aplikacji Blazor na Azure Static Web Apps
Azure Static Web Apps publikuje witrynę internetową w środowisku produkcyjnym, tworząc aplikacje z repozytorium GitHub obsługiwanego przez zaplecze bezserwerowe. W poniższym samouczku pokazano, jak wdrożyć aplikację webAssembly platformy C# platformy Blazor, która wyświetla dane pogodowe zwracane przez bezserwerowy interfejs API.
Wymagania wstępne
- Konto usługi GitHub
- Konto platformy Azure. Jeśli nie masz subskrypcji platformy Azure, utwórz bezpłatne konto w wersji próbnej.
1. Tworzenie repozytorium
W tym artykule użyto repozytorium szablonów usługi GitHub, aby ułatwić rozpoczęcie pracy. Szablon zawiera aplikację startową, którą można wdrożyć w Azure Static Web Apps.
- Upewnij się, że zalogowaliśmy się do usługi GitHub i przejdź do następującej lokalizacji, aby utworzyć nowe repozytorium: https://github.com/staticwebdev/blazor-starter/generate
- Nadaj repozytorium nazwę my-first-static-blazor-app.
2. Tworzenie statycznej aplikacji internetowej
Po utworzeniu repozytorium utwórz statyczną aplikację internetową na podstawie Azure Portal.
Przejdź do witryny Azure Portal.
Wybierz pozycję Utwórz zasób.
Wyszukaj Static Web Apps.
Wybierz pozycję Statyczna aplikacja internetowa.
Wybierz przycisk Utwórz.
Na karcie Podstawy wprowadź następujące wartości.
Właściwość Wartość Subskrypcja Nazwa subskrypcji platformy Azure. Grupa zasobów my-blazor-group Nazwa my-first-static-blazor-app Typ planu Bezpłatna Region dla interfejsu API Azure Functions i środowisk przejściowych Wybierz region najbliżej Ciebie. Element źródłowy GitHub Wybierz pozycję Zaloguj się przy użyciu usługi GitHub i uwierzytelnij się w usłudze GitHub, jeśli zostanie wyświetlony monit.
Wprowadź następujące wartości usługi GitHub.
Właściwość Wartość Organizacja Wybierz żądaną organizację usługi GitHub. Repozytorium Wybierz pozycję my-first-static-blazor-app. Gałąź Wybierz pozycję main. Uwaga
Jeśli nie widzisz żadnych repozytoriów, może być konieczne autoryzowanie Azure Static Web Apps w usłudze GitHub. Następnie przejdź do repozytorium GitHub i przejdź do pozycji Ustawienia > Aplikacje autoryzowane przez > OAuth, wybierz pozycję Azure Static Web Apps, a następnie wybierz pozycję Udziel. W przypadku repozytoriów organizacji musisz być właścicielem organizacji, aby udzielić uprawnień.
W sekcji Szczegóły kompilacji wybierz pozycję Blazor z listy rozwijanej Ustawienia wstępne kompilacji i wypełnione są następujące wartości.
Właściwość Wartość Opis Lokalizacja aplikacji Klient Folder zawierający aplikację WebAssembly platformy Blazor Lokalizacja interfejsu API Api Folder zawierający aplikację Azure Functions Lokalizacja wyjściowa wwwroot Folder w danych wyjściowych kompilacji zawierający opublikowaną aplikację WebAssembly platformy Blazor Wybierz pozycję Przejrzyj i utwórz , aby sprawdzić, czy szczegóły są poprawne.
Wybierz pozycję Utwórz, aby rozpocząć tworzenie statycznej aplikacji internetowej i aprowizować GitHub Actions na potrzeby wdrożenia.
Po zakończeniu wdrażania wybierz pozycję Przejdź do zasobu.
Wybierz pozycję Przejdź do zasobu.
3. Wyświetl witrynę internetową
Istnieją dwa aspekty wdrażania aplikacji statycznej. Pierwszy ustanawia podstawowe zasoby platformy Azure tworzące aplikację. Drugi to przepływ pracy funkcji GitHub Actions, który kompiluje i publikuje aplikację.
Zanim będzie można przejść do nowej statycznej aplikacji internetowej, kompilacja wdrożenia musi najpierw zakończyć działanie.
W oknie przeglądu Static Web Apps zostanie wyświetlona seria linków, które ułatwiają interakcję z aplikacją internetową.
Wybierz baner z napisem Kliknij tutaj, aby sprawdzić stan przebiegów GitHub Actions, aby wyświetlić GitHub Actions uruchomione względem repozytorium. Po upewnieniu się, że zadanie wdrożenia zostanie ukończone, możesz przejść do witryny internetowej za pośrednictwem wygenerowanego adresu URL.
Po zakończeniu GitHub Actions przepływu pracy możesz wybrać link adresu URL, aby otworzyć witrynę internetową na nowej karcie.
4. Omówienie aplikacji
Razem następujące projekty składają się na części wymagane do utworzenia aplikacji WebAssembly platformy Blazor działającej w przeglądarce obsługiwanej przez zaplecze interfejsu API Azure Functions.
| Projekt programu Visual Studio | Opis |
|---|---|
| Api | Aplikacja Azure Functions języka C# implementuje punkt końcowy interfejsu API, który udostępnia informacje o pogodzie aplikacji Blazor WebAssembly. Funkcja WeatherForecastFunction zwraca tablicę WeatherForecast obiektów. |
| Klient | Projekt frontonu Blazor WebAssembly. Trasa rezerwowa jest implementowana w celu zapewnienia funkcjonalności routingu po stronie klienta. |
| Udostępniona | Przechowuje typowe klasy, do których odwołują się projekty interfejsu API i klienta, które umożliwiają przepływ danych z punktu końcowego interfejsu API do aplikacji internetowej frontonu. Klasa WeatherForecast jest współużytkowana w obu aplikacjach. |
Trasa rezerwowa
Aplikacja uwidacznia adresy URL, takie jak /counter i /fetchdata, które są mapowania na określone trasy aplikacji. Ponieważ ta aplikacja jest implementowana jako pojedyncza strona, każda trasa jest obsługiwana przez index.html plik. Aby upewnić się, że żądania dotyczące dowolnej ścieżki zwracają index.html, trasa rezerwowa zostanie zaimplementowana w staticwebapp.config.json pliku znajdującym się w folderze głównym projektu klienta.
{
"navigationFallback": {
"rewrite": "/index.html"
}
}
Konfiguracja JSON gwarantuje, że żądania do dowolnej trasy w aplikacji zwracają index.html stronę.
Czyszczenie zasobów
Jeśli nie zamierzasz używać tej aplikacji, możesz usunąć wystąpienie Azure Static Web Apps, wykonując następujące kroki:
- Otwórz witrynę Azure Portal.
- Wyszukaj ciąg my-blazor-group na górnym pasku wyszukiwania.
- Wybierz nazwę grupy.
- Wybierz pozycję Usuń.
- Wybierz pozycję Tak , aby potwierdzić akcję usuwania.