Kurz: Publikování webu Gatsby do Azure Static Web Apps

Tento článek ukazuje, jak vytvořit a nasadit webovou aplikaci Gatsby do Azure Static Web Apps. Konečným výsledkem je nový Static Web Apps webu (s přidruženým GitHub Actions), který vám dává kontrolu nad tím, jak se aplikace sesestaví a publikuje.

V tomto kurzu se naučíte:

Pokud ještě nemáte předplatné Azure,vytvořte si bezplatný účet před tím, než začnete.

Požadavky

• Účet Azure s aktivním předplatným. Pokud účet nemáte, můžete si zdarma vytvořit účet.
• Účet GitHub. Pokud účet nemáte, můžete si zdarma vytvořit účet.
• Node.js nainstalovaná.

Vytvoření aplikace Gatsby

Vytvořte aplikaci Gatsby pomocí rozhraní příkazového řádku (CLI) Gatsby:

1. Otevření terminálu

2. Pomocí nástroje npx vytvořte novou aplikaci pomocí rozhraní příkazového řádku Gatsby. Může to trvat několik minut.

   npx gatsby new static-web-app
   

3. Přejděte k nově vytvořené aplikaci.

   cd static-web-app
   

4. Inicializace úložiště Git

   git init
   git add -A
   git commit -m "initial commit"
   

Nas nabízené oznámení aplikace do GitHubu

Pokud chcete vytvořit nový prostředek úložiště, musíte mít Azure Static Web Apps GitHubu.

1. Vytvořte prázdné úložiště GitHubu (nevytvářejte soubor README) z https://github.com/new pojmenovaných gatsby-static-web-app.

2. Potom do svého místního úložiště přidejte úložiště GitHub, které jste právě vytvořili, jako vzdálené. Nezapomeňte přidat své uživatelské jméno GitHubu místo <YOUR_USER_NAME> zástupného znaku v následujícím příkazu.

   git remote add origin https://github.com/<YOUR_USER_NAME>/gatsby-static-web-app
   

3. Vložte své místní úložiště do GitHubu.

   git push --set-upstream origin main
   

Nasazení webové aplikace

Následující kroky ukazují, jak vytvořit novou aplikaci statické lokality a jak ji nasadit do produkčního prostředí.

Vytvoření aplikace

1. Přejděte na Azure Portal.

2. Vyberte vytvořit prostředek .

3. Vyhledejte Static Web Apps.

4. Vybrat statickou Web Apps

5. Vyberte Vytvořit.

6. Na kartě základy zadejte následující hodnoty.

   Vlastnost	Hodnota
   Předplatné	Název vašeho předplatného Azure.
   Skupina prostředků	Moje Gatsby-Group
   Název	My-Gatsby-App
   Typ plánu	Free
   Oblast pro Azure Functions rozhraní API a přípravná prostředí	Vyberte oblast, která je pro vás nejblíže.
   Zdroj	GitHub

7. Vyberte možnost Přihlásit se pomocí GitHubu a ověřit pomocí GitHubu.

8. Zadejte následující hodnoty GitHubu.

   Vlastnost	Hodnota
   Organizace	Vyberte požadovanou organizaci GitHubu.
   Úložiště	Vyberte Gatsby-static-Web-App.
   Větev	Vyberte Main (Hlavní).

9. V části Podrobnosti o sestavení vyberte v rozevíracím seznamu přednastavení sestavení možnost Gatsby a ponechejte výchozí hodnoty.

Zkontrolovat a vytvořit

1. Kliknutím na tlačítko Revize + vytvořit ověřte správnost podrobností.

2. Výběrem možnosti Vytvořit spusťte vytváření App Service Static Web App a zřízení akce GitHubu pro nasazení.

3. Po dokončení nasazení klikněte na Přejít k prostředku.

4. Na obrazovce prostředku kliknutím na odkaz URL otevřete nasazenou aplikaci. Možná budete muset minutu nebo dvě počkat, než se akce GitHubu dokončí.

   

Vyčištění prostředků

Pokud nebudete tuto aplikaci nadále používat, můžete prostředek služby Azure static Web App odstranit pomocí následujících kroků:

1. Otevřete Azure Portal.
2. V horním panelu vyhledávání vyhledejte vaši aplikaci podle názvu, který jste zadali dříve.
3. Klikněte na aplikaci.
4. Klikněte na tlačítko Odstranit .
5. Kliknutím na Ano potvrďte akci odstranit.

Další kroky