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

Den här artikeln visar hur du skapar och distribuerar en VuePress-webbapp till Azure Static Web Apps. Slutresultatet är ett nytt Azure Static Web Apps-program med tillhörande GitHub Actions som ger dig kontroll över hur appen skapas och publiceras.

I den här tutorialen lär du dig följande:

Förutsättningar

• Ett Azure-konto med en aktiv prenumeration. Om du inte har ett konto kan du skapa ett konto kostnadsfritt.
• Ett GitHub-konto. Om du inte har ett konto kan du skapa ett konto kostnadsfritt.
• En Git-installation installerad. Om du inte har någon kan du installera Git.
• Node.js installerat.

Skapa en VuePress-app

Skapa en VuePress-app från kommandoradsgränssnittet (CLI):

1. Skapa en ny mapp för VuePress-appen.

   mkdir static-site
   

2. Lägg till en README.md filen mappen.

   echo '# Hello From VuePress' > README.md
   

3. Initiera filenpackage.json .

   npm init -y
   

4. Lägg till VuePress som en devDependency.

   npm install --save-dev vuepress
   

5. Öppna filenpackage.json i en textredigerare och lägg till ett build-kommando i scripts avsnittet.

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

6. Skapa en .gitignore-fil för att exkludera mappen node_modules .

   echo 'node_modules' > .gitignore
   

7. Initiera en Git-lagringsplats.

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

Skicka ditt program till GitHub

Du behöver en lagringsplats på GitHub för att ansluta till Azure Static Web Apps. Följande steg visar hur du skapar en lagringsplats för din webbplats.

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

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

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

3. Push-överför 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. Gå till Azure-portalen

2. Välj Skapa en resurs

3. Sök efter statiska webbappar

4. Välj Statiska webbappar

5. Välj Skapa

6. På fliken Grundläggande anger du följande värden.

   Fastighet	Värde
   Subscription	Ditt Azure-prenumerationsnamn.
   resursgrupp	my-vuepress-group
   Namn	vuepress-static-app
   Plantyp	Kostnadsfri
   Region för Azure Functions API och mellanlagringsmiljöer	Välj en 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.

   Fastighet	Värde
   Organisation	Välj önskad GitHub-organisation.
   Lagringsplats	Välj vuepress-static-app.
   Gren	Välj huvud.

   Anmärkning

   Om du inte ser några lagringsplatser kan du behöva auktorisera Azure Static Web Apps på GitHub. Bläddra till din GitHub-lagringsplats och gå till Inställningar > Program > Auktoriserade OAuth-appar, välj Azure Static Web Apps och välj sedan Bevilja. För organisationens lagringsplatser måste du vara ägare till organisationen för att bevilja behörigheterna.

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

Granska och skapa

1. Välj Granska + Skapa för att kontrollera att informationen är korrekt.

2. Välj Skapa för att starta skapandet av apptjänstens statiska webbapp och etablera en GitHub Actions för distribution.

3. När distributionen är klar väljer du Gå till resurs.

4. På resursskärmen väljer du URL-länken för att öppna ditt distribuerade program. Du kan behöva vänta en minut eller två tills GitHub Actions har slutförts.

   

Rensa resurser

Om du inte kommer att fortsätta att använda det här programmet kan du ta bort Azure Static Web App-resursen genom följande steg:

1. Öppna Azure-portalen
2. I det övre sökfältet söker du efter ditt program efter det namn som du angav tidigare
3. Klicka på appen
4. Klicka på knappen Ta bort
5. Klicka på Ja för att bekräfta borttagningsåtgärden

Nästa steg