Nuxt 3-webhelyek üzembe helyezése univerzális rendereléssel az Azure Static Web Appsben

Ebben az oktatóanyagban megtanulhatja, hogyan helyezhet üzembe egy Nuxt 3-alkalmazást az Azure Static Web Appsben. 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 univerzális rendereléssel üzembe helyezhet Nuxt 3-alkalmazásokat az Azure Static Web Appsben. Ha az alkalmazás a Static Web Apps GitHub Action vagy Az Azure Pipelines feladatba van beépítve, az Nuxt 3 automatikusan statikus eszközökké és az Azure Static Web Appsszel kompatibilis Azure Functions-alkalmazássá alakítja.

Előfeltételek

• Egy Azure-fiók, aktív előfizetéssel. Hozzon létre egy fiókot ingyenesen.
• Egy GitHub-fiók. Hozzon létre egy fiókot ingyenesen.
• Node.js 16-os vagy újabb verzió van telepítve.

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

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

1. Navigáljon ide: http://github.com/staticwebdev/nuxt-3-starter/generate.

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

3. Ezután klónozza az új adattárat a gépére. Cserélje ki <YOUR_GITHUB_ACCOUNT_NAME>-t a saját fióknevé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
   

Nyissa meg az alkalmazást a http://localhost:3000 segítségével, ahol a következő webhelynek az Ön által előnyben részesített böngészőben kell megnyílnia. Válassza ki a kiszolgáló- és API-útvonalak meghívásához szükséges gombokat.

Az Nuxt 3-webhely ü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 azt az alkalmazás GitHubról való üzembe helyezéséhez.

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. Statikus webalkalmazások keresése.

4. Válassza a Static Web Apps lehetőséget.

5. Válassza a Create gombot.

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-nuxtjs-group
   Név	my-nuxt3-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 ki a korábban létrehozott adattárat.
   Fiók	Válassza ki a fő elemet.

9. A Build Details (Build részletei) szakaszban válassza az Egyéni lehetőséget a Build-előbeállítások legördülő listából, és hagyja meg az alapértelmezett értékeket.

10. Írja be a mezőbe az /.

11. Írja be a .output/server kifejezést az Api-helyre mezőbe.

12. A Kimenet helyre í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 , ha ellenőrizni szeretné, hogy a részletek helyesek-e.

2. A Létrehozás gombra kattintva elindíthatja a statikus webalkalmazást, és üzembe helyezhet 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 Á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 futó 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 az Azure Static Web Apps létrehozott egy GitHub Actions-munkafolyamatfá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. A GitHub Actions automatikusan létrehozza és üzembe helyezi az alkalmazást.

További információkért tekintse meg az Azure Static Web Apps Nuxt 3 üzembe helyezési előre beállított dokumentációját.

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