Nasazení 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 dává 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 před tím, 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.
• Instalace Gitu. Pokud ho nemáte, můžete nainstalovat Git.
• Nainstalovaný jazyk Node.js.

Vytvoření aplikace Gatsby

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

1. Otevření terminálu

2. Pomocí nástroje npx vytvořte novou aplikaci pomocí rozhraní příkazového řádku Gatsby. Tento proces může 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 package.json tak, aby obsahovala "engines": { "node": ">=18.0.0" },

Nasdílení aplikace do GitHubu

Abyste mohli vytvořit nový prostředek Azure Static Web Apps, musíte mít ú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é úložiště do místního úložiště. Nezapomeňte přidat uživatelské jméno GitHubu místo zástupného symbolu <YOUR_USER_NAME> v následujícím příkazu.

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

3. Nasdílejte 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 statickou aplikaci 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. Výběr statických webových aplikací

5. Vyberte příkaz 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	Zadejte možnost pro bezplatnou SKU.
   Oblast pro rozhraní API služby Azure Functions a přípravná prostředí	Vyberte oblast, která je k vám nejblíže.
   Source	GitHub

7. Vyberte Přihlásit se pomocí GitHubu a ověřit se 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í.

   Poznámka:

   Pokud nevidíte žádná úložiště, možná budete muset autorizovat Azure Static Web Apps na GitHubu. Přejděte do úložiště GitHub a přejděte do části Aplikace Nastavení > Autorizované aplikace > OAuth, vyberte Azure Static Web Apps a pak vyberte Udělit. V případě úložišť organizace musíte být vlastníkem organizace, abyste udělili oprávnění.

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

Zkontrolovat a vytvořit

1. Výběrem možnosti Zkontrolovat a vytvořit ověřte správnost podrobností.

2. Výběrem možnosti Vytvořit spustíte vytvoření statické webové aplikace služby App Service a zřídíte GitHub Actions pro nasazení.

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

4. Na obrazovce prostředku vyberte odkaz na adresu URL a otevřete nasazenou aplikaci. Možná budete muset chvíli počkat, než se GitHub Actions dokončí.

   

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

Pokud nebudete 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 tlačítko Ano potvrďte akci odstranění.

Další kroky

Přidání vlastní domény