Oktatóanyag: VuePress-webhely közzététele Azure Static Web Apps

Ez a cikk bemutatja, hogyan hozhat létre és helyezhet üzembe VuePress-webalkalmazásta Azure Static Web Apps. A végeredmény egy új Azure Static Web Apps alkalmazás a társított GitHub Actions, amely lehetővé teszi az alkalmazás létrehozásának és közzétételének szabályozását.

Eben az oktatóanyagban az alábbiakkal fog megismerkedni:

• VuePress-alkalmazás létrehozása
• Azure Static Web Apps beállítása
• A VuePress alkalmazás üzembe helyezése az Azure-ban

Előfeltételek

• Egy Azure-fiók, aktív előfizetéssel. Ha nem rendelkezik ilyen fiókkal, ingyenesen létrehozhat fiókot.
• Egy GitHub-fiók. Ha nem rendelkezik ilyen fiókkal, ingyenesen létrehozhat fiókot.
• Telepítve van egy Git-beállítás. Ha nincs ilyenje, telepítheti a Gitet.
• Node.js telepítve.

VuePress-alkalmazás létrehozása

VuePress-alkalmazás létrehozása a parancssori felületről (CLI):

1. Hozzon létre egy új mappát a VuePress alkalmazáshoz.

   mkdir static-site
   

2. Adjon hozzá egy README.md fájlt a mappához.

   echo '# Hello From VuePress' > README.md
   

3. Inicializálja a package.json fájlt.

   npm init -y
   

4. Adja hozzá a VuePresst devDependency.

   npm install --save-dev vuepress
   

5. Nyissa meg a package.json fájlt egy szövegszerkesztőben, és adjon hozzá egy buildelési parancsot a scripts szakaszhoz.

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

6. Hozzon létre egy .gitignore fájlt a node_modules mappa kizárásához.

   echo 'node_modules' > .gitignore
   

7. Git-adattár inicializálása.

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

Alkalmazás leküldése a GitHubra

A GitHubon egy adattárra van szüksége a Azure Static Web Apps való csatlakozáshoz. Az alábbi lépések bemutatják, hogyan hozhat létre adattárat a webhelyhez.

1. Hozzon létre egy üres GitHub-adattárat (ne hozzon létre README-t) a nevű vuepress-static-appbólhttps://github.com/new.

2. Adja hozzá a GitHub-adattárat távoliként a helyi adattárhoz. Az alábbi parancsban adja hozzá a GitHub-felhasználónevet a <YOUR_USER_NAME> helyőrző helyett.

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

3. Küldje le a helyi adattárat a GitHubra.

   git push --set-upstream origin main
   

A webalkalmazás üzembe helyezése

Az alábbi lépések bemutatják, hogyan hozhat létre új statikus helyalkalmazást, és hogyan helyezheti üzembe éles környezetben.

Az alkalmazás létrehozása

1. Nyissa meg az Azure Portalt

2. Válassza az Erőforrás létrehozása lehetőséget

3. Keressen rá a Static Web Apps kifejezésre

4. Válassza Static Web Apps

5. Kattintson a Létrehozás elemre.

6. Az Alapok lapon adja meg a következő értékeket.

   Tulajdonság	Érték
   Előfizetés	Az Azure-előfizetés neve.
   Erőforráscsoport	my-vuepress-group
   Név	vuepress-static-app
   Csomag típusa	Ingyenes
   Régió Azure Functions API-hoz és előkészítési környezetekhez	Válasszon ki egy Önhöz legközelebb eső régiót.
   Forrás	GitHub

7. Válassza a Bejelentkezés a GitHubbal lehetőséget, és hitelesítse magát a GitHubbal.

8. Adja meg a következő GitHub-értékeket.

   Tulajdonság	Érték
   Szervezet	Válassza ki a kívánt GitHub-szervezetet.
   Adattár	Válassza a vuepress-static-app lehetőséget.
   Ág	Válassza a fő lehetőséget.

   Megjegyzés

   Ha nem látja az adattárakat, lehetséges, hogy engedélyeznie kell Azure Static Web Apps a GitHubon. Keresse meg a GitHub-adattárat, és lépjen a Beállításokalkalmazások >> engedélyezett OAuth-alkalmazások területre, válassza a Azure Static Web Apps lehetőséget, majd válassza az Engedélyezés lehetőséget. Szervezeti adattárak esetén az engedélyek megadásához a szervezet tulajdonosának kell lennie.

9. A Build Details (Build részletei ) szakaszban válassza a VuePress elemet a Build Presets (BuildElőkészletek) legördülő listából, és tartsa meg az alapértelmezett értékeket.

Áttekintés és létrehozás

1. Válassza a Véleményezés + Létrehozás lehetőséget annak ellenőrzéséhez, hogy a részletek helyesek-e.

2. Válassza a Létrehozás lehetőséget a statikus webalkalmazás App Service létrehozásának megkezdéséhez, és üzembe helyezéshez hozzon létre egy GitHub Actions.

3. Az üzembe helyezés befejezése után válassza az Erőforrás megnyitása lehetőséget.

4. Az erőforrás képernyőjén válassza az URL-hivatkozást az üzembe helyezett alkalmazás megnyitásához. Előfordulhat, hogy várnia kell egy-két percet, amíg a GitHub Actions befejeződik.

   

Az erőforrások eltávolítása

Ha nem fogja tovább használni ezt az alkalmazást, a következő lépésekkel törölheti az Azure Static Web App erőforrást:

1. Nyissa meg az Azure Portalt
2. A felső keresősávon keresse meg az alkalmazást a korábban megadott név alapján
3. Kattintson az alkalmazásra
4. Kattintson a Törlés gombra
5. Kattintson az Igen gombra a törlési művelet megerősítéséhez

Következő lépések

Egyéni tartomány hozzáadása