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

Statikus renderelt Next.js-webhelyek üzembe helyezése az Azure Static Web Appsben

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

Előfeltételek

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

Ahelyett, hogy a 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.

Először hozzon létre egy új adattárat a GitHub-fiókja alatt egy sablontárházból.

  1. Ugrás a https://github.com/staticwebdev/nextjs-starter/generate

  2. Adja meg az adattár nevét: nextjs-starter

  3. Ezután klónozza az új adattárat a gépére. Győződjön meg róla, hogy lecseréli a <YOUR_GITHUB_ACCOUNT_NAME> a saját fiók nevére.

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

Next.js alkalmazás indítása

Amikor kiválaszt egy keretrendszert vagy tárat, megjelenik egy részletoldal a kijelölt elemről:

Részletek lap

2. Statikus alkalmazás létrehozása

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

  1. Nyissa meg az Azure Portalt.

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

  3. Statikus webalkalmazások keresése.

  4. Válassza a Statikus webalkalmazás 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-nextjs-group
    Név my-nextjs-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. Ha a rendszer kéri, 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 megfelelő GitHub-szervezetet.
    Adattár Válassza a nextjs-starter lehetőséget.
    Fiók Válassza ki a fő elemet.

  9. A Build részletei szakaszban válassza az Egyéni lehetőséget az Előre beállított buildek közül. Adja hozzá a következő értékeket a buildkonfigurációhoz.

    Ingatlan Érték
    Alkalmazás helye Írja be / a mezőbe.
    Api helye Hagyja üresen ezt a mezőt.
    Kimeneti hely Írja out a mezőbe.

3. Á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. Miután az üzembe helyezés befejeződött, lépjen az erőforrásra.

  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 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.

Most az main ágon végrehajtott módosítások új buildet és üzembe helyezést indítanak el a webhelyen.

4. Szinkronizálási módosítások

Az alkalmazás létrehozásakor az Azure Static Web Apps létrehozott egy GitHub Actions-fájlt az adattárban. Szinkronizálás a szerverrel úgy, hogy lehúzza a legfrissebb változatot a helyi adattárba.

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. Keresse meg az Azure Static Web Apps által az adattárhoz hozzáadott GitHub Actions-fájlt a következő helyen: .github/workflows/azure-static-web-apps-<your site ID>.yml

  3. Frissítse a 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.

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 Apps-példányt.

  1. Nyissa meg az Azure Portalt.
  2. A felső keresősávban keresse meg a my-nextjs-group kifejezést.
  3. Válassza ki a csoport nevét.
  4. Válassza a Törlés lehetőséget.
  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

  • Last updated on