Megosztás a következőn keresztül:

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

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

Ebben az oktatóanyagban a következőket sajátíthatja el:

  • 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

Az Azure Static Web Appshez való csatlakozáshoz szüksége van egy GitHub-adattárra. Az alábbi lépések bemutatják, hogyan hozhat létre adattárat a webhelyéhez.

  1. Hozzon létre egy üres GitHub-adattárat (ne hozzon létre https://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. A helyi adattár leküldése 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. Ugrás az Azure Portalra

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

  3. Statikus webalkalmazások keresése

  4. Statikus webalkalmazások kiválasztása

  5. Válassza a lehetőséget, hozza létre a lehetőséget

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

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

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

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

    Ingatlan Érték
    Szervezet Válassza ki a kívánt GitHub-szervezetet.
    Adattár Válassza a vuepress-static-app lehetőséget.
    Fiók Válassza ki a fő elemet.

    Megjegyzés:

    Ha nem lát tárházakat, lehetséges, hogy engedélyeznie kell az Azure Static Web Appst a GitHubon. Keresse meg a GitHub-adattárat, és nyissa meg a Beállításalkalmazások >> engedélyezett OAuth-alkalmazásait, válassza az Azure Static Web Apps lehetőséget, majd válassza a Grant lehetőséget. A szervezeti adattárak esetében az engedélyek megadásához a szervezet tulajdonosának kell lennie.

  9. A Build Részletei szakaszban válassza a VuePress lehetőséget a Buildelőbeállítások 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 , ha ellenőrizni szeretné, hogy a részletek helyesek-e.

  2. Válassza a Létrehozás lehetőséget az App Service Static Web App létrehozásának megkezdéséhez, és üzembe helyezéshez kiépíthet egy GitHub Actionst.

  3. Az üzembe helyezés befejezése után válassza az Ugrás az erőforrásra 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.

    Üzembe helyezett alkalmazás

Erőforrások tisztítása

Ha nem folytatja az alkalmazás használatát, az alábbi lépések végrehajtásával törölheti az Azure Static Web App-erőforrást:

  1. Az Azure Portal megnyitása
  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

  • Last updated on