通过

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

在 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 静态 Web 应用。 在 Azure 中，可以将应用程序部署到生产环境。

  1. 转到 Azure 门户。

  2. 选择“创建资源”。

  3. 搜索“静态 Web 应用”。

  4. 选择“静态 Web 应用”。

  5. 选择“创建”。

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

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

  7. 在系统提示时，选择“使用 GitHub 登录”，然后向 GitHub 进行身份验证。

  8. 输入以下 GitHub 值。

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

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

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

3. 查看和创建

  1. 选择“查看 + 创建”，以验证详细信息是否全部正确。

  2. 选择“创建”，开始创建应用服务静态 Web 应用并为部署预配 GitHub Actions。

  3. 部署完成后，请选择“转到资源”。

  4. 在“概述”窗口中，选择 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 应用程序，但要继续将其用作静态站点生成器，需要更新部署任务。

  1. 在 Visual Studio Code 中打开存储库。

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

  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 静态 Web 应用实例。

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

后续步骤

设置自定义域