Cvičení – vytvoření statické webové aplikace Azure

Dokončeno

V tomto cvičení vytvoříte instanci Azure Static Web Apps, včetně akce GitHubu, která automaticky sestaví a publikuje vaši aplikaci.

Vytvořte statickou webovou aplikaci

Teď, když jste vytvořili úložiště GitHub, můžete vytvořit instanci Static Web Apps z webu Azure Portal.

Tento modul používá sandbox Azure k poskytnutí bezplatného dočasného předplatného Azure, které můžete použít k dokončení cvičení. Než budete pokračovat, ujistěte se, že jste aktivovali sandbox v horní části této stránky.

1. Pomocí stejného účtu, kterým jste aktivovali sandbox, se přihlaste na Azure Portal.

2. Na domovské stránce Azure v části Služby Azure vyberte Vytvořit prostředek. Zobrazí se podokno Vytvořit prostředek .

3. Ve vyhledávacím poli marketplace vyhledejte a vyberte Static Web App. Zobrazí se podokno Statické webové aplikace .

4. Vyberte Vytvořit. Zobrazí se podokno Vytvořit statickou webovou aplikaci . Nakonfigurujte novou aplikaci a propojte ji s úložištěm GitHubu.

5. Na kartě Základy zadejte pro každé nastavení následující hodnoty.

   Nastavení	Hodnota
   Podrobnosti projektu
   Předplatné	Předplatné Concierge
   Skupina prostředků	[název sandboxové skupiny prostředků]
   Podrobnosti statické webové aplikace
   Název	Pojmenujte svou aplikaci. Platné znaky jsou a-z (bez rozlišování malých a velkých písmen), 0-9 a -.
   Plán hostování
   Cenová úroveň pro vaši aplikaci	Vybrat zdarma
   Podrobnosti o službě Azure Functions a přípravném prostředí
   Oblast pro rozhraní API služby Azure Functions a přípravná prostředí	Vyberte oblast, která je k vám nejblíže
   Podrobnosti o nasazení
   Zdroj	Výběr GitHubu
   Účet GitHub	Vyberte Přihlásit se pomocí GitHubu. Zobrazí se podokno Autorizovat azure Static Web Apps . Vyberte Autorizovat Azure-App-Service-Static-Web-Apps. Zadejte své heslo.
   Organizace	Vyberte organizaci, v níž jste úložiště vytvořili.
   Repository	my-static-blazor-app
   Pobočka	main
   Podrobnosti sestavení
   Přednastavení sestavení	Blazor
   Umístění aplikace	Klient
   Umístění rozhraní API	API
   Umístění výstupu	wwwroot

6. Vyberte Zkontrolovat a vytvořit>Vytvořit.

7. Po dokončení nasazení vyberte Přejít k prostředku. Zobrazí se podokno Statické webové aplikace.

Kontrola akce GitHubu

V této fázi se v Azure vytvoří vaše instance Static Web Apps, ale vaše aplikace ještě není nasazená. Akce GitHubu, kterou Azure vytvoří ve vašem úložišti, se spustí automaticky, aby aktivovala první sestavení a nasazení vaší aplikace, ale dokončení trvá několik minut.

Stav akce sestavení a nasazení můžete zkontrolovat tak, že vyberete následující odkaz a přejdete na stránku Akce vašeho úložiště GitHub:

Jakmile tam budete:

1. Vyberte možnostAzure Static Web Apps CI/CD.

2. Vyberte potvrzení s názvem CI: Add Azure Static Web Apps workflow file.

3. Výběr odkazu sestavení a nasazení úlohy

Z tohoto místa můžete sledovat průběh sestavování vaší aplikace.

Zobrazení webu

Jakmile vaše akce GitHubu dokončí sestavování a publikování vaší webové aplikace, můžete k ní přejít a podívat se na ni za běhu.

Aplikaci můžete navštívit v prohlížeči výběrem odkazu URL na webu Azure Portal.

Vaše aplikace je teď globálně dostupná, ale stále říká Načítání dat , protože ještě nejsou žádná data nebo rozhraní API. Rozhraní API pro webovou aplikaci přidáte v další části.

Gratulujeme! Nasadili jste svou první aplikaci do Azure Static Web Apps!

Poznámka:

Nemusíte mít obavy, pokud se zobrazí webová stránka se zprávou, že aplikace ještě není sestavená a nasazená. Zkuste prohlížeč aktualizovat za nějakou tu minutu. Akce GitHubu se při vytváření statické webové aplikace v rámci Azure Static Web Apps spustí automaticky. Takže pokud se zobrazí jen úvodní stránka, aplikace se teprve nasazuje.

Další kroky

Ve vaší aplikaci chybí rozhraní API pro nákupní seznam. Dále prozkoumáte, jak do aplikace přidat rozhraní API služby Azure Functions, které se publikuje do Azure spolu se statickými prostředky.