通过

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

在 Azure 静态 Web 应用上部署静态呈现 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 订阅名称。
    资源组 my-nextjs-group
    名称 my-nextjs-app
    计划类型 免费
    Azure Functions API 和过渡环境的区域 选择离你最近的区域。
    来源 GitHub

  7. 如果出现提示，请选择 “使用 GitHub 登录 ”并使用 GitHub 进行身份验证。

  8. 输入以下 GitHub 值。

    资产 价值
    组织 选择相应的 GitHub 组织。
    Repository 选择 nextjs-starter。
    分支 选择main。

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

    资产 价值
    应用位置 在框中输入 / 。
    API 位置 将此框留空。
    输出位置 在框中输入 out。

3. 审查和创建

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

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

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

  4. 在“ 概述 ”窗口中，选择 URL 链接以打开已部署的应用程序。

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

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. 选择 “是 ”以确认删除作。

后续步骤

设置自定义域