Nasazení aplikace Blazor na Azure Static Web Apps
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
- Úč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, které vám usnadní zahájení práce. Šablona obsahuje úvodní aplikaci, kterou můžete nasadit do Azure Static Web Apps.
- 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
- 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.
Přejděte na Azure Portal.
Vyberte Vytvořit prostředek.
Vyhledejte Static Web Apps.
Vyberte StaticKá webová aplikace.
Vyberte Vytvořit.
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 Pokud se zobrazí výzva, vyberte Přihlásit se pomocí GitHubu a ověřit se pomocí GitHubu.
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í.
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 Vyberte Zkontrolovat a vytvořit a ověřte správnost podrobností.
Výběrem možnosti Vytvořit zahájíte vytváření statické webové aplikace a zřídíte GitHub Actions pro nasazení.
Po dokončení nasazení vyberte Přejít k prostředku.
Vyberte 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.
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.
Po dokončení GitHub Actions pracovního postupu můžete vybrat odkaz URL a otevřít web na nové kartě.
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
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:
- Otevřete Azure Portal.
- Na horním panelu hledání vyhledejte my-blazor-group .
- Vyberte název skupiny.
- Vyberte Odstranit.
- Výběrem možnosti Ano akci odstranění potvrďte.
Další kroky
Související články
Váš názor
https://aka.ms/ContentUserFeedback.
Připravujeme: V průběhu roku 2024 budeme postupně vyřazovat problémy z GitHub coby mechanismus zpětné vazby pro obsah a nahrazovat ho novým systémem zpětné vazby. Další informace naleznete v tématu:Odeslat a zobrazit názory pro