Kurz: Vytvoření statické webové aplikace pomocí Blazor ve statickém Web Apps Azure

  • Článek
  • 3 min ke čtení

služba Azure Static Web Apps publikuje web do produkčního prostředí tím, že vytváří aplikace z úložiště GitHub. V tomto kurzu nasadíte webovou aplikaci do statických webových aplikací Azure pomocí Azure Portal.

Pokud nemáte předplatné Azure, Vytvořte si bezplatný zkušební účet.

Požadavky

Přehled aplikace

Služba Azure static Web Apps umožňuje vytváření statických webových aplikací podporovaných back-endu bez serveru. Následující kurz ukazuje, jak nasadit aplikaci WebAssembly v C# Blazor, která zobrazuje data o počasí vrácená rozhraním API bez serveru.

Dokončení aplikace Blazor

aplikace vybraná v tomto kurzu se skládá ze tří různých Visual Studio projektů:

  • API: aplikace Azure Functions C#, která implementuje koncový bod rozhraní API, který poskytuje informace o počasí do aplikace WebAssembly v Blazor. WeatherForecastFunction vrací pole WeatherForecast objektů.

  • Klient: front-end Blazor projekt WebAssembly. Pro zajištění funkčnosti směrování na straně klienta je implementována záložní trasa .

  • Shared: uchovává společné třídy, na které odkazuje rozhraní API, i klientské projekty, které umožňují tok dat z koncového bodu rozhraní API do front-endové webové aplikace. WeatherForecastTřída je sdílena mezi oběma aplikacemi.

Dohromady tyto projekty tvoří součásti, které jsou nutné k vytvoření Blazor aplikace WebAssembly spuštěné v prohlížeči podporovaném back-end rozhraním API Azure Functions.

Záložní trasa

Aplikace zveřejňuje adresy URL jako /Counter a /fetchdata , které se mapují na konkrétní trasy aplikace. Vzhledem k tomu, že je tato aplikace implementována jako jediná stránková aplikace, je při každé trase zpracován soubor index.html . Aby se zajistilo, že žádosti o jakoukoliv cestu vrátí index.html záložní trasy , která se nachází v souboru staticwebapp.config. JSON , který se nachází v kořenové složce klientského projektu.

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

Výše uvedená konfigurace zajišťuje, že požadavky na jakoukoli trasu v aplikaci vrátí stránku index.html .

Vytvořte úložiště

v tomto článku se používá úložiště šablon GitHub, které vám usnadní začátek. Šablona obsahuje úvodní aplikaci, která se dá nasadit do statického Web Apps Azure.

  1. ujistěte se, že jste přihlášeni k GitHub a pokud chcete vytvořit nové úložiště, přejděte do následujícího umístění:
  2. Pojmenujte své úložiště My-First-static-blazor-App.

Vytvoření statické webové aplikace

Teď, když je úložiště vytvořené, vytvořte ze Azure Portal statickou webovou aplikaci.

  1. Přejděte na Azure Portal.

  2. Vyberte Vytvořit prostředek.

  3. Vyhledejte statické Web Apps.

  4. Vyberte staické webové aplikace (Static Web Apps).

  5. Vyberte Vytvořit.

  6. Na kartě základy zadejte následující hodnoty.

    Vlastnost Hodnota
    Předplatné Název vašeho předplatného Azure.
    Skupina prostředků Moje blazor-Group
    Název My-First-static-blazor-App
    Typ plánu Free
    Oblast pro Azure Functions rozhraní API a přípravná prostředí Vyberte oblast, která je pro vás nejblíže.
    Zdroj GitHub

  7. vyberte možnost přihlásit se pomocí GitHub a ověřit pomocí GitHub.

  8. zadejte následující hodnoty GitHub.

    Vlastnost Hodnota
    Organizace vyberte požadovanou organizaci GitHub.
    Úložiště Vyberte My-First-static-blazor-App.
    Větev Vyberte Main (Hlavní).

  9. V části Podrobnosti o sestavení vyberte v rozevíracím seznamu přednastavení sestavení možnost Blazor a naplní se následující hodnoty.

    Vlastnost Hodnota Popis
    Umístění aplikace Služba Složka obsahující aplikaci Blazor WebAssembly
    Umístění rozhraní API API Složka obsahující aplikaci Azure Functions
    Umístění výstupu wwwroot Složka ve výstupu sestavení obsahující publikovanou aplikaci WebAssembly Blazor

Zkontrolovat a vytvořit

  1. Kliknutím na tlačítko Revize + vytvořit ověřte správnost podrobností.

  2. výběrem možnosti vytvořit zahájíte vytváření App Servicech statických webových aplikací a zřídíte GitHub akci pro nasazení.

  3. Až se nasazení dokončí, přejděte na prostředek.

  4. Vyberte Přejít k prostředku.

    Tlačítko Go to resource (Přejít k prostředku)

Zobrazit web

Existují dva aspekty nasazení statické aplikace. Při prvním se zřídí základní prostředky Azure, které tvoří vaši aplikaci. Druhým je právě pracovní postup GitHub Actions, který vytvoří a publikuje vaši aplikaci.

Než budete moci přejít na novou statickou webovou aplikaci, sestavení nasazení musí být nejprve dokončeno.

V okně Přehled statického Web Apps se zobrazuje řada odkazů, které vám pomůžou s webovou aplikací pracovat.

Okno s přehledem

  1. kliknutím na banner, který říkáte, klikněte sem, abyste zkontrolovali stav vašich GitHub akcí , které se spustí, do GitHubch akcí spuštěných v úložišti. Jakmile ověříte, že je úloha nasazení dokončená, můžete přejít na web prostřednictvím vygenerované adresy URL.

  2. po dokončení pracovního postupu GitHub akcí můžete vybrat odkaz URL a otevřít web na nové kartě.

Vyčištění prostředků

Pokud nebudete tuto aplikaci nadále používat, můžete instanci statického Web Apps Azure odstranit pomocí následujících kroků:

  1. Otevřete Azure Portal.
  2. V horním panelu hledání vyhledejte My-blazor-Group .
  3. Vyberte název skupiny.
  4. Vyberte tlačítko Odstranit .
  5. Kliknutím na Ano potvrďte akci odstranění.

Další kroky

Ověřování a autorizace