将 Next.js 应用程序部署到 Amplify Hosting - AWS Amplify 托管
步骤 1：连接存储库步骤 2：确认构建设置第 3 步：部署应用程序步骤 4：（可选）清理资源为应用程序添加功能

将 Next.js 应用程序部署到 Amplify Hosting

本教程将为您详细介绍从 Git 存储库构建和部署 Next.js 应用程序的过程。

开始本教程之前，请完成以下先决条件。

注册 AWS 账户

如果您还不是 AWS 客户，则需要按照在线说明创建一个 AWS 账户。注册之后，您就能够访问 Amplify 以及您可能需要配合应用程序一起使用的其他 AWS 服务。

创建应用程序

使用《Next.js 文档》中的 create-next-app 指令创建一个基本的 Next.js 应用程序，以用于本教程。

创建 Git 存储库

Amplify 支持 GitHub、Bitbucket、GitLab 和 AWS CodeCommit。将 create-next-app 应用程序推送到 Git 存储库。

步骤 1：连接 Git 存储库

在此步骤中，您将 Git 存储库中的 Next.js 应用程序连接到 Amplify Hosting。

将应用程序连接到 Git 存储库

  1. 打开 Amplify 控制台。

  2. 如果您要在当前区域中部署第一个应用程序，则默认情况下，您将从 AWS Amplify 服务页面开始。

    在页面的顶部选择创建新应用程序。

  3. 在开始使用 Amplify 进行构建页面中选择您的 Git 存储库提供商，然后选择下一步。

    对于 GitHub 存储库，Amplify 使用 GitHub 应用程序功能来授权 Amplify 访问权限。有关安装和授权 GitHub 应用程序的更多信息，请参阅 设置 Amplify 对 GitHub 存储库的访问权限。

    注意

    使用 Bitbucket、GitLab 或 AWS CodeCommit 授权 Amplify 控制台后，Amplify 会从存储库提供商处获取访问令牌，但不会将令牌存储在 AWS 服务器上。Amplify 仅使用安装在特定存储库中的部署密钥访问存储库。

  4. 在添加存储库分支页面上，执行以下操作：

    1. 选择需要连接的存储库的名称。

    2. 选择需要连接的存储库分支的名称。

    3. 选择下一步。

步骤 2：确认构建设置

Amplify 将自动检测要为您部署的分支运行的构建命令序列。在此步骤中，您将审核并确认构建设置。

确认应用程序构建设置的方法

  1. 在应用程序设置页面中找到构建设置部分。

    验证前端构建命令和构建输出目录是否正确。对于此 Next.js 示例应用程序，构建输出目录设置为 .next。

  2. 添加服务角色的过程会有所不同，具体取决于您要创建新角色还是使用现有角色。

    • 若要创建新角色：

      1. 请选择创建和使用新的服务角色。

    • 若要使用现有角色：

      1. 选择使用现有角色。

      2. 在服务角色列表中选择要使用的角色。

  3. 选择下一步。

第 3 步：部署应用程序

在此步骤中，您要将应用程序部署到 AWS 全球内容分发网络（CDN）。

保存和部署应用程序

  1. 在审核页面上，确认您的存储库详细信息和应用程序设置正确无误。

  2. 选择保存并部署。您的前端构建通常需要 1 到 2 分钟，但可能因应用程序大小而异。

  3. 完成部署时，您可以使用 amplifyapp.com 默认域链接查看应用程序。

注意

为增强 Amplify 应用程序的安全性，已将 amplifyapp.com 域注册到公共后缀列表 (PSL)。为进一步增强安全性，如果您需要在 Amplify 应用程序的默认域名中设置敏感 Cookie，我们建议您使用带 __Host- 前缀的 Cookie。这将有助于保护您的域，防范跨站点请求伪造 (CSRF) 攻击。要了解更多信息，请参阅 Mozilla 开发者网络中的 Set-Cookie 页面。

步骤 4：（可选）清理资源

如果不再需要为本教程部署的应用程序，您可以将其删除。此步骤有助于确保不会为未使用的资源付费。

删除应用程序的方法

  1. 在导航窗格中的应用程序设置菜单中，选择常规设置。

  2. 在常规设置页面上选择删除应用程序。

  3. 在确认窗口中，输入 delete。然后选择删除应用程序。

为应用程序添加功能

现在，您已经将一个应用程序部署到了 Amplify，您可以探索托管应用程序可用的以下功能。

环境变量

应用程序通常在运行时需要配置信息。这些配置可以是数据库连接详细信息、API 密钥或参数。环境变量提供了在构建时公开这些配置的方法。有关更多信息，请参阅 Environment variables。

自定义域

在本教程中，Amplify 将您的应用托管在默认 amplifyapp.com 域上，URL 示例：https://branch-name.d1m7bkiki6tdw1.amplifyapp.com。当您将应用程序连接到自定义域时，用户会看到您的应用程序托管在自定义网址上，例如 https://www.example.com。有关更多信息，请参阅设置自定义域。

拉取请求的预览

Web 拉取请求预览为团队提供了一种方法，可在将代码合并到生产或集成分支之前预览拉取请求（PR）中的变更。有关更多信息，请参阅拉取请求的 Web 预览。

管理多个环境

如需了解 Amplify 如何使用功能分支和 GitFlow 工作流程来支持多个部署，请参阅功能分支部署和团队工作流程。