Een Gatsby-site implementeren 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:
- Een Gatsby-app maken
- Een Azure Static Web Apps-site instellen
- De Gatsby-app implementeren in Azure
Als u geen Azure-abonnement hebt, kunt u een gratis Azure-account maken 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.
- Er is een Git-installatie geïnstalleerd. Als u er nog geen hebt, kunt u Git installeren.
- Node.js geïnstalleerd.
Een Gatsby-app maken
Een Gatsby-app maken met behulp van de Gatsby-CLI (opdrachtregelinterface):
Open een terminal
Gebruik het hulpprogramma npx om een nieuwe app te maken met de Gatsby-CLI. Dit kan enkele minuten in beslag nemen.
npx gatsby new static-web-app
Ga naar de zojuist gemaakte app
cd static-web-app
Initialiseer een Git-opslagplaats
git init git add -A git commit -m "initial commit"
Notitie
Als u de nieuwste versie van Gatsby gebruikt, moet u mogelijk de package.json wijzigen om "engines" op te nemen: { "node": ">=18.0.0" },
Push de toepassing naar GitHub
U moet een opslagplaats in GitHub hebben om een nieuwe Azure Static Web Apps-resource te maken.
Maak in https://github.com/new een lege GitHub-opslagplaats (maak geen Leesmij-bestand) met de naam statische-gatsby-web-app.
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
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
Ga naar de Azure-portal
Selecteer Een resource maken
Zoek naar Static Web Apps
Statische web-apps selecteren
Selecteer Maken.
Voer op het tabblad Basisinformatie de volgende waarden in.
Eigenschappen Weergegeven als Abonnement Uw Azure-abonnementnaam. Resourcegroep my-gatsby-group Naam my-gatsby-app Plantype Gratis Regio voor Azure Functions-API en faseringsomgevingen Selecteer een regio die het dichtst bij u in de buurt ligt. Bron GitHub Selecteer Aanmelden met GitHub en verifieer met GitHub.
Voer de volgende GitHub-waarden in.
Eigenschappen Weergegeven als Organisatie Selecteer de gewenste GitHub-organisatie. Opslagplaats Selecteer gatsby-static-web-app. Vertakking Selecteer de hoofdmap. Notitie
Als u geen opslagplaatsen ziet, moet u mogelijk Azure Static Web Apps autoriseren op GitHub. Blader naar uw GitHub-opslagplaats en ga naar Geautoriseerde OAuth-apps voor instellingen > >, selecteer Azure Static Web Apps en selecteer Vervolgens Verlenen. Voor organisatie-opslagplaatsen moet u een eigenaar van de organisatie zijn om de machtigingen te verlenen.
Selecteer Gatsby in de vervolgkeuzelijst Build Presets in de sectie Build Details en behoud de standaardwaarden.
Controleren en maken
Selecteer Controleren + Maken om te controleren of de details juist zijn.
Selecteer Maken om het maken van de statische App Service-web-app te starten en een GitHub Actions in te richten voor implementatie.
Zodra de implementatie is voltooid, selecteert u Ga naar de resource.
Selecteer in het resourcescherm de URL-koppeling om uw geïmplementeerde toepassing te openen. Mogelijk moet u een paar minuten wachten totdat de GitHub Actions zijn 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:
- Open Azure Portal
- Zoek de toepassing in de bovenste zoekbalk via de naam die u deze eerder hebt gegeven
- Klik op de app
- Klik op de knop Verwijderen
- Klik op Ja om de verwijdering te bevestigen