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

  • 發行項

在本教學課程中，瞭解如何將Next.js產生的靜態網站部署至Azure Static Web Apps。 如需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 Static Web Apps。 在 Azure 中，您可以將應用程式部署至生產環境。

  1. 移至 Azure 入口網站。

  2. 選取 [建立資源]。

  3. 搜尋 Static Web Apps。

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

  5. 選取 [建立]。

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

    屬性 值
    訂用帳戶 您的 Azure 訂用帳戶名稱。
    資源群組 my-nextjs-group
    名稱 my-nextjs-app
    方案類型 免費
    Azure Functions API 和預備環境的區域 選取最接近您的區域。
    來源 GitHub

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

  8. 輸入下列 GitHub 值。

    屬性 值
    組織 選取適當的 GitHub 組織。
    存放庫 選取 nextjs-starter。
    分支 選取 [主要]。

  9. 在 [建置詳細資料]區段中，從 [建置預設] 中選取[自訂]。 針對組建組態新增下列值。

    屬性 值
    應用程式位置 在方塊中輸入 /。
    API 位置 將此方塊保留空白。
    輸出位置 在方塊中輸入 。

3.檢閱並建立

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

  2. 選取[建立] 以開始建立App Service靜態 Web 應用程式，並布建部署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. 選取 [是 ] 以確認刪除動作。

下一步

設定自訂網域