Statikus renderelt Next.js webhelyek üzembe helyezése Azure Static Web Apps

  • Cikk

Ebből az oktatóanyagból megtudhatja, hogyan helyezhet üzembe egyNext.js létrehozott statikus webhelyet Azure Static Web Apps. A Next.js jellemzőiről a kezdősablon-olvasóban talál további információt.

Előfeltételek

1. Next.js-alkalmazás beállítása

Ahelyett, hogy az Next.js parancssori felületét használva hozza létre az alkalmazást, használhat egy kezdő adattárat. A kezdő adattár egy meglévő Next.js alkalmazást tartalmaz, amely támogatja a dinamikus útvonalakat.

Első lépésként hozzon létre egy új adattárat a GitHub-fiókja alatt egy sablonadattárból.

  1. Nyissa meg a következőt: https://github.com/staticwebdev/nextjs-starter/generate

  2. Az adattár neve nextjs-starter

  3. Ezután klónozza az új adattárat a gépére. Ügyeljen arra, hogy a helyére <YOUR_GITHUB_ACCOUNT_NAME> írja be a fióknevét.

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

  4. Nyissa meg az újonnan klónozott Next.js alkalmazást.

    cd nextjs-starter

  5. Telepítse a függőségeket.

    npm install

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

    npm run dev

  7. http://localhost:3000 Nyissa meg az alkalmazást, ahol a következő webhelynek kell megjelennie az előnyben részesített böngészőben:

Alkalmazás indítása Next.js

Amikor kiválaszt egy keretrendszert vagy tárat, megjelenik a kijelölt elem részletes lapja:

Részletek lap

2. Statikus alkalmazás létrehozása

Az alábbi lépések bemutatják, hogyan kapcsolhatja az alkalmazást Azure Static Web Apps. Az Azure-ban üzembe helyezheti az alkalmazást egy éles környezetben.

  1. Nyissa meg az Azure Portal.

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

  3. Keresse meg a Static Web Apps.

  4. Válassza a Statikus webalkalmazás lehetőséget.

  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-nextjs-group
    Név my-nextjs-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 ha a rendszer kéri, hitelesítse a GitHubot.

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

    Tulajdonság Érték
    Szervezet Válassza ki a megfelelő GitHub-szervezetet.
    Adattár Válassza a nextjs-starter lehetőséget.
    Á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 (Összeállítási készletek) területen. Adja hozzá a következő értékeket a buildkonfigurációhoz.

    Tulajdonság Érték
    Alkalmazás helye Írja be / a mezőbe.
    API helye Hagyja üresen ezt a mezőt.
    Kimeneti hely Írja be a mezőbe.

3. Á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 Á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, a build továbbra is fut. A Műveletek munkafolyamat állapotának ellenőrzéséhez lépjen az adattár Műveletek irányítópultjára:

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

A munkafolyamat befejezése után frissítheti a böngészőt a webalkalmazás megtekintéséhez.

A ágon végrehajtott módosítások most megkezdik a main webhely új buildjének és üzembe helyezésének megkezdését.

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

Az alkalmazás létrehozásakor Azure Static Web Apps létrehozott egy GitHub Actions fájlt az adattárban. Szinkronizálás a kiszolgálóval a legújabb helyi adattár lekérésével.

Térjen vissza a terminálhoz, és futtassa a következő parancsot git pull origin main.

Statikus renderelés konfigurálása

Alapértelmezés szerint az alkalmazás hibrid renderelt Next.js alkalmazásként van kezelve, de ha statikus helygenerátorként szeretné használni, frissítenie kell az üzembe helyezési feladatot.

  1. Nyissa meg az adattárat a Visual Studio Code-ban.

  2. Lépjen az adattárhoz Azure Static Web Apps GitHub Actions fájlhoz a következő címen:.github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Frissítse a Build and Deploy (Build and Deploy ) feladatot úgy, hogy a környezeti változó értéke IS_STATIC_EXPORT a következő legyen true:

        - name: Build And Deploy
        id: swa
        uses: azure/static-web-apps-deploy@latest
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_TOKEN }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for GitHub integrations (i.e. PR comments)
          action: "upload"
          app_location: "/" # App source code path
          api_location: "" # Api source code path - optional
          output_location: "" # Built app content directory - optional
        env: # Add environment variables here
          IS_STATIC_EXPORT: true

  4. Véglegesítse a git módosításait, és küldje el őket a GitHubra.

    git commit -am "Configuring static site generation" && git push

A build befejezése után a webhely statikusan lesz renderelve.

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

Ha nem folytatja az alkalmazás használatát, az alábbi lépések végrehajtásával törölheti a Azure Static Web Apps példányt.

  1. Nyissa meg az Azure Portalt.
  2. Keressen rá a my-nextjs-group kifejezésre a felső keresősávon.
  3. Válassza ki a csoport nevét.
  4. Válassza a Törlés elemet.
  5. A törlési művelet megerősítéséhez válassza az Igen lehetőséget.

Következő lépések

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