共用方式為

在 Azure 靜態 Web Apps 上部署靜態轉譯的 Next.js 網站

在本教學課程中，瞭解如何將 Next.js 產生的靜態網站部署至 Azure 靜態 Web 應用程式。 如需有關 Next.js 的特定資訊，請參閱 入門範本的說明文件。

先決條件

1. 設定 Next.js 應用程式

您可以使用入門儲存庫，而不是使用 Next.js CLI 來建立應用程式。 入門儲存庫包含支援動態路由的現有 Next.js 應用程式。

若要開始，請從範本存放庫在您的 GitHub 帳戶下建立新的存放庫。

  1. 移至 https://github.com/staticwebdev/nextjs-starter/generate。

  2. 將儲存庫命名為 nextjs-starter

  3. 接下來，將新的存放庫複製到您的電腦。 請務必將 <YOUR_GITHUB_ACCOUNT_NAME> 替換成您的帳戶名稱。

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

  4. 轉到新克隆的 Next.js 應用程序。

    cd nextjs-starter

  5. 安裝依賴項目。

    npm install

  6. 啟動 Next.js 開發中的應用程式。

    npm run dev

  7. 轉到 http://localhost:3000 打開應用程序，您應該會在其中看到以下網站在您喜歡的瀏覽器中打開：

啟動 Next.js 應用程式

當您選取架構或程式庫時，您會看到所選項目的詳細資料頁面：

詳細資料頁面

2. 建立靜態應用程式

下列步驟示範如何將應用程式連結至 Azure 靜態 Web 應用程式。 進入 Azure 之後，您可以將應用程式部署至生產環境。

  1. 前往 Azure 入口網站。

  2. 選取 [建立資源]。

  3. 搜尋 靜態 Web 應用程式。

  4. 選取 [靜態 Web 應用程式]。

  5. 選取 ，創建。

  6. 在 [基本] 索引標籤中，輸入下列值。

    房產 價值觀
    Subscription 您的 Azure 訂用帳戶名稱。
    資源群組 我的下一個NextJS群組
    名稱 我的下一個js-app
    方案類型 免費
    Azure Functions API 和暫存環境的區域 選取最靠近您的區域。
    來源 GitHub

  7. 如果出現提示，請選取 [使用 GitHub 登入 並使用 GitHub 進行驗證]。

  8. 輸入下列 GitHub 值。

    房產 價值觀
    組織 選取適當的 GitHub 組織。
    Repository 選取 nextjs-starter。
    分支 選取 [主要]。

  9. 在 建置詳細資料 區段中，從建置預設集中選取自訂。 新增下列值，以作為組建組態。

    房產 價值觀
    應用程式位置 在方塊中輸入 / 。
    API 位置 將此方塊留空。
    輸出位置 在框中輸入out。

3. 審查和創建

  1. 選取 [檢閱 + 建立] 以驗證詳細資料都正確。

  2. 選取 [建立] 以開始建立 App Service Static Web Apps，並佈建 GitHub Actions 以進行部署。

  3. 部署完成後，選取 移至資源。

  4. 在 概 觀 視窗中，選取 URL 連結以開啟已部署的應用程式。

如果網站未立即載入，則建置仍在執行中。 若要檢查「動作」工作流程的狀態，請導覽至存放庫的「動作」儀表板：

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

工作流程完成後，您可以重新載入瀏覽器以檢視您的 Web 應用程式。

只要對main分支進行變更，就會開始網站新的建置和部署。

4. 同步更改

當您建立應用程式時，Azure Static Web Apps 會在存放庫中建立 GitHub Actions 檔案。 通過拉取最新的更新到本地存儲庫來與伺服器同步。

返回終端機並執行以下命令 git pull origin main。

設定靜態渲染

根據預設，應用程式會被視為混合式轉譯的 Next.js 應用程式，但若要繼續將其用作靜態網站產生器，您必須更新部署工作。

  1. 在 Visual Studio Code 中開啟存放庫。

  2. 流覽至 Azure Static Web Apps 新增至存放庫的 GitHub Actions 檔案，網址為 .github/workflows/azure-static-web-apps-<your site ID>.yml

  3. 更新建 置和部署 作業，將環境變數 IS_STATIC_EXPORT 設定為 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. 將變更提交至 git，並將其推送至 GitHub。

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

建置完成後，網站將以靜態方式呈現。

清理資源

如果您不打算繼續使用此應用程式，您可以透過下列步驟刪除 Azure Static Web Apps 執行個體。

  1. 開啟 Azure 入口網站。
  2. 從頂端搜尋列搜尋 my-nextjs-group 。
  3. 選取群組名稱。
  4. 選擇 刪除。
  5. 選取 [ 是 ] 以確認刪除動作。

後續步驟

設定自訂網域

  • Last updated on