Úvod

Dokončeno

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. Dáváte přednost řešení, které odebere co nejvíce práce infrastruktury, včetně sestavování a publikování, abyste se mohli soustředit na funkce a uživatelské prostředí.

Webové prostředky můžete nasadit do cloudového úložiště, vytvořit a přiřadit vlastní certifikát SSL, vytvořit rozhraní API na cloudovém serveru, vytvořit reverzní proxy server, který vaší aplikaci umožní volat 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ě.

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 nasadíte 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é hostování webů dává statický obsah, jako je HTML, CSS, JavaScript a obrázky blíže vašim uživatelům.
• Podpora integrovaného rozhraní API poskytovaná službou 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é adresy URL náhledu pro náhled pull requestů.

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 příchutě "prostě 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.
• Prozkoumejte a spusťte aplikaci následujícím způsobem.

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.