Úvod

4 min

Scénář

Vaše společnost spouští webovou aplikaci pro nákupní seznam. Zákazníci můžou prostřednictvím webu v seznamu přidávat, upravovat, zobrazovat a odebírat položky, jako je jídlo nebo domácí spotřební zboží.

Web a rozhraní API je nutné zabezpečit, aby byla zaručena ochrana osobních údajů zákazníků. Vaši uživatelé se budou nacházet na různých místech celého světa a vy budete pro všechny chtít zajistit skvělý výkon. Dali byste přednost řešení, které eliminuje co možná nejvíce práce na infrastruktuře, včetně jejího vytvoření a publikování, abyste se mohli soustředit na funkce a uživatelské prostředí.

Mohli byste však také nasadit webové prostředky do cloudového úložiště, vytvořit a přiřadit vlastní certifikát SSL, vytvořit rozhraní API na cloudovém serveru, určit reverzní proxy umožňující volání aplikace do rozhraní API, distribuovat aplikaci globálně a nastavit vlastní proces CI/CD.

Když použijte službu Azure Static Web Apps, provede výše uvedené kroky za vás.

Co je služba Azure Static Web Apps?

Služba Azure Static Web Apps řeší všechny náročné problémy – od zdrojového kódu po globální dostupnost.

Zatímco se budete soustředit na vývoj aplikace, Azure Static Web Apps ji automaticky sestaví a hostuje z GitHubu nebo Azure DevOps.

Statické webové aplikace se běžně vytvářejí pomocí knihoven a platforem, jako jsou Angular, React, Svelte nebo Vue. Tyto aplikace zahrnují prostředky HTML, CSS, JavaScript a grafické materiály. Při použití tradiční architektury webového serveru se tyto soubory poskytují z jednoho serveru společně se všemi požadovanými koncovými body rozhraní API.

V případě Azure Static Web Apps jsou statické prostředky oddělené od tradičního webového serveru a poskytují se z bodů globálně distribuovaných po celém světě. Tato distribuce zajišťuje mnohem rychlejší poskytování souborů, protože soubory jsou fyzicky blíže k uživatelům. Koncové body rozhraní API jsou volitelné a jejich hostování probíhá s využitím bezserverové architektury, takže vůbec není zapotřebí kompletní back-endový server.

Model Azure Static Web Apps spočívá v tom, že dostanete přesně to, co potřebujete – ani více, ani méně.

Screenshot showing the Static Apps overview.

Když vytvoříte prostředek Azure Static Web Apps, Azure nastaví v úložišti zdrojového kódu aplikace pracovní postup GitHub Actions nebo Azure DevOps. Ten bude monitorovat vámi vybranou větev. Pokaždé, když odešlete potvrzení nebo vytvoříte žádosti o přijetí změn do sledované větve, pracovní postup automaticky sestaví a nasadí vaši aplikaci a její rozhraní API do Azure.

Azure hostuje a poskytuje vaši webovou aplikaci. Služba Azure Functions zajišťuje back-endové funkce rozhraní API, které poskytují automatické horizontální navyšování a snižování kapacity podle objemu požadavků.

Volitelná rozhraní API

Služba Azure Static Web Apps se ideálně hodí k poskytování čistě statického obsahu, ale nabízí také vynikající podporu statických webových aplikací, které potřebují rozhraní API. Můžete tedy hostovat statickou webovou aplikaci s rozhraním API nebo bez něj.

Ve cvičeních tohoto modulu nasadíte aplikaci pomocí upřednostňované webové architektury.

Poznámka:

V tomto modulu budete nasazovat aplikaci bez rozhraní API. Informace o dalším modulu, kde společně s aplikací nasadíte rozhraní API, najdete v části Další kroky v poslední lekci.

Klíčové funkce

Globálně distribuovaný webový hosting přináší statický obsah, jako jsou HTML, CSS, JavaScript a grafika, blíže k vašim uživatelům.
Integrovaná podpora rozhraní API prostřednictvím Azure Functions
Prvotřídní integrace GitHubu a Azure DevOps, kde změny úložiště aktivují sestavení a nasazení.
Bezplatné certifikáty SSL, které se automaticky obnovují
Jedinečné náhledové adresy URL pro předběžné zobrazení žádostí o přijetí změn

Cíle výuky

V tomto modulu vytvoříte, upravíte a nasadíte webovou aplikaci do Azure Static Web Apps.

Zvolte si vlastní cestu

Tento modul nabízí čtyři varianty ukázkové aplikace, ze které si můžete vybrat: Angular, React, Svelte a Vue. Síla Azure Static Web Apps spočívá v tom, že všechny tyto varianty „jednoduše fungují“.

Počáteční kód obsahuje čtyři aplikace, se kterými budete pracovat.

├ angular-app  👈 The Angular client app
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app

Co budete dělat

Po výběru klientské aplikace:

Sestavíte a spustíte front-endovou aplikaci.
Automaticky sestavíte a nasadíte webovou aplikaci do Azure z úložiště GitHub pomocí GitHub Actions.
Nakonec prozkoumáte a spustíte aplikaci, jak vidíte níže.

A screenshot illustrating the angular sample application.

A screenshot illustrating the react sample application.

A screenshot illustrating the svelte sample application.

A screenshot illustrating the Vue sample application.

Další kroky

Možná teď přemýšlíte, že nejprve musíte vytvořit prostředky Azure, ale služba Azure Static Web Apps má už váš obvyklý postup „v hlavě“. Přirozenějším postupem je začít kódem na GitHubu a až pak vytvořit prostředky v Azure.

Pokračovat