Distribuera en Gatsby-webbplats till Azure Static Web Apps

  • Artikel

Den här artikeln visar hur du skapar och distribuerar en Gatsby-webbapp till Azure Static Web Apps. Slutresultatet är en ny Static Web Apps-webbplats (med tillhörande GitHub Actions) som ger dig kontroll över hur appen skapas och publiceras.

I den här självstudien lär du dig att:

  • Skapa en Gatsby-app
  • Konfigurera en Azure Static Web Apps-webbplats
  • Distribuera Gatsby-appen till Azure

Om du inte har en Azure-prenumeration skapar du ett kostnadsfritt Azure-konto innan du börjar.

Förutsättningar

Skapa en Gatsby-app

Skapa en Gatsby-app med hjälp av Gatsby-kommandoradsgränssnittet (CLI):

  1. Öppna en terminal

  2. Använd npx-verktyget för att skapa en ny app med Gatsby CLI. Detta kan ta några minuter.

    npx gatsby new static-web-app

  3. Gå till den nyligen skapade appen

    cd static-web-app

  4. Initiera en Git-lagringsplats

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

Kommentar

Om du använder den senaste versionen av Gatsby kan du behöva ändra package.json så att den innehåller "motorer": { "node": ">=18.0.0" },

Skicka ditt program till GitHub

Du måste ha en lagringsplats på GitHub för att skapa en ny Azure Static Web Apps-resurs.

  1. Skapa en tom GitHub-lagringsplats (skapa inte en README) från https://github.com/new med namnet gatsby-static-web-app.

  2. Lägg sedan till GitHub-lagringsplatsen som du precis skapade som en fjärrlagringsplats till din lokala lagringsplats. Se till att lägga till ditt GitHub-användarnamn i stället för <YOUR_USER_NAME> platshållaren i följande kommando.

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

  3. Skicka din lokala lagringsplats till GitHub.

    git push --set-upstream origin main

Distribuera din webbapp

Följande steg visar hur du skapar en ny statisk webbplatsapp och distribuerar den till en produktionsmiljö.

Skapa programmet

  1. Gå till Azure Portal

  2. Välj Skapa en resurs

  3. Sök efter Statiska webbappar

  4. Välj Statiska webbappar

  5. Välj Skapa

  6. På fliken Grundläggande anger du följande värden.

    Property Värde
    Abonnemang Ditt Azure-prenumerationsnamn.
    Resursgrupp my-gatsby-group
    Namn my-gatsby-app
    Plantyp Kostnadsfri
    Region för Azure Functions API och mellanlagringsmiljöer Välj en region som är närmast dig.
    Source GitHub

  7. Välj Logga in med GitHub och autentisera med GitHub.

  8. Ange följande GitHub-värden.

    Property Värde
    Organisation Välj önskad GitHub-organisation.
    Lagringsplats Välj gatsby-static-web-app.
    Gren Välj huvud.

    Kommentar

    Om du inte ser några lagringsplatser kan du behöva auktorisera Azure Static Web Apps på GitHub. Bläddra till din GitHub-lagringsplats och gå till Inställningar > Program > auktoriserade OAuth-appar, välj Azure Static Web Apps och välj sedan Bevilja. För organisationens lagringsplatser måste du vara ägare till organisationen för att bevilja behörigheterna.

  9. I avsnittet Bygginformation väljer du Gatsby i listrutan Skapa förinställningar och behåller standardvärdena.

Granska och skapa

  1. Välj Granska + Skapa för att kontrollera att informationen är korrekt.

  2. Välj Skapa för att starta skapandet av apptjänstens statiska webbapp och etablera en GitHub Actions för distribution.

  3. När distributionen är klar väljer du Gå till resurs.

  4. På resursskärmen väljer du URL-länken för att öppna ditt distribuerade program. Du kan behöva vänta en minut eller två tills GitHub Actions har slutförts.

    Deployed application

Rensa resurser

Om du inte kommer att fortsätta att använda det här programmet kan du ta bort Azure Static Web App-resursen genom följande steg:

  1. Öppna Azure-portalen
  2. I det övre sökfältet söker du efter ditt program efter det namn som du angav tidigare
  3. Klicka på appen
  4. Klicka på knappen Ta bort
  5. Klicka på Ja för att bekräfta borttagningsåtgärden

Nästa steg

Lägga till en anpassad domän