对 SSR 框架的 Amplify 支持 - AWS Amplify 托管
将 SSR 应用程序部署到 Amplify使用框架适配器

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

对 SSR 框架的 Amplify 支持

Amplify Hosting 支持任何 JavaScript 基于 SSR 框架，其部署包符合 Amplify 期望的构建输出。Amplify Hosting 提供了部署规范，该规范对任何 SSR 框架的应用程序构建输出文件和目录结构进行了标准化。

框架作者可以使用基于文件系统的部署规范来开发针对其特定框架定制的开源构建适配器。这些适配器会将应用程序的构建输出转换为符合 Amplify Hosting 预期目录结构的部署包。此部署包将包含托管应用程序所需的所有必要文件和资产，包括运行时配置，例如路由规则。

如果您没有使用框架或框架适配器，则可以开发自己的解决方案来生成符合 Amplify Hosting 预期目录结构的部署包。

Amplify Hosting 支持以下原始类型：静态资产、计算、图像优化和路由规则。您可以利用这些原始类型来部署功能更丰富的应用程序。有关每种基元类型的详细信息，请参见Amplify SSR 基元类型支持。

您可以从以下场景中进行选择，开始将 SSR 应用程序部署到 Amplify。

部署 Next.js 应用程序

Amplify 支持使用 Next.js 创建的应用程序，无需在控制台中使用适配器或手动配置。有关更多信息，请参阅 Amplify 对 Next.js 的支持。

部署使用框架适配器的应用程序

您可以参考任何可用的开源框架适配器，将 SSR 应用程序部署到 Amplify Hosting。有关更多信息，请参阅 使用框架适配器。

Nuxt 框架有一个适配器可用。有关使用此适配器的更多信息，请参阅 Nuxt 文档。

构建框架适配器

想要集成框架提供的功能的框架作者可以使用 Amplify Hosting 部署规范来配置您的构建输出，使其符合 Amplify 期望的结构。有关更多信息，请参阅 使用部署清单部署 Express 服务器。

配置构建后脚本

您可以根据特定场景的需要使用 Amplify Hosting 部署规范来操作构建输出。有关更多信息，请参阅使用 Amplify Hosting 部署规范配置构建输出。有关示例，请参阅使用部署清单部署 Express 服务器。

将 SSR 应用程序部署到 Amplify

您可以使用本主题中的说明来部署使用任何框架创建的应用程序，该框架具有符合 Amplify 期望的构建输出的部署包。如果您正在部署 Next.js 应用程序，则不需要适配器。

如果您正在部署使用框架适配器的 SSR 应用程序，则必须首先安装和配置适配器。有关说明，请参阅使用框架适配器。

将 SSR 应用程序部署到 Amplify Hosting

  1. 登录 AWS Management Console 并打开 Amplify 控制台。

  2. 在所有应用程序页面上，选择创建新应用程序。

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

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

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

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

    3. 选择下一步。

  5. 在应用程序设置页面上，Amplify 会自动检测 Next.js SSR 应用程序。

    如果您要部署的 SSR 应用程序使用其他框架的适配器，则必须明确启用 Amazon CloudWatch Logs。打开高级设置部分，然后在服务器端渲染 (SSR) 部署部分中选择启用 SSR 应用程序日志。

  6. 该应用程序需要一个 Amplify 代入的 IAM 服务角色来向 AWS 账户传送日志。

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

    • 要创建新角色，请执行以下操作：

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

    • 要使用现有角色，请执行以下操作：

      1. 选择 “使用现有角色”。

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

  7. 选择下一步。

  8. 在查看页面上，选择保存并部署。

使用框架适配器

您可以安装和使用为与 Amplify Hosting 集成而创建的任何 SSR 框架构建适配器。每个提供适配器的框架都决定了该适配器的配置方式以及如何连接到其构建过程。通常，您会将适配器作为 npm 开发依赖项进行安装。

使用框架创建应用程序后，请使用该框架的文档来学习如何安装 Amplify Hosting 适配器并在应用程序的配置文件中对其进行配置。

接下来，在项目的根目录中创建一个 amplify.yml 文件。在 amplify.yml 文件中，将 baseDirectory 设置为应用程序的构建输出目录。框架在构建过程中运行适配器，将输出转换为 Amplify Hosting 部署包。

构建输出目录的名称可以是任何名称，但 .amplify-hosting 文件名有具体意义。Amplify 首先会查找一个定义为 baseDirectory 的目录。如果存在，Amplify 会在那里查找构建输出。如果目录不存在，Amplify 会在 .amplify-hosting 中查找构建输出，即使客户尚未定义该输出也是如此。

以下是应用程序的构建设置示例。将 baseDirectory 设置为 .amplify-hosting 表示构建输出位于 .amplify-hosting 文件夹中。只要 .amplify-hosting 文件夹的内容符合 Amplify Hosting 部署规范，应用程序就会成功部署。

version: 1
frontend:
  preBuild:
    commands:
      - npm install
  build:
    commands:
      - npm run build
  artifacts:
    baseDirectory: .amplify-hosting

将您的应用程序配置为使用框架适配器后，您可以将其部署到 Amplify Hosting。有关详细说明，请参阅 将 SSR 应用程序部署到 Amplify