AWS Amplify部署Next.js SSR应用动态路由返回503错误如何解决？

问题根因 #

你遇到的503错误是Amplify托管SSR应用时，负责运行getServerSideProps逻辑的Lambda@Edge函数权限配置缺失导致，静态页面无需经过Lambda处理所以可以正常访问。

修复步骤 #

1. 补全Lambda执行角色权限 #

• 打开AWS IAM控制台，找到名称为AmplifySSR<你的应用ID>-<环境名>-lambda-execution-role的执行角色
• 进入角色的「权限」选项卡，附加以下自定义权限策略：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Action": [
                "logs:CreateLogGroup",
                "logs:CreateLogStream",
                "logs:PutLogEvents"
            ],
            "Resource": "arn:aws:logs:*:*:*"
        }
    ]
}

• 进入角色的「信任关系」选项卡，修改信任策略允许Lambda和Lambda@Edge服务代入角色：

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "Service": ["lambda.amazonaws.com", "edgelambda.amazonaws.com"]
            },
            "Action": "sts:AssumeRole"
        }
    ]
}

2. 校验Amplify构建配置 #

• 进入Amplify控制台对应应用的「构建设置」页面，确认buildspec.yml配置适配SSR输出，参考配置如下：

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

• 确认构建环境的Node.js大版本与本地开发环境一致，避免版本不兼容导致Lambda打包后无法运行

3. 重新部署验证 #

• 回到Amplify应用的部署页面，触发一次全量重新部署
• 部署完成后测试/:id类动态路由页面，即可正常访问

异常排查 #

如果修改后仍报错，可到CloudWatch控制台查找前缀为/aws/lambda/us-east-1.AmplifySSR<你的应用ID>-<环境名>-SSR的日志组，查看具体运行错误信息即可定位剩余问题。

内容的提问来源于stack exchange，提问作者Abdullah Mujahid