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

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:

Požadavky

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

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	Zdarma
   Oblast pro rozhraní API služby Azure Functions a přípravná prostředí	Vyberte oblast, která je k vám nejblíže.
   Zdroj	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 svého úložiště na GitHubu a otevřete Nastavení > Aplikace > Autorizované aplikace OAuth, vyberte Azure Static Web Apps a potom vyberte Udělte přístup. V případě úložišť organizace musíte být vlastníkem organizace, abyste udělili oprávnění.

9. V části Build Details vyberte Blazor v rozevíracím seznamu Build Presets a následně se vyplní následující hodnoty.

   Vlastnost	Hodnota	Popis
   Umístění aplikace	Klient	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 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.

3. Zobrazit web

Nasazení statické aplikace má dva aspekty. První možnost 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 s textem Kliknutím sem zkontrolujete stav běhů GitHub Actions, aby se zobrazily běhy GitHub Actions spuštěné pro váš repozitář. Jakmile ověříte, že je úloha nasazení dokončená, můžete přejít na web přes vygenerovanou adresu URL.

   

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

   

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. Záložní cesta je implementována, aby bylo zajištěno fungování směrování na straně klienta.
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 Blazor

Náhradní trasa

Aplikace zpřístupňuje adresy URL, jako jsou /counter a /fetchdata, které odpovídají konkrétním trasám aplikace. Vzhledem k tomu, že je tato aplikace implementována jako jednostránková aplikace, pro každou trasu se poskytuje soubor index.html. Aby požadavky na libovolnou cestu vracely index.html, implementuje se v souboru , který se nachází v kořenové složce klientského projektu, staticwebapp.config.json.

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

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

Nasazení ze sady Visual Studio

Jako alternativu k nasazení prostřednictvím GitHub Actions můžete nasadit Azure Static Web Apps přímo z Visual Studio. Vytvořte profil publikování pro Azure Static Web Apps:

1. V uživatelském rozhraní pro publikování sady Visual Studio vyberte cíl>, specifický cíl a >, abyste vytvořili publikovací profil.

2. V konfiguraci profilu publikování zadejte název předplatného. Vyberte existující instanci nebo vyberte Vytvořit novou instanci. Při vytváření nové instance v uživatelském rozhraní Vytvořit statickou webovou aplikaci na webu Azure Portal nastavte Podrobnosti nasazení> na Jiný. Než budete pokračovat, počkejte na dokončení nasazení na webu Azure Portal.

3. V konfiguraci profilu publikování vyberte instanci Azure Static Web Apps ze skupiny prostředků instance. Výběrem Dokončit vytvořte publikovací profil. Pokud visual Studio vyzve k instalaci rozhraní příkazového řádku Static Web Apps (SWA), nainstalujte rozhraní příkazového řádku podle pokynů. Rozhraní příkazového řádku SWA vyžaduje npm/Node.js (dokumentace k sadě Visual Studio).

Po vytvoření profilu publikování nasaďte aplikaci do instance Azure Static Web Apps pomocí profilu publikování výběrem tlačítka Publikovat .

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

Související články

• Nastavení ověřování a autorizace
• Konfigurace nastavení aplikace
• Povolení monitorování
• Azure CLI