SSR支持的功能 - AWS Amplify 托管
Node.js 版本支持 Next.js 应用程序SSR应用程序的图像优化SSR应用程序的 Amazon CloudWatch 日志Amplify Next.js 11 支持 SSR

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

SSR支持的功能

本节提供有关 Amplify 对SSR功能的支持的信息。

Amplify 提供 Node.js 版本支持，可匹配用于构建应用程序的 Node.js 版本。

Amplify 提供了支持所有SSR应用程序的内置图像优化功能。如果您不想使用默认图像优化功能，则可以实现自定义图像优化加载程序。

Node.js 版本支持 Next.js 应用程序

当 Amplify 构建和部署 Next.js 计算应用程序时，它会使用 Node.js 与主版本匹配的运行时版本 Node.js 那是用来构建应用程序的。

你可以指定 Node.js 要在 Amplify 控制台的 Live 包覆盖功能中使用的版本。有关配置实时包更新的更多信息，请参阅在构建映像中使用特定程序包和依赖项版本。您也可以指定 Node.js 使用其他机制进行版本，例如 nvm 命令。如果未指定版本，Amplify 默认使用 Amplify 构建容器使用的当前版本。

SSR应用程序的图像优化

Amplify Hosting 提供了支持所有SSR应用程序的内置图像优化功能。借助 Amplify 的图像优化，您可以为访问这些图像的设备提供格式、尺寸和分辨率正确的高质量图像，同时保持尽可能小的文件大小。

目前，您可以使用 Next.js Image 组件按需优化图像，也可以实施自定义图像加载器。如果您使用的是 Next.js 13 或更高版本，则无需采取任何进一步措施即可使用 Amplify 的图像优化功能。如果您正在实现自定义加载程序，请参阅下面的使用自定义图像加载程序主题。

使用自定义图像加载器

如果您使用自定义图像加载器，Amplify 会检测到应用程序 next.config.js 文件中的加载器，并且不会使用内置的图像优化功能。有关 Next.js 支持的自定义加载器的更多信息，请参阅 Next.js Image 文档。

SSR应用程序的 Amazon CloudWatch 日志

Amplify 会将有关您的SSR运行时间的信息发送到您的 Amazon CloudWatch Logs。 AWS 账户部署应用程序时，该SSR应用程序需要一个IAM服务角色，Amplify 在代表您调用其他服务时扮演该角色。您可以允许 Amplify Hosting 计算自动为您创建服务角色，也可以指定您已创建的角色。

如果您选择允许 Amplify 为您创建IAM角色，则该角色将已经拥有创建 CloudWatch 日志的权限。如果您创建自己的IAM角色，则需要在策略中添加以下权限以允许 Amplify 访问亚马逊 CloudWatch 日志。

logs:CreateLogStream
logs:CreateLogGroup
logs:DescribeLogGroups
logs:PutLogEvents

有关服务角色的更多信息，请参阅 向 Amplify 应用程序添加服务角色。

Amplify Next.js 11 支持 SSR

如果你在 2022 年 11 月 17 日 Amplify Hosting 计算版发布之前在 Amplify 上部署了 Next.js 应用程序，那么你的应用程序使用的是 Amplify 之前的SSR提供商 Classic（仅限 Next.js 11）。本节中的文档仅适用于使用 Classic（仅限 Next.js 11）SSR提供程序部署的应用程序。

注意

我们强烈建议你将 Next.js 11 应用程序迁移到 Amplify Hosting 计算托管提供商。SSR有关更多信息，请参阅 将 Next.js 11 SSR 应用程序迁移到 Amplify Hosting 计算系统。

以下列表描述了 Amplify Classic（仅限 Next.js 11）SSR提供程序支持的具体功能。

支持的特征

  • 服务器端渲染的页面 () SSR

  • 静态页面

  • API路线

  • 动态路由

  • 捕获所有路由

  • SSG（静态生成）

  • 增量静态再生 (ISR)

  • 国际化 (i18n) 子路径路由

  • 环境变量

不支持的 特征

  • 图像优化

  • 按需增量静态再生 (ISR)

  • 国际化 (i18n) 域名路由

  • 国际化 (i18n) 自动区域检测

  • 中间件

  • 边缘中间件

  • 边缘API路由

Next.js 11 SSR 应用程序的定价

在部署 Next.js 11 SSR 应用程序时，Amplify 会在您的 AWS 账户中创建额外的后端资源，包括：

  • Amazon Simple Storage Service (Amazon S3) 存储桶，为应用程序的静态资产存储资源。有关 Amazon S3 的费用信息，请参阅 Amazon S3 定价。

  • 用于为应用程序提供服务的Amazon CloudFront 发行版。有关 CloudFront 费用的信息，请参阅 Amazon CloudFront 定价。

  • 四个 Lambda @Edge 函数用于自定义所 CloudFront 提供的内容。

AWS Identity and Access Management Next.js 11 SSR 应用程序的权限

Amplify 需要 AWS Identity and Access Management (IAM) 权限才能部署应用程序。SSR如果没有所需的最低权限，则在尝试部署SSR应用程序时会出现错误。要向 Amplify 提供所需的权限，您必须指定服务角色。

要创建 A IAM mplify 在代表你调用其他服务时扮演的服务角色，请参阅。向 Amplify 应用程序添加服务角色这些说明演示了如何创建一个附加 AdministratorAccess-Amplify 托管策略的角色。

AdministratorAccess-Amplify托管策略提供对多种 AWS 服务（包括IAM操作）的访问权限。应将其视为与该AdministratorAccess策略一样强大。此策略提供的权限超过了部署SSR应用程序所需的权限。

建议您遵循以下最佳实践授予最低权限并减少授予服务角色的权限。您可以创建自己的客户托管IAM策略，仅授予部署SSR应用程序所需的权限，而不必向您的服务角色授予管理员访问权限。有关创建客户托管IAM策略的说明，请参阅《IAM用户指南》中的 “创建策略”。

如果您创建自己的策略，请参阅以下部署SSR应用程序所需的最低权限列表。

acm:DescribeCertificate
acm:ListCertificates
acm:RequestCertificate
cloudfront:CreateCloudFrontOriginAccessIdentity
cloudfront:CreateDistribution
cloudfront:CreateInvalidation
cloudfront:GetDistribution
cloudfront:GetDistributionConfig
cloudfront:ListCloudFrontOriginAccessIdentities
cloudfront:ListDistributions
cloudfront:ListDistributionsByLambdaFunction
cloudfront:ListDistributionsByWebACLId
cloudfront:ListFieldLevelEncryptionConfigs
cloudfront:ListFieldLevelEncryptionProfiles
cloudfront:ListInvalidations
cloudfront:ListPublicKeys
cloudfront:ListStreamingDistributions
cloudfront:UpdateDistribution
cloudfront:TagResource
cloudfront:UntagResource
cloudfront:ListTagsForResource
cloudfront:DeleteDistribution
iam:AttachRolePolicy
iam:CreateRole
iam:CreateServiceLinkedRole
iam:GetRole
iam:PutRolePolicy
iam:PassRole
iam:UpdateAssumeRolePolicy
iam:DeleteRolePolicy
lambda:CreateFunction
lambda:EnableReplication
lambda:DeleteFunction
lambda:GetFunction
lambda:GetFunctionConfiguration
lambda:PublishVersion
lambda:UpdateFunctionCode
lambda:UpdateFunctionConfiguration
lambda:ListTags
lambda:TagResource
lambda:UntagResource
lambda:ListEventSourceMappings
lambda:CreateEventSourceMapping
route53:ChangeResourceRecordSets
route53:ListHostedZonesByName
route53:ListResourceRecordSets
s3:CreateBucket
s3:GetAccelerateConfiguration
s3:GetObject
s3:ListBucket
s3:PutAccelerateConfiguration
s3:PutBucketPolicy
s3:PutObject
s3:PutBucketTagging
s3:GetBucketTagging
sqs:CreateQueue
sqs:DeleteQueue
sqs:GetQueueAttributes
sqs:SetQueueAttributes
amplify:GetApp
amplify:GetBranch
amplify:UpdateApp
amplify:UpdateBranch

Next.js 11 SSR 部署疑难解答

如果您在使用 Amplify 部署经典（仅限 Next.js 11）SSR应用程序时遇到意外问题，请查看以下疑难解答主题。

我的应用程序的输出目录被覆盖

使用 Amplify 部署的 Next.js 应用程序的输出目录必须设置为 .next。如果应用程序的输出目录被覆盖，请检查 next.config.js 文件。要将生成输出目录设置默认为 .next，请从文件中删除以下行：

distDir: 'build'

确认构建设置中的输出目录设置为 .next。有关查看应用程序构建设置的信息，请参阅 为应用程序配置构建设置。

以下是将 baseDirectory 设置为 .next 的应用程序的构建设置示例。

version: 1
frontend:
  phases:
    preBuild:
      commands:
        - npm ci
    build:
      commands:
        - npm run build
  artifacts:
    baseDirectory: .next
    files:
      - '**/*'
  cache:
    paths:
      - node_modules/**/*

部署我的SSR网站后出现了 404 错误

如果您在部署站点后遇到 404 错误，问题可能是由您的输出目录被覆盖所致。要检查您的 next.config.js 文件并验证应用程序构建规范中的构建输出目录是否正确，请按照上一主题 我的应用程序的输出目录被覆盖 中的步骤操作。

我的应用程序缺少发行版的重写规则 CloudFront SSR

部署SSR应用程序时，Amplify 会为你的发行版创建一条重写规则。 CloudFront SSR如果您无法在网络浏览器中访问您的应用程序，请在 Amplify 控制台中验证您的应用程序是否存在 CloudFront重写规则。如果缺失，您可以手动添加或重新部署您的应用程序。

要在 Amplify 控制台中查看或编辑应用程序的重写和重定向规则，请在导航窗格中依次选择应用程序设置、重写和重定向。以下屏幕截图显示了 Amplify 在部署SSR应用程序时为您创建的重写规则示例。请注意，在此示例中，存在 CloudFront 重写规则。

应用程序的 “重写和重定向” 页面。SSR

我的应用程序太大，无法部署

Amplify 将SSR部署的大小限制在 50 MB 以内。如果您尝试将 Next.js SSR 应用程序部署到 Amplify 但RequestEntityTooLargeException出现错误，则说明您的应用程序太大而无法部署。您可以尝试通过向 next.config.js 文件中添加缓存清理代码来解决此问题。

以下是 next.config.js 文件中执行缓存清理的代码示例。

module.exports = {
    webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
        config.optimization.splitChunks.cacheGroups = { }
        config.optimization.minimize = true;
        return config
      },
}

我的构建失败并出现内存不足错误

Next.js 允许您缓存构建构件，以提高后续构建的性能。此外，Amplify 的 AWS CodeBuild 容器会代表您压缩此缓存并将其上传到 Amazon S3，以提高后续构建性能。这可能导致您的构建失败，出现内存不足错误。

执行以下操作以防止您的应用程序在构建阶段超过内存限制。首先，从构建设置的 cache.paths 部分中删除 .next/cache/**/*。接下来，从您的构建设置文件中移除 NODE_OPTIONS 环境变量。相反，在 Amplify 控制台中设置 NODE_OPTIONS 环境变量，定义节点最大内存限制。有关在 Amplify 控制台中设置环境变量的更多信息，请参阅 设置环境变量。

完成这些更改后，重新尝试构建。如果成功了，重新将 .next/cache/**/* 添加到构建设置文件的 cache.paths 部分。

有关用于提高编译性能的 Next.js 缓存配置的更多信息，请参阅 Next.js 网站AWS CodeBuild上。

我的应用程序既有分支，SSR又有SSG分支

您无法部署同时具有SSR和SSG分支的应用程序。如果需要同时部署SSG分支SSR和分支，则必须部署一个仅使用SSR分支的应用程序和另一个仅使用SSG分支的应用程序。

我的应用程序将静态文件存储在带有保留路径的文件夹中

Next.js 可以从存储在项目根目录中的名为 public 的文件夹中提供静态文件。当您使用 Amplify 部署和托管 Next.js 应用程序时，您的项目不能包含带有路径 public/static 的文件夹。Amplify 保留了分发应用程序时使用的 public/static 路径。如果您的应用包含此路径，则必须先重命名 static 文件夹，才能使用 Amplify 进行部署。

我的申请已达到上 CloudFront限

CloudFront 服务配额将您的 AWS 账户限制为 25 个附带 Lambda @Edge 函数的分配。如果您超过此配额，则可以从您的账户中删除任何未使用的 CloudFront 分配，也可以申请增加配额。有关更多信息，请参阅服务限额用户指南中的请求增加限额。

环境变量不会传递至 Lambda 函数

您在 Amplify 控制台中为SSR应用程序指定的环境变量不会传递到应用程序的 AWS Lambda 函数中。有关如何添加您可以从 Lambda 函数中引用的环境变量的详细说明，请参阅 令服务器端运行时可以访问环境变量。

在美国东部（弗吉尼亚州北部）区域中创建 Lambda@Edge 函数

当你部署 Next.js 应用程序时，Amplify 会创建 Lambda @Edge 函数来自定义交付的内容。 CloudFront Lambda@Edge 函数应在美国东部（弗吉尼亚州北部）区域创建，而不是您应用程序的部署区域。此为 Lambda@Edge 限制。有关 Lambda @Edge 函数的更多信息，请参阅亚马逊 CloudFront 开发者指南中的边缘函数限制。

我的 Next.js 应用程序使用了不支持的功能

使用 Amplify 部署的应用程序支持 Next.js 11 之前的主要版本。有关 Amplify 支持和不支持的 Next.js 功能的详细列表，请参阅 supported features。

当您部署新的 Next.js 应用程序时，Amplify 默认使用支持的最新版本 Next.js。如果你有一款使用旧版本的 Next.js 部署到 Amplify 的 Next.js 应用程序，则可以将该应用程序迁移到 Amplify Hosting 计算提供商。SSR有关说明，请参阅 将 Next.js 11 SSR 应用程序迁移到 Amplify Hosting 计算系统。

我的 Next.js 应用程序中的图像无法加载

使用 next/image 组件向 Next.js 应用程序添加图像时，图像的大小不能超过 1 MB。将应用程序部署到 Amplify 时，大于 1 MB 的图像将返回 503 错误。这是由 Lambda@Edge 限制引起的，它将 Lambda 函数生成的响应（包括标头和正文）的大小限制为 1 MB。

1 MB 的限制适用于应用程序中的其他工件，例如PDF和文档文件。

不支持的区域

Amplify 不支持在所有可用 Amplify 的 AWS 地区部署经典（仅限 Next.js 11）SSR应用程序。以下地区SSR不支持经典版（仅限 Next.js 11）：欧洲（米兰）eu-south-1、中东（巴林）me-south-1 和亚太地区（香港）ap-east-1。