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

Artikel
01/10/2024

Dit artikel laat zien hoe u een VuePress-webtoepassing maakt en implementeert in Azure Static Web Apps. Het uiteindelijke resultaat is een nieuwe Azure Static Web Apps-toepassing met de bijbehorende GitHub-acties, waarmee u beheert hoe de app wordt gebouwd en gepubliceerd.

In deze zelfstudie leert u het volgende:

Een VuePress-app maken
Een Azure Static Web Apps-toepassing instellen
De VuePress-app implementeren in Azure

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.
Een Git-installatie geïnstalleerd. Als u nog geen account hebt, kunt u Git installeren.
Node.js geïnstalleerd.

Een VuePress-app maken

Een VuePress-app maken via de CLI (opdrachtregelinterface):

Maak een nieuwe map voor de VuePress-app.
```
mkdir static-site
```

Voeg een LEESMIJ.md-bestand toe aan de map.

echo '# Hello From VuePress' > README.md

Initialiseer het package.json-bestand.
```
npm init -y
```
Voeg VuePress toe als een devDependency.
```
npm install --save-dev vuepress
```
Open het package.json-bestand in een teksteditor en voeg een build-opdracht toe aan de sectie scripts.
```
...
"scripts": {
    "build": "vuepress build"
}
...
```
Maak een .gitignore-bestand om de map node_modules uit te sluiten.
```
echo 'node_modules' > .gitignore
```

Initialiseer een Git-opslagplaats.

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

Push de toepassing naar GitHub

U hebt een opslagplaats in GitHub nodig om verbinding te maken met Azure Static Web Apps. In de volgende stappen ziet u hoe u een opslagplaats maakt voor uw site.

Maak in https://github.com/new een lege GitHub-opslagplaats (maak geen Leesmij-bestand) met de naam statische-vuepress-app.
Voeg de GitHub-opslagplaats 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>/vuepress-static-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
Selecteer Static Web Apps
Selecteer Maken

Voer op het tabblad Basisbeginselen de volgende waarden in.

Eigenschap	Waarde
Abonnement	Uw Azure-abonnementnaam.
Resourcegroep	my-vuepress-group
Naam	vuepress-static-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.

Eigenschap Waarde

Organisatie Selecteer de gewenste GitHub-organisatie.

Opslagplaats Selecteer vuepress-static-app.

Vertakking Selecteer hoofd.

Notitie

Als u geen opslagplaatsen ziet, moet u mogelijk Azure Static Web Apps op GitHub autoriseren. Blader naar uw GitHub-opslagplaats en ga naar Instellingen > Toepassingen > Geautoriseerde OAuth-apps, 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 in de sectie Builddetailsde optie VuePress in de vervolgkeuzelijst Build Presets en behoud de standaardwaarden.

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

Controleren en maken

Selecteer Controleren en maken om te controleren of de details correct zijn.
Selecteer Maken om te beginnen met het maken van de App Service Statische web-app en richt een GitHub Actions in voor implementatie.
Zodra de implementatie is voltooid, selecteert u Ga naar resource.
Selecteer in het resourcescherm de URL-koppeling om de geïmplementeerde toepassing te openen. Mogelijk moet u een paar minuten wachten totdat de GitHub Actions 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:

Open de 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

Volgende stappen

Een aangepast domein toevoegen