Sdílet prostřednictvím

Nasazení aplikace Blazor ve službě Azure Static Web Apps

  • Článek

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

Poznámka:

Postup nasazení aplikace Blazor prostřednictvím sady Visual Studio najdete v tématu Nasazení aplikace Blazor ve službě Azure Static Web Apps.

Požadavky

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

Tento článek používá úložiště šablon GitHubu, abyste mohli snadno začít. Šablona obsahuje úvodní aplikaci, kterou můžete nasadit do Azure Static Web Apps.

  1. Ujistěte se, že jste přihlášení k 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 své úložiště my-first-static-blazor-app.

2. Vytvoření statické webové aplikace

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

  1. Přejděte na Azure Portal.

  2. Vyberte Vytvořit prostředek.

  3. Vyhledejte statické webové aplikace.

  4. Vyberte statickou webovou aplikaci.

  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 Zadejte možnost pro bezplatnou SKU.
    Oblast pro rozhraní API služby Azure Functions a přípravná prostředí Vyberte oblast, která je k vám nejblíže.
    Source GitHub

  7. Pokud se zobrazí výzva, vyberte Přihlásit se pomocí GitHubu a ověřte 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 a přejděte do části Aplikace Nastavení > Autorizované aplikace > OAuth, vyberte Azure Static Web Apps a pak vyberte Udělit. V případě úložišť organizace musíte být vlastníkem organizace, abyste udělili oprávnění.

  9. V části Podrobnosti sestavení vyberte Blazor z rozevíracího seznamu Přednastavení sestavení 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. Výběrem možnosti Zkontrolovat a vytvořit ověřte správnost podrobností.

  11. Výběrem možnosti Vytvořit spustíte vytvoř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. Zobrazit web

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.

Než budete moct přejít do nové statické webové aplikace, musí se sestavení nasazení nejprve dokončit.

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

  1. Vyberte banner, který říká, kliknutím sem zkontrolujte stav spuštění GitHub Actions a zobrazí se akce GitHubu spuštěné v úložišti. Jakmile ověříte, že je úloha nasazení dokončená, můžete přejít na web přes vygenerovanou adresu URL.

    Snímek obrazovky s oknem přehledu

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

    Snímek obrazovky webové stránky Static Web Apps Blazor

4. Vysvětlení přehledu aplikace

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

Projekt sady Visual Studio Popis
API Aplikace Azure Functions v jazyce 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. Náhradní trasa se implementuje, aby bylo zajištěno, že směrování na straně klienta je funkční.
Shared Obsahuje běžné třídy odkazované na projekty api i klienta, 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 BlazorDokončete aplikaci Blazor.

Náhradní trasa

Aplikace zveřejňuje adresy URL jako /counter a /fetchdatakteré se mapují na konkrétní trasy aplikace. Vzhledem k tomu, že je tato aplikace implementována jako jedna stránka, každá trasa se obsluhuje soubor index.html . Aby se zajistilo, že se požadavky na vrácení cesty index.html implementují do souboru nalezeného v staticwebapp.config.json kořenové složce klientského projektu.

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

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

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

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

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

Další kroky

Ověřování a autorizace