你当前正在访问 Microsoft Azure Global Edition 技术文档网站。如果需要访问由世纪互联运营的 Microsoft Azure 中国技术文档网站，请访问 https://docs.azure.cn。

在 Azure Static Web Apps 中部署静态呈现的 Next.js 网站

2023-06-01

本教程介绍如何将 Next.js 生成的静态网站部署到 Azure Static Web Apps。有关 Next.js 细节的详细信息，请参阅初学者模板自述文件。

先决条件

具有活动订阅的 Azure 帐户。免费创建帐户。
一个 GitHub 帐户。免费创建帐户。
安装 Node.js。

1. 安装 Next.js 应用

无需使用 Next.js CLI 创建应用，可以使用初学者存储库。初学者存储库包含支持动态路由的现有 Next.js 应用。

首先通过 GitHub 帐户从模板存储库创建新的存储库。

转到 https://github.com/staticwebdev/nextjs-starter/generate
将存储库命名为 nextjs-starter
接下来，将新存储库克隆到计算机。确保将 <YOUR_GITHUB_ACCOUNT_NAME> 替换为你的帐户名称。
```
git clone http://github.com/<YOUR_GITHUB_ACCOUNT_NAME>/nextjs-starter
```
转到新克隆的 Next.js 应用。
```
cd nextjs-starter
```
安装依赖项。
```
npm install
```
在开发环境中启动 Next.js 应用。
```
npm run dev
```
转到 http://localhost:3000，打开应用，应看到在首选的浏览器中打开了下面的网站：

启动 Next.js 应用

选择框架或库时，会看到已选定项的详细信息页：

详细信息页

2. 创建静态应用

以下步骤演示如何将应用链接到 Azure 静态 Web 应用。在 Azure 中，可以将应用程序部署到生产环境。

转到 Azure 门户。
选择“创建资源”。
搜索“静态 Web 应用”。
选择“静态 Web 应用”。
选择“创建”。

在“基本信息”选项卡上，输入下列值。

属性	值
订阅	Azure 订阅名称。
资源组	my-nextjs-group
名称	my-nextjs-app
计划类型	免费
Azure Functions API 和过渡环境的区域	选择离你最近的区域。
Source	GitHub

在系统提示时，选择“使用 GitHub 登录”，然后向 GitHub 进行身份验证。
输入以下 GitHub 值。

属性值

组织选择相应的 GitHub 组织。

存储库选择 nextjs-starter。

分支选择“主要”。
在“生成详细信息”部分，从“生成预设”下拉中选择“自定义”。添加以下值用于生成配置。

属性值

应用位置在框中输入 /。

API 位置将此框留空。

输出位置在框中输入 out。

属性	值
组织	选择相应的 GitHub 组织。
存储库	选择 nextjs-starter。
分支	选择“主要”。

属性	值
应用位置	在框中输入 /。
API 位置	将此框留空。
输出位置	在框中输入 out。

3. 查看和创建

选择“查看 + 创建”，以验证详细信息是否全部正确。
选择“创建”，开始创建应用服务静态 Web 应用并为部署预配 GitHub Actions。
部署完成后，请选择“转到资源”。
在“概述”窗口中，选择 URL 链接，打开已部署的应用程序。

如果网站未立即加载，则生成仍在运行。若要检查 Actions 工作流的状态，请导航到存储库的 Actions 仪表板：

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

工作流完成后，可以刷新浏览器以查看 Web 应用。

现在，对 main 分支进行的任何更改都会启动新的网站生成和部署。

4. 同步更改

创建应用后，Azure 静态 Web 应用在存储库中创建了 GitHub Actions 文件。通过将最新内容拉取到本地存储库，与服务器同步。

返回终端并运行以下命令：git pull origin main。

配置静态呈现

默认情况下，应用程序被视为混合呈现的 Next.js 应用程序，但要继续将其用作静态站点生成器，需要更新部署任务。

在 Visual Studio Code 中打开存储库。
在 .github/workflows/azure-static-web-apps-<your site ID>.yml 导航到 Azure Static Web Apps 添加到存储库的 GitHub Actions 文件

更新“生成并部署”作业，将环境变量 IS_STATIC_EXPORT 设置为 true：

GitHub Actions
Azure Pipelines

    - 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

    - task: AzureStaticWebApp@0
      inputs:
        azure_static_web_apps_api_token: $(AZURE_STATIC_WEB_APPS_TOKEN)
        ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
        # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
        app_location: "/" # App source code path
        api_location: "" # Api source code path - optional
        output_location: "" # Built app content directory - optional
        is_static_export: true # For running Static Next.js file - optional

将更改提交到 git 并将其推送到 GitHub。

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

生成完成后，站点将静态呈现。

清理资源

如果不打算继续使用此应用，可按以下步骤删除 Azure 静态 Web 应用实例。

打开 Azure 门户。
在顶部搜索栏中搜索“my-nextjs-group”。
选择组名称。
选择“删除”。
选择“是”以确认删除操作。

后续步骤

设置自定义域

通过