503 错误无法满足请求（AWS Amplify）

Question

我已经在 AWS Amplify 上部署了一个 Next.js 服务器端呈现应用程序。我是 AWS 的新手，不知道为什么会遇到此错误。我看了很多文章和文档，但我无法解决这个问题。

我正在使用 getServerSideProps 从 API 等获取参数和道具。在 Vercel 和 Netlify 上，我的应用程序运行很好，但我在 Amplify AWS 上遇到错误。

我的应用正在加载静态页面，但在动态页面上出现错误。例如。 www.example.com/test-1

这里test-1是动态路由"/:id"

我得到的错误：

503 ERROR The request could not be satisfied. The Lambda function associated with the CloudFront distribution is invalid or doesn't have the required permissions. We can't connect to the server for this app or website at this time. There might be too much traffic or a configuration error. Try again later, or contact the app or website owner. If you provide content to customers through CloudFront, you can find steps to troubleshoot and help prevent this error by reviewing the CloudFront documentation.

我知道这个错误是专门针对权限的，但我不知道如何配置它们。

Answer 1

问题出在我的 Lambda 函数上，它们是为我的应用程序定义的，其中一些无法识别并修复它们，向用户授予权限是唯一的解决方案。

Answer 2

您的 lambda 函数很可能存在权限问题或其他问题。另外，正如有人提到的，尝试做 amplify init.

Answer 3

首先，请检查您使用的 Next.js 版本，因为 AWS Amplify 正式支持版本 11。此外，Next.js 11 默认使用 webpack5，Amplify 再次不支持它。所以，你可以做一些事情来解决这个问题（就像我做的那样）-

使用Next.js到v11.1.3和

在next.config.js中设置webpack5为false -


  //next.config.js

  const nextConfig = {
    ...
    ...
    webpack5: false,
    ...
    ...
  }

  module.exports = nextConfig

Answer 4

让 Next 和 Amplify 正常工作仍然存在几个问题。我找到的最好的两页在这里

https://github.com/aws-amplify/amplify-hosting/blob/main/FAQ.md#error-accessdenied-access-denied

这里

https://aws.amazon.com/blogs/mobile/host-a-next-js-ssr-app-with-real-time-data-on-aws-amplify/ （具体博客下方评论post）

在我的例子中，我做了几个关键的改变：

1-安装或降级到 Next 10.0.0.8 (npm install next@10.0.8)

2-确保您的所有环境变量都已添加到 Amplify 的控制台

3-也添加这个 Env 变量： AMPLIFY_NEXTJS_EXPERIMENTAL_TRACE=真

4-修改您的 next.config.js 以获取上面第 1 篇文章中提到的环境变量解决方法。

此外，用最少的代码测试 api/ 文件以确保代码中没有错误也没有坏处。 LambdaEdge 似乎没有很好的日志记录。（至少不是我发现的）

503 错误无法满足请求（AWS Amplify）

503 ERROR The request could not be satisfied (AWS Amplify)

amazon-web-services

amazon-cloudfront

aws-lambda

aws-regions

amplify