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 Azure Static Web Apps. Slutresultatet är ett nytt Azure Static Web Apps med tillhörande GitHub Actions som ger dig kontroll över hur appen byggs och publiceras.

I den här guiden får du lära dig att:

Förutsättningar

• Ett Azure-konto med en aktiv prenumeration. Om du inte har ett konto kan du skapa ett konto utan kostnad.
• Ett GitHub-konto. Om du inte har ett konto kan du skapa ett konto utan kostnad.
• 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 README.md fil i mappen .

   echo '# Hello From VuePress' > README.md
   

3. Initiera filen package.jsfil.

   npm init -y
   

4. Lägg till VuePress som devDependency en .

   npm install --save-dev vuepress
   

5. Öppna filen package.jsi en textredigerare och lägg till ett build-kommando i scripts avsnittet .

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

6. Skapa en .gitignore-fil för att undanta _ nodmodulmappen.

   echo 'node_modules' > .gitignore
   

7. Initiera en Git-lagringsplatsen.

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

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

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

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

3. Push-skicka din lokala lagringsplatsen 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. Navigera 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	Ditt Azure-prenumerationsnamn.
   Resursgrupp	my-vuepress-group
   Namn	vuepress-static-app
   Plantyp	Kostnadsfri
   Region för Azure Functions API och mellanlagringsmiljöer	Välj den 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 main.

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

Granska och skapa

1. Välj knappen Granska + skapa för att kontrollera att informationen stämmer.

2. Välj Skapa för att starta skapandet av App Service Static Web App och etablera en GitHub-åtgärd för distribution.

3. När distributionen är klar klickar du på Gå till resurs.

4. På resursskärmen klickar du på URL-länken för att öppna det distribuerade programmet. Du kan behöva vänta någon minut tills GitHub-åtgärden har slutförts.

   

Rensa resurser

Om du inte kommer att fortsätta att använda det här programmet kan du ta bort Azures statiska webb program resurs genom följande steg:

1. Öppna Azure-portalen
2. Sök efter ditt program med det namn du angav tidigare i det övre Sök fältet
3. Klicka på appen
4. Klicka på knappen ta bort
5. Bekräfta borttagnings åtgärden genom att klicka på Ja

Nästa steg