Naplánování statické webové aplikace Azure

• 5 min

Vaším konečným cílem je hostování vytvořené aplikace v Azure. Azure Static Web Apps se postará o zřízení 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 potvrzení změn nebo žádostí o přijetí změn 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. Aktivuje se také vždy, 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. 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.

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:

Poloha	Příklad umístění	Popis	Povinní účastníci
Umístění aplikace	/	Umístění zdrojového kódu vaší webové aplikace	Ano
Výstupní umístění sestavení aplikace	dist	Umístění výstupu sestavení vaší aplikace vzhledem k umístění aplikace	No
Umístění rozhraní API	api	Umístění zdrojového kódu vašeho rozhraní API	No

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á své sestavené prostředky odesílá jako výstup do 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. Rozhraní API se automaticky nasadí a bude hostované 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? Nebojte. Pokud služba Azure Static Web Apps nenajde rozhraní API ve složce, kterou uvedete, pak se aplikace publikuje i bez rozhraní.

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í ve output_location výchozím nastavení. Pokud váš proces sestavení zkopíruje soubor staticwebapp.config.json do output_locationsouboru , nemusíte dělat nic jiného. U většiny projektů output_location je relativní vzhledem k app_location.

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.

Prověřte si své znalosti

1.

Jakou část souboru staticwebapp.config.json byste umístili náhradní trasu?

routes

responseOverrides

navigationFallback

Před kontrolou vaší práce musíte odpovědět na všechny dotazy.