Naplánujte Azure statickou webovou aplikaci
- 5 min
Vaším konečným cílem je hostování vytvořené aplikace v Azure. Azure Static Web Apps se postará o zajištění všech potřebných prostředků Azure za vás.
Než ale budete moct aplikaci hostovat, potřebujete něco, co ji znovu sestaví, když v ní uděláte nějaké změny. Úpravy lze provádět prostřednictvím commitů nebo pull requestů do vašeho úložiště. Klíčovou funkcí služby Azure Static Web Apps je, že nastaví pracovní postup GitHub Actions pro sestavování a publikování aplikace.
Prostředek Azure Static Web Apps, který si vytvoříte, tedy nastaví pracovní postup GitHub Actions. Tento pracovní postup se okamžitě aktivuje a postará se o sestavení a publikování vaší aplikace. Pracovní postup se také aktivuje pokaždé, když provedete změnu ve sledované větvi ve vašem úložišti.
Azure Static Web Apps
Nasazení webové aplikace zahrnuje dva automatizovanými procesy. Prvním krokem je zprovoznění základních prostředků Azure, které tvoří vaši aplikaci. Druhým je právě pracovní postup GitHub Actions, který vytvoří a publikuje vaši aplikaci.
Publikováním aplikace na web pomocí Azure Static Web Apps získáváte rychlé hostování webové aplikace a škálovatelná rozhraní API. Dále získáváte sjednocený pracovní postup sestavení a nasazení na bázi GitHub Actions.
Připojení instance Static Web Apps ke GitHubu
Účelem Azure Static Web Apps je zajistit hostování aplikací, jejichž zdrojový kód se nachází na GitHubu. Při vytváření instance Static Web Apps se přihlásíte ke GitHubu a určíte úložiště obsahující kód vaší aplikace.
Je také potřeba zadat cesty ke třem složkám v úložišti, aby bylo možné aplikaci automaticky sestavit a nasadit:
| Umístění | Příklad umístění | Popis | Povinné |
|---|---|---|---|
| Umístění aplikace | / | Umístění zdrojového kódu vaší webové aplikace | Ano |
| Výstupní umístění sestavení aplikace | složka pro distribuci | Umístění výstupu sestavení vaší aplikace vzhledem k umístění aplikace | Ne |
| Umístění rozhraní API | API | Umístění zdrojového kódu vašeho rozhraní API | Ne |
Výstup sestavení aplikace je relativní cesta k výstupnímu adresáři sestavení vaší aplikace. Předpokládejme například, že máme aplikaci v my-app, která ukládá své sestavené prostředky do složky my-app/dist. V tomto případě byste jako toto umístění zadali dist.
Od zdrojového kódu ke statickým prostředkům pomocí GitHub Actions
Vaše úložiště GitHub obsahuje zdrojový kód, který je potřeba před publikováním sestavit.
Když si vytvoříte instanci Static Web Apps, Azure ve vašem úložišti vytvoří pracovní postup GitHub Actions. Pracovní postup sestaví vaši aplikaci pokaždé, když nasdílíte změny nebo vytvoříte žádost o přijetí změn ve větvi, kterou jste zvolili ke sledování. Tento proces sestavení změní zdrojový kód na statické prostředky, které obsluhuje Azure. Po dokončení sestavení pak tato akce prostředky nasadí.
Akce GitHubu se přidá do složky .github/workflows ve vašem úložišti. Tento soubor si můžete podle potřeby zkontrolovat nebo upravit. Nastavení, které zadáte při vytváření prostředku, se ukládá do souboru akce GitHubu.
Integrované rozhraní API na bázi Azure Functions
Pokud vaše aplikace vyžaduje rozhraní API, můžete ho ve svém úložišti implementovat jako projet Azure Functions. Vaše rozhraní API se automaticky nasadí a bude hostováno vaší instancí Static Web Apps. Pracovní postup GitHub Actions, který sestavuje a nasazuje vaši aplikaci, vyhledá rozhraní API ve vašem úložišti podle názvu složky, který zadáte.
Typickým umístěním rozhraní API je složka s názvem api nebo functions, ale můžete ji pojmenovat, jak chcete.
Co když rozhraní API nemáte? Buďte bez obav. Pokud služba Azure Static Web Apps nenajde rozhraní API ve složce, kterou uvedete, publikace tohoto rozhraní API neproběhne, ale vaše aplikace se přesto publikuje.
Zpracování náhradních tras
Chybu 404 při aktualizaci stránky vidíte proto, že prohlížeč na hostující platformu odesílá žádost o zobrazení stránky /products. Na serveru ale není žádná stránka s názvem products, kterou by bylo možné zobrazit. Naštěstí se to dá snadno vyřešit vytvořením náhradní trasy. Náhradní trasa bude všechny nepřiřazené žádosti o zobrazení stránek přiřazovat k serveru.
Azure Static Web Apps podporuje vlastní pravidla směrování definovaná v volitelném souboru staticwebapp.config.json umístěném ve výstupní složce sestavení aplikace.
Aplikaci můžete nakonfigurovat tak, aby používala pravidla, která implementují náhradní trasu, jak je znázorněno v následujícím příkladu, který používá zástupný znak cesty s filtrem souborů:
{
"navigationFallback": {
"rewrite": "index.html",
"exclude": ["/images/*.{png,jpg,gif,ico}", "/*.{css,scss,js}"]
}
}
Toto pravidlo říká službě Azure Static Web Apps, aby sloužila index.html , když se nenajde požadavek na prostředek, s výjimkou obrázků a souborů CSS zobrazených ve výrazu exclude .
Umístění souboru tras
Služba Azure Static Web Apps očekává, že váš soubor staticwebapp.config.json bude ve výchozím nastavení.output_location Pokud váš proces sestavení zkopíruje soubor staticwebapp.config.json do souboru output_location, není potřeba nic jiného udělat. U většiny projektů output_location je relativní vzhledem k app_location.
Soubor staticwebapp.config.json pro vaši aplikaci se nachází ve složce angular-app/src/assets.
Soubor staticwebapp.config.json se nachází ve složce react-app.
Soubor staticwebapp.config.json se nachází ve složce svelte-app/public.
Soubor staticwebapp.config.json se nachází ve složce vue-app/public.
Další kroky
Co tedy potřebujete, abyste mohli webovou aplikaci publikovat do Azure Static Web Apps? Vše, co potřebujete, je mít danou aplikaci ve svém úložišti GitHub.