Sdílet prostřednictvím

Nasazení aplikace Blazor na Azure Static Web Apps

  • Článek

Azure Static Web Apps publikuje web do produkčního prostředí sestavením aplikací z úložiště GitHub podporovaného bezserverovým back-endem. Následující kurz ukazuje, jak nasadit aplikaci C# Blazor WebAssembly, která zobrazuje data o počasí vrácená bezserverovým rozhraním API.

Požadavky

1. Vytvoření úložiště

Tento článek používá úložiště šablon GitHubu, které vám usnadní zahájení práce. Šablona obsahuje úvodní aplikaci, kterou můžete nasadit do Azure Static Web Apps.

  1. Ujistěte se, že jste přihlášení ke GitHubu, a přejděte do následujícího umístění a vytvořte nové úložiště: https://github.com/staticwebdev/blazor-starter/generate
  2. Pojmenujte úložiště my-first-static-blazor-app.

2. 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 Static Web Apps.

  4. Vyberte StaticKá webová aplikace.

  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ů my-blazor-group
    Název my-first-static-blazor-app
    Typ plánu Free
    Oblast pro rozhraní API Azure Functions a přípravná prostředí Vyberte oblast, která je vám nejblíže.
    Zdroj GitHub

  7. Pokud se zobrazí výzva, vyberte Přihlásit se pomocí GitHubu a ověřit se pomocí GitHubu.

  8. Zadejte následující hodnoty GitHubu.

    Vlastnost Hodnota
    Organizace Vyberte požadovanou organizaci GitHubu.
    Úložiště Vyberte my-first-static-blazor-app.
    Větev Vyberte hlavní.

    Poznámka

    Pokud nevidíte žádná úložiště, možná budete muset autorizovat Azure Static Web Apps na GitHubu. Pak přejděte do úložiště GitHub, přejděte do části Aplikace nastavení >> Autorizované aplikace OAuth, vyberte Azure Static Web Apps a pak vyberte Udělit. U úložišť organizace musíte být vlastníkem organizace, abyste mohli udělit oprávnění.

  9. V části Podrobnosti o sestavení v rozevíracím seznamu Předvolby sestavení vyberte Blazor a vyplní se následující hodnoty.

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

  10. Vyberte Zkontrolovat a vytvořit a ověřte správnost podrobností.

  11. Výběrem možnosti Vytvořit zahájíte vytváření statické webové aplikace a zřídíte GitHub Actions pro nasazení.

  12. Po dokončení nasazení vyberte Přejít k prostředku.

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

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

3. Zobrazení webu

Nasazení statické aplikace má dva aspekty. 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.

Před přechodem na novou statickou webovou aplikaci musí sestavení nasazení nejprve dokončit spuštění.

V okně přehledu Static Web Apps se zobrazí řada odkazů, které vám pomůžou s vaší webovou aplikací pracovat.

  1. Vyberte banner s nápisem Kliknutím sem zkontrolujte stav spuštění GitHub Actions a podívejte se na GitHub Actions spuštěné v úložišti. Jakmile ověříte, že je úloha nasazení dokončená, můžete přejít na svůj web přes vygenerovanou adresu URL.

    Snímek obrazovky s oknem přehledu

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

    Snímek obrazovky s webovou stránkou Static Web Apps Blazor

4. Vysvětlení přehledu aplikací

Následující projekty společně tvoří části potřebné k vytvoření aplikace Blazor WebAssembly běžící v prohlížeči podporovaném back-endem rozhraní Azure Functions API.

Projekt sady Visual Studio Description
Rozhraní api Aplikace Azure Functions jazyka C# implementuje koncový bod rozhraní API, který poskytuje informace o počasí do aplikace Blazor WebAssembly. WeatherForecastFunction vrátí pole WeatherForecast objektů.
Klient Front-endový projekt Blazor WebAssembly. Pro zajištění funkčnosti směrování na straně klienta je implementovaná náhradní trasa .
Shared Obsahuje běžné třídy, na které odkazují projekty api i klienti, které umožňují tok dat z koncového bodu rozhraní API do front-endové webové aplikace. Třída WeatherForecast se sdílí mezi oběma aplikacemi.

Statická webová aplikace Blazor– Dokončete aplikaci Blazor.

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 implementovaná jako jedna stránka, každá trasa se obsluhuje souborem index.html . Aby se zajistilo, že se požadavky na jakoukoli cestu vrátí index.html, bude v staticwebapp.config.json souboru v kořenové složce projektu klienta implementována záložní trasa.

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

Konfigurace JSON zajišťuje, že požadavky na jakoukoli trasu v aplikaci vrátí index.html stránku.

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

Pokud tuto aplikaci nebudete používat, můžete instanci Azure Static Web Apps odstranit následujícím postupem:

  1. Otevřete Azure Portal.
  2. Na horním panelu hledání vyhledejte my-blazor-group .
  3. Vyberte název skupiny.
  4. Vyberte Odstranit.
  5. Výběrem možnosti Ano akci odstranění potvrďte.

Další kroky

Ověřování a autorizace