Ćwiczenie — wprowadzenie

Ukończone

Usługa Azure Static Web Apps publikuje witryny internetowe w środowisku produkcyjnym, kompilując w tym celu aplikacje z repozytorium GitHub. W tym ćwiczeniu utworzysz aplikację internetową przy użyciu platformy Blazor z repozytorium GitHub.

Tworzenie repozytorium

Ten moduł ułatwia tworzenie nowego repozytorium przy użyciu repozytorium szablonu usługi GitHub. Dostępny jest szablon zawierający aplikację startową utworzoną za pomocą platformy Blazor.

  1. Przejdź do strony tworzenia na podstawie szablonu dla repozytorium szablonów.

    • Jeśli zostanie wyświetlony błąd 404 Nie znaleziono strony, zaloguj się do usługi GitHub i spróbuj ponownie.
  2. Jeśli zostanie wyświetlony monit o podanie konta Owner (Właściciel), wybierz jedno ze swoich kont usługi GitHub.

  3. Nadaj repozytorium nazwę my-static-blazor-app.

  4. Usługa Azure Static Web Apps obsługuje zarówno repozytoria publiczne, jak i prywatne. W tym ćwiczeniu wybierz pozycję Prywatny jako widoczność.

  5. Kliknij przycisk Create repository (Utwórz repozytorium).

Uruchamianie aplikacji

Właśnie utworzono repozytorium GitHub o nazwie my-static-blazor-app na Twoim koncie usługi GitHub. Następnie sklonujesz repozytorium i uruchomisz kod lokalnie na komputerze.

  1. W repozytorium GitHub wybierz pozycję Kod, a następnie z menu wybierz pozycję Otwórz za pomocą programu Visual Studio . To polecenie wyświetla monit o uruchomienie programu Visual Studio i sklonowanie repozytorium na maszynę.

    • Jeśli masz zainstalowaną wiele wersji programu Visual Studio, upewnij się, że aplikacja jest otwarta w programie Visual Studio 2022 lub nowszym.
  2. Otwórz plik rozwiązania ShoppingList.sln.

    Zrzut ekranu przedstawiający miejsce otwarcia rozwiązania listy zakupów.

  3. Na koniec uruchom aplikację klienta frontonu, wybierając pozycję Klient jako projekt startowy i uruchamiając debuger.

    Zrzut ekranu przedstawiający wybrany projekt klienta.

Przeglądanie aplikacji

Nadszedł czas, aby zobaczyć aplikację działającą lokalnie. Program Visual Studio otwiera witrynę internetową w domyślnej przeglądarce.

Zrzut ekranu przedstawiający interfejs użytkownika aplikacji internetowej.

Aplikacja powinna powiedzieć Ładowanie danych ... ponieważ nie ma jeszcze danych ani interfejsu API. W dalszej części tego modułu dodasz interfejs API dla aplikacji internetowej.

Teraz zatrzymaj uruchomioną aplikację, kończąc sesję debugowania w programie Visual Studio.

Następne kroki

Aplikacja została skompilowana i teraz działa lokalnie w przeglądarce.

Następnie opublikujesz aplikację w usłudze Azure Static Web Apps.