Úvod

Dokončeno

Vaše společnost spouští webovou aplikaci nákupního seznamu. Prostřednictvím webu můžou zákazníci přidávat, upravovat, zobrazovat a odebírat položky ze svého seznamu.

Při vytváření aplikace jsou vaše první obavy z toho, že jsou vaše aplikace a rozhraní API hostované bezpečně, jsou globálně dostupné a publikované automaticky. Místo vytvoření webového serveru, který bude zpracovávat všechny tyto obavy, se rozhodnete použít hostitelské řešení, které bude sloužit vašim prostředkům a rozhraní API bez velkého nastavení nebo konfigurace.

Co je Azure Static Web Apps?

Azure Static Web Apps řeší těžké problémy od zdrojového kódu až 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 architektur, jako jsou Angular, React, Svelte nebo Vue. Mezi tyto aplikace patří HTML, CSS, JavaScript a obrázkové soubory, které tvoří aplikaci. V tradiční architektuře webového serveru se tyto soubory obsluhují z jednoho serveru společně se všemi požadovanými koncovými body rozhraní API.

Se službou Azure Static Web Apps jsou statické prostředky oddělené od tradičního webového serveru a místo toho se obsluhují z bodů globálně distribuovaných po celém světě. Tato distribuce umožňuje rychlejší obsluhu souborů, protože soubory jsou fyzicky blíže koncovým uživatelům. Koncové body rozhraní API, které jsou volitelné, jsou hostované pomocí bezserverové architektury, což brání nutnosti kompletního back-endového serveru.

Model pro Azure Static Web Apps spočívá v tom, že získáte přesně to, co potřebujete, a ne 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. Pracovní postup monitoruje vámi vybranou větev. Když odešlete potvrzení nebo vytvoříte žádosti o přijetí změn do monitorované větve, pracovní postup automaticky sestaví a nasadí vaši aplikaci a její rozhraní API do Azure.

Azure hostuje a obsluhuje vaši webovou aplikaci. Azure Functions pohání funkcionalitu back-endového API, které poskytuje automatické horizontální škálování ven a dovnitř na základě poptávky.

Volitelná rozhraní API

Azure Static Web Apps je ideální pro obsluhu čistě statického obsahu, ale má také skvělou podporu statických webových aplikací, které potřebují rozhraní API za nimi. Statickou webovou aplikaci můžete hostovat pomocí nebo bez rozhraní API.

Azure hostuje a obsluhuje vaši webovou aplikaci, zatímco Azure Functions využívá funkce back-endového rozhraní API, které poskytuje automatické horizontální navýšení kapacity a škálování na základě poptávky na rozhraní API.

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í změny integrace GitHubu a Azure DevOps v úložišti aktivují sestavení a nasazení.
• Bezplatné certifikáty SSL, které se automaticky obnovují.
• Jedinečné adresy URL náhledu pro náhled pull requestů.

Studijní cíle

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

Volba vlastní cesty

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ě fungují.

Počáteční kód obsahuje čtyři aplikace a výchozí bod pro rozhraní API, které použijete později.

├ angular-app  👈 The Angular client app
├ api-starter  👈 The API starter app. You use this later.
├ react-app    👈 The React client app
├ svelte-app   👈 The Svelte client app
└ vue-app      👈 The Vue client app

Co budete dělat

Jakmile zvolíte klientskou aplikaci, budete:

1. Automaticky sestavte a nasaďte webovou aplikaci do Azure z úložiště GitHub pomocí GitHub Actions.
2. Vytvořte své rozhraní API pomocí Azure Functions.
3. Upravte webovou aplikaci tak, aby vysílala požadavky HTTP na vaše rozhraní API.
4. Automaticky sestavte a nasaďte webovou aplikaci do Azure z úložiště GitHub pomocí GitHub Actions.
5. Nakonec prozkoumáte a spustíte aplikaci, jak je znázorněno na následujícím obrázku.

Další kroky

Právě teď si možná myslíte, že potřebujete nejprve vytvořit prostředky Azure, ale azure Static Web Apps má na paměti váš každodenní pracovní postup. Přirozenějším přístupem je nejprve začít kódem na GitHubu před vytvořením prostředků v Azure.