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ý web Static Web Apps (s přidruženým GitHub Actions), který vám poskytne kontrolu nad tím, jak se aplikace sestaví a publikuje.

V tomto kurzu se naučíte:

• Vytvořte aplikaci Gatsby
• Nastavení webu Azure Static Web Apps
• Nasazení aplikace Gatsby do Azure

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

Požadavky

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

Vytvoření aplikace v Gatsby

Vytvoření aplikace 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řechod na nově vytvořenou aplikaci

   cd static-web-app
   

4. Inicializace úložiště Git

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

Poznámka

Pokud používáte nejnovější verzi Gatsby, možná budete muset upravit soubor package.json tak, aby obsahoval "engines": { "node": ">=18.0.0" },

Odeslání aplikace na GitHub

K vytvoření nového prostředku Azure Static Web Apps potřebujete úložiště na GitHubu.

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

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

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

3. Nasdílejte 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ého webu a nasadit ji do produkčního prostředí.

Vytvoření aplikace

1. Přejděte na web Azure Portal.

2. Vyberte Vytvořit prostředek.

3. Vyhledejte Static Web Apps.

4. Vyberte Static 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ů	my-gatsby-group
   Název	my-gatsby-app
   Typ plánu	Free
   Oblast pro rozhraní API Azure Functions a přípravná prostředí	Vyberte oblast, která je k vám nejblíže.
   Zdroj	GitHub

7. Vyberte 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 hlavní.

9. V části Podrobnosti o sestavení vyberte Gatsby z rozevíracího seznamu Předvolby sestavení a ponechte výchozí hodnoty.

Zkontrolovat a vytvořit

1. Vyberte Zkontrolovat a vytvořit a ověřte správnost podrobností.

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

3. Po dokončení nasazení vyberte Přejít k prostředku.

4. Na obrazovce prostředku vyberte odkaz URL a otevřete nasazenou aplikaci. Možná budete muset minutu nebo dvě počkat, než se GitHub Actions dokončí.

   

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

Pokud nechcete tuto aplikaci dál používat, můžete prostředek azure Static Web App odstranit pomocí následujících kroků:

1. Otevřete Azure Portal.
2. Na horním panelu hledání vyhledejte 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 odstranění.

Další kroky

Přidání vlastní domény