Självstudie: Publicera en VuePress-webbplats för att Azure Static Web Apps

Den här artikeln visar hur du skapar och distribuerar en VuePress-webbapp för att 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 guiden får du lära dig att:

• Skapa en VuePress-app
• Konfigurera en Azure Static Web Apps
• Distribuera VuePress-appen till Azure

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 filen package.json .

   npm init -y
   

4. Lägg till VuePress som en devDependency.

   npm install --save-dev vuepress
   

5. Öppna filen package.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"
   

Push-överför 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ärrplats 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 Portal

2. Välj Skapa en resurs

3. Sök efter Statiska webbappar

4. Välj Static Web Apps

5. Välj Skapa

6. Ange följande värden på fliken Grundläggande inställningar.

   Egenskap	Värde
   Prenumeration	Namnet på din Azure-prenumeration.
   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.

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

   Anteckning

   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 Build Details (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 börja skapa App Service Static Web App 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 det distribuerade programmet. 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 använda det här programmet kan du ta bort Azure Static Web App-resursen med följande steg:

1. Öppna Azure-portalen
2. I det övre sökfältet söker du efter ditt program med 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

Lägga till en anpassad domän