如何在静态 S3/CloudFront 网站托管上呈现动态 Next.js 路径？

Question

总结

我正在尝试设置 Next.js 在 S3 和 CloudFront 上托管静态网站。在大多数情况下它是有效的，但我在使用动态路由时遇到了问题。

我的目录结构是这样的。

pages/
  index.js
  about.js
  [id].js

目前我的 Next.js 配置设置为 trailingSlash: true 所以当我运行 next build && next export 我导出的静态文件看起来像这样。

out/
  index.html
  about/
    index.html
  [id]/
    index.html

这意味着当我访问“123456.cloudfront.net”或“123456.cloudfront.net/about/”时，会显示正确的index.html。但是，当我访问“123456.cloudfront.net/1/”时，我显然收到一条错误消息，而不是 out/[id]/index.html.

注意事项

id 页面会定期添加、删除和更新，所以我不想在构建时使用 getStaticProps 和 getStaticPaths 生成它们。

我考虑过的解决方案

我尝试将 S3 错误文档路由到 out/index.html，希望它能加载主页，运行 JavaScript，识别路径并最终显示正确的[id] 页，但它只停留在主页上。
我考虑过尝试使用 Lambda@Edge 的解决方案来加载正确的页面，但是每当我在我的应用程序中添加或更改路径时，我可能需要更新看起来很乱的 lambda。

我是不是漏掉了什么？

Answer 1

在进一步阅读之后，我意识到 serverless next.js 基本上是为了解决同样的问题。它在 s3 存储桶中托管您的 Next.js 应用程序，然后结合使用 CloudFront 行为和 Lambda@Edge 将您的请求路由到正确的位置。

它还包括对许多其他 Next.js 功能的支持，因此看起来这是目前的方式。

Answer 2

经过一年多的自负，纯粹使用 S3 和 cloudfront 来托管它，我已经搬到了 Vercel。如果您的网站有大量页面，比如产品列表，那么为了 SEO 和性能，您必须拥有 ISG（增量静态生成），而您不能使用纯 S3 和 Cloudfront 组合来做到这一点。我们进行了艰苦的斗争，看起来我们的工程人员将要构建像 Vercel 这样的产品，而不是自己的产品开发。所以终于拔掉插头搬家了

注意：我不为 Vercel 工作，这只是在基于 S3 + Cloudfront + LambdaEdge 奋斗 1.5 年之后的一个启示，在那之后生活很轻松。

如何在静态 S3/CloudFront 网站托管上呈现动态 Next.js 路径？

How to render dynamic Next.js paths on static S3/CloudFront website hosting?

reactjs

amazon-s3

next.js

amazon-cloudfront