将 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 授权 Amplify 控制台之后，或 GitLab AWS CodeCommit，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当您将应用程序连接到自定义网域时，用户会看到您的应用程序托管在自定义网域上URL，例如https://www.example.com。有关更多信息，请参阅设置自定义域名。

拉取请求的预览

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

管理多个环境

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