本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

# 将 Next.js 应用程序部署到 Amplify Hosting
<a name="getting-started-next"></a>

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

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

**注册获取 AWS 账户**  
如果您还不是 AWS 客户，则需要按照在线说明进行[创建](https://portal.aws.amazon.com/billing/signup#/start/email)。 AWS 账户注册后，您就可以访问 Amplify 和其他可与您的应用程序配合使用的 AWS 服务。

**创建 应用程序**  
按照 *Next.js 文档*中的[create-next-app](https://nextjs.org/docs/app/api-reference/create-next-app)说明，创建用于本教程的基本 Next.js 应用程序。

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

## 步骤 1：连接 Git 存储库
<a name="step-1-connect-repository"></a>

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

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

1. 打开 [Amplify 控制台](https://console.aws.amazon.com/amplify/)。

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

   选择页面顶部的**部署应用程序**。

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

   对于 GitHub 存储库，Amplify 使用 GitHub 应用程序功能来授权 Amplify 访问权限。有关安装和授权 GitHub应用程序的更多信息，请参阅[设置 Amplify 对仓库的访问权限 GitHub](setting-up-GitHub-access.md)。
**注意**  
在你使用 Bitbucket、 GitLab、或 Amplify 控制台授权后， AWS CodeCommit Amplify 会从存储库提供者那里获取访问令牌，但它*不会将该令牌存储*在服务器上。 AWS Amplify 仅使用安装在特定存储库中的部署密钥访问存储库。

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

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

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

   1. 选择**下一步**。

## 步骤 2：确认构建设置
<a name="step-2a-confirm-build-settings-for-the-front-end"></a>

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

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

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

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

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

     1. 请选择**创建和使用新的服务角色**。
   + 若要使用现有角色：

     1. 选择**使用现有角色**。

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

1. 选择**下一步**。

## 第 3 步：部署应用程序
<a name="step-3-save-and-deploy"></a>

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

**保存和部署应用程序**

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

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

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

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

## 步骤 4：（可选）清理资源
<a name="step-4-clean-up"></a>

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

**删除应用程序的方法**

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

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

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

## 为应用程序添加功能
<a name="next-steps"></a>

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

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

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

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

**管理多个环境**  
要了解 Amplify 如何使用功能分支和 GitFlow 工作流程来支持多个部署，请参阅[功能分支部署和团队](multi-environments.md)工作流程。