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

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 Actions waarmee u kunt bepalen hoe de app wordt gebouwd en gepubliceerd.

In deze handleiding leer je hoe je:

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

Vereiste voorwaarden

• 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 VuePress-app maken

Maak een VuePress-app op basis van de opdrachtregelinterface (CLI):

1. Maak een nieuwe map voor de VuePress-app.

   mkdir static-site
   

2. Voeg een README.md bestand toe aan de map.

   echo '# Hello From VuePress' > README.md
   

3. Initialiseer het package.json-bestand .

   npm init -y
   

4. Voeg VuePress toe als een devDependency.

   npm install --save-dev vuepress
   

5. Open het package.json-bestand in een teksteditor en voeg een buildopdracht toe aan de scripts sectie.

   ...
   "scripts": {
       "build": "vuepress build"
   }
   ...
   

6. Maak een .gitignore-bestand om de map node_modules uit te sluiten.

   echo 'node_modules' > .gitignore
   

7. Initialiseer een Git-opslagplaats.

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

Uw toepassing pushen naar GitHub

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

1. Maak een lege GitHub-opslagplaats (maak geen README) van https://github.com/new de benoemde vuepress-static-app.

2. Voeg de GitHub-opslagplaats toe als een externe opslagplaats aan uw lokale opslagplaats. Zorg ervoor dat u uw GitHub-gebruikersnaam toevoegt in plaats van de <YOUR_USER_NAME> tijdelijke aanduiding in de volgende opdracht.

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

3. Push uw lokale opslagplaats naar GitHub.

   git push --set-upstream origin main
   

De web-app implementeren

In de volgende stappen ziet u hoe u een nieuwe statische site-app maakt en implementeert in een productieomgeving.

De toepassing maken

1. Ga naar Azure Portal

2. Selecteer Een resource maken

3. Zoeken naar Static Web Apps

4. Statische web-apps selecteren

5. Selecteer Creëren

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

   Vastgoed	Waarde
   Subscription	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

7. Selecteer Aanmelden met GitHub en verifieer met GitHub.

8. Voer de volgende GitHub-waarden in.

   Vastgoed	Waarde
   Organisatie	Selecteer de gewenste GitHub-organisatie.
   Opslagplaats	Selecteer vuepress-static-app.
   Filiaal	Selecteer main.

   Opmerking

   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 opslagplaatsen van organisaties moet u een eigenaar van de organisatie zijn om de machtigingen te verlenen.

9. Selecteer VuePress in de vervolgkeuzelijst Build Presets in de sectie Build Details en behoud de standaardwaarden.

Controleren en maken

1. Selecteer Controleren + Maken om te controleren of de details juist zijn.

2. Selecteer Maken om het maken van de statische App Service-web-app te starten en een GitHub Actions in te richten voor implementatie.

3. Zodra de implementatie is voltooid, selecteert u Ga naar de resource.

4. 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.

   

De hulpbronnen opschonen

Als u deze toepassing niet gaat blijven gebruiken, kunt u de Azure Static Web App-resource verwijderen door de volgende stappen uit te voeren:

1. De Azure-portal openen
2. Zoek in de bovenste zoekbalk naar uw toepassing op basis van de naam die u eerder hebt opgegeven
3. Klik op de app
4. Klik op de knop Verwijderen
5. Klik op Ja om de verwijderactie te bevestigen

Volgende stappen

Een aangepast domein toevoegen