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

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čí.

    Nasazená aplikace

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