Úvod
Vaše společnost spouští webovou aplikaci pro nákupní seznam. Prostřednictvím tohoto webu budou moct zákazníci přidávat, upravovat, zobrazovat a odebírat položky na svých seznamech.
Při sestavování aplikace vás zajímá především několik důležitých aspektů: jde vám o to, aby vaše aplikace a rozhraní API byly bezpečně hostované, aby byly globálně dostupné a aby se publikovaly automaticky. Místo sestavení webového serveru, který by všechny tyto body obstaral, se rozhodnete pro hostingové řešení, které vaše prostředky a rozhraní API snadno obslouží, aniž by to vyžadovalo spoustu nastavování nebo konfigurování.
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, které jsou volitelné, se hostují pomocí bezserverové architektury, která zcela zabraňuje potřebě 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 – už žádné další, 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. 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.
Azure hostuje a obsluhuje vaši webovou aplikaci a služba Azure Functions zajišťuje back-endové funkce rozhraní API, které poskytují automatické horizontální škálování podle objemu požadavků 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í 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 zobrazení náhledu žádostí o přijetí změn
- Integrované ověřování s více poskytovateli
Cíle výuky
V tomto modulu vytvoříte, upravíte a nasadíte webovou aplikaci a rozhraní API s ověřováním uživatelů 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 zahrnuje čtyři aplikace a výchozí bod pro rozhraní API, které budete používat.
├ angular-app 👈 The Angular client app
├ api 👈 The API server 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:
- Automaticky sestavte a nasaďte webovou aplikaci a rozhraní API do Azure z úložiště GitHub pomocí GitHub Actions.
- Upravte webovou aplikaci tak, aby přidávala tlačítka pro přihlášení a odhlášení a zobrazovala informace o aktuálním přihlášeném uživateli.
- Upravte webovou aplikaci a rozhraní API tak, aby blokovaly neověřené uživatele a povolovaly pouze konkrétní zprostředkovatele ověřování.
- Nakonec prozkoumáte a spustíte aplikaci, jak vidíte níže.
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 postupem je začít kódem na GitHubu a až pak vytvořit prostředky v Azure.