Självstudie: Publicera en Gatsby-webbplats till Azure Static Web Apps

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 byggs och publiceras.

I den här guiden får du lära dig att:

Om du inte har en Azure-prenumerationkan du skapa ett kostnads fritt konto innan du börjar.

Förutsättningar

• Ett Azure-konto med en aktiv prenumeration. Om du inte har ett konto kan du skapa ett konto utan kostnad.
• Ett GitHub-konto. Om du inte har ett konto kan du skapa ett konto utan kostnad.
• Node.js installerat.

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. Det kan ta några minuter.

   npx gatsby new static-web-app
   

3. Navigera till den nyligen skapade appen

   cd static-web-app
   

4. Initiera en Git-lagringsplatsen

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

Skicka ditt program till GitHub

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

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

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

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

3. Push-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. Navigera till Azure Portal

2. Välj Skapa en resurs

3. Sök efter Statiska webbappar

4. Välj Static Web Apps

5. Välj Skapa

6. Ange följande värden på fliken Grundläggande inställningar.

   Egenskap	Värde
   Prenumeration	Namnet på din Azure-prenumeration.
   Resursgrupp	my-gatsby-group
   Namn	my-gatsby-app
   Plantyp	Kostnadsfri
   Region för Azure Functions API och mellanlagringsmiljöer	Välj den region som är närmast dig.
   Källa	GitHub

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

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

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

9. I avsnittet Build Details (Bygginformation) väljer du Gatsby i listrutan Build Presets (Byggförinställningar) och behåller standardvärdena.

Granska och skapa

1. Välj knappen Granska + skapa för att kontrollera att informationen stämmer.

2. Välj Skapa för att börja skapa App Service Static Web App och etablera en GitHub-åtgärd för distribution.

3. När distributionen är klar klickar du på Gå till resurs.

4. På resursskärmen klickar du på URL-länken för att öppna det distribuerade programmet. Du kan behöva vänta någon minut tills GitHub-åtgärden har slutförts.

   

Rensa resurser

Om du inte kommer att fortsätta att använda det här programmet kan du ta bort Azures statiska webb program resurs genom följande steg:

1. Öppna Azure-portalen
2. Sök efter ditt program med det namn du angav tidigare i det övre Sök fältet
3. Klicka på appen
4. Klicka på knappen ta bort
5. Bekräfta borttagnings åtgärden genom att klicka på Ja

Nästa steg