Zelfstudie: Een Gatsby-site publiceren in Azure Static Web Apps

In dit artikel ziet u hoe u een Gatsby-webtoepassing maakt en implementeert in Azure Static Web Apps. Het uiteindelijke resultaat is een nieuwe Static Web Apps-site (met de bijbehorende GitHub-acties), waarmee u beheert hoe de app wordt gebouwd en gepubliceerd.

In deze zelfstudie leert u het volgende:

Als u geen Azure-abonnement hebt, maakt u een gratis account voordat u begint.

Vereisten

• Een Azure-account met een actief abonnement. Als u nog geen account hebt, kunt u gratis een account maken.
• Een GitHub-account. Als u nog geen account hebt, kunt u gratis een account maken.
• Node.js geïnstalleerd.

Een Gatsby-app maken

Een Gatsby-app maken met behulp van de Gatsby-CLI (opdrachtregelinterface):

1. Open een terminal

2. Gebruik het hulpprogramma npx om een nieuwe app te maken met de Gatsby-CLI. Dit kan enkele minuten duren.

   npx gatsby new static-web-app
   

3. Ga naar de nieuwe app

   cd static-web-app
   

4. Initialiseer een Git-opslagplaats

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

Push de toepassing naar GitHub

U moet een opslagplaats in GitHub hebben om een nieuwe Azure Static Web Apps-resource te maken.

1. Maak in https://github.com/new een lege GitHub-opslagplaats (maak geen Leesmij-bestand) met de naam statische-gatsby-web-app.

2. Voeg vervolgens de GitHub-opslagplaats die u zojuist hebt gemaakt, als externe locatie toe aan de lokale opslagplaats. Zorg ervoor dat u de tijdelijke aanduiding <YOUR_USER_NAME> in de volgende opdracht vervangt door uw GitHub-gebruikersnaam.

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

3. Push de lokale opslagplaats naar GitHub.

   git push --set-upstream origin main
   

De web-app implementeren

De volgende stappen laten zien hoe u een nieuwe statische site-app maakt en deze implementeert in een productieomgeving.

De toepassing maken

1. Ga naar Azure Portal

2. Selecteer Een resource maken

3. Zoek naar Static Web Apps

4. Selecteer Static Web Apps

5. Selecteer Maken

6. Voer op het tabblad Basisinformatie de volgende waarden in.

   Eigenschap	Waarde
   Abonnement	Uw Azure-abonnementnaam.
   Resourcegroep	my-gatsby-group
   Naam	my-gatsby-app
   Plantype	Gratis
   Regio voor Azure Functions API en faseringsomgevingen	Selecteer een regio het dichtst bij u in de buurt.
   Bron	GitHub

7. Selecteer Aanmelden met GitHub en verifieert u bij GitHub.

8. Voer de volgende GitHub-waarden in.

   Eigenschap	Waarde
   Organisatie	Selecteer de gewenste GitHub-organisatie.
   Opslagplaats	Selecteer gatsby-static-web-app.
   Vertakking	Selecteer hoofd.

9. Selecteer in de sectie BuildDetails de optie Gatsby in de vervolgkeuzeset Build-voorinstellingen en bewaar de standaardwaarden.

Controleren en maken

1. Selecteer de knop Beoordelen en maken om te controleren of de details juist zijn.

2. Selecteer Maken om te beginnen met het maken van de App Service Statische web-app en een GitHub-actie in terichten voor implementatie.

3. Zodra de implementatie is voltooid, klikt u op Naar de resource gaan.

4. Klik in het resourcescherm op de URL-koppeling om de geïmplementeerde toepassing te openen. Mogelijk moet u enkele minuten wachten voor de GitHub-actie is voltooid.

   

Resources opschonen

Als u deze toepassing verder niet gaat gebruiken, kunt u de Azure Static Web Apps-resource verwijderen door de volgende stappen te volgen:

1. Open de Azure-portal
2. Zoek de toepassing in de bovenste zoekbalk via de naam die u deze eerder hebt gegeven
3. Klik op de app
4. Klik op de knop Verwijderen
5. Klik op Ja om de verwijdering te bevestigen

Volgende stappen