Nuxt 3-helyek üzembe helyezése univerzális rendereléssel a Azure Static Web Apps

  • Cikk

Ebből az oktatóanyagból megtudhatja, hogyan helyezhet üzembe egy Nuxt 3-alkalmazásta Azure Static Web Apps. Az Nuxt 3 támogatja az univerzális (ügyféloldali és kiszolgálóoldali) renderelést, beleértve a kiszolgáló- és API-útvonalakat is. További konfiguráció nélkül üzembe helyezhet Nuxt 3-alkalmazásokat univerzális rendereléssel a Azure Static Web Apps. Ha az alkalmazás a GitHub Action vagy az Azure Pipelines Static Web Apps feladatba van beépítve, az Nuxt 3 automatikusan statikus eszközökké és Azure Static Web Apps kompatibilis Azure Functions alkalmazássá alakítja.

Előfeltételek

Nuxt 3-alkalmazás beállítása

Új Nuxt-projektet a használatával npx nuxi init nuxt-appállíthat be. Új projekt használata helyett ez az oktatóanyag egy meglévő adattárat használ, amely bemutatja, hogyan helyezhet üzembe egy Nuxt 3-webhelyet univerzális rendereléssel a Azure Static Web Apps.

  1. Nyissa meg a http://github.com/staticwebdev/nuxt-3-starter/generate címet.

  2. Nevezze el az adattárat nuxt-3-starter néven.

  3. Ezután klónozza az új adattárat a gépére. Mindenképpen cserélje le <a YOUR_GITHUB_ACCOUNT_NAME> a fiók nevére.

    git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nuxt-3-starter

  4. Lépjen az újonnan klónozott Nuxt.js alkalmazásra:

    cd nuxt-3-starter

  5. Függőségek telepítése:

    npm install

  6. Indítsa el Nuxt.js alkalmazást a fejlesztés során:

    npm run dev -- -o

Lépjen az http://localhost:3000 alkalmazás megnyitásához, ahol az alábbi webhelynek meg kell nyitnia az előnyben részesített böngészőben. A kiszolgáló- és API-útvonalak meghívásához válassza ki a gombokat.

Alkalmazás indítása Nuxt.js

Nuxt 3-hely üzembe helyezése

Az alábbi lépések bemutatják, hogyan hozhat létre Azure Static Web Apps erőforrást, és hogyan konfigurálhatja az alkalmazást a GitHubról történő üzembe helyezésre.

Azure Static Web Apps-erőforrás létrehozása

  1. Lépjen az Azure Portalra.

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

  3. Keresse meg a Static Web Apps.

  4. Válassza a Static Web Apps elemet.

  5. Válassza a Létrehozás lehetőséget.

  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-nuxtjs-group
    Név my-nuxt3-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 ki a korábban létrehozott adattárat.
    Ág Válassza a fő lehetőséget.

  9. A Build Details (Build részletei ) szakaszban válassza az Egyéni lehetőséget a Build Presets (Előre beállított buildek) legördülő listából, és tartsa meg az alapértelmezett értékeket.

  10. Az Alkalmazás helye mezőbe írja be / a kifejezést.

  11. Az Api-helyen írja be a mezőbe a .output/server kifejezést.

  12. A Kimenet helyen írja be a .output/public kifejezést a mezőbe.

Á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 létrehozásának megkezdéséhez és egy GitHub Actions üzembe helyezéséhez.

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

  4. Az Áttekintés ablakban válassza az URL-hivatkozást az üzembe helyezett alkalmazás megnyitásához.

Ha a webhely nem töltődik be azonnal, akkor a háttérben GitHub Actions munkafolyamat továbbra is fut. A munkafolyamat befejezése után frissítheti a böngészőt a webalkalmazás megtekintéséhez.

A Műveletek munkafolyamatok állapotának ellenőrzéséhez navigáljon az adattár Műveletek eleméhez:

https://github.com/<YOUR_GITHUB_USERNAME>/nuxt-3-starter/actions

Módosítások szinkronizálása

Az alkalmazás létrehozásakor Azure Static Web Apps létrehozott egy GitHub Actions munkafolyamat-fájlt az adattárban. Térjen vissza a terminálhoz, és futtassa a következő parancsot az új fájlt tartalmazó véglegesítés lekéréséhez.

git pull

Módosítsa az alkalmazást a kód frissítésével és a GitHubra való leküldésével. GitHub Actions automatikusan létrehozza és üzembe helyezi az alkalmazást.

További információ: Azure Static Web Apps Nuxt 3 üzembe helyezési előre beállított dokumentáció.

Egyéni tartomány beállítása