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

【问题标题】：How to render dynamic Next.js paths on static S3/CloudFront website hosting?如何在静态 S3/CloudFront 网站托管上呈现动态 Next.js 路径？
【发布时间】：2021-06-12 23:07:46
【问题描述】：

总结

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

我的目录结构是这样的。

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。

我错过了什么吗？

【问题讨论】：

“我不想在构建时使用 getStaticProps 和 getStaticPaths 生成它们” - 如果您将 Next.js 应用程序导出为静态文件，那么这些页面如何可用？这首先违背了使用 SSG 的目的。也许您应该考虑使用 SSR 代替动态路径？
那些页面将是“可用的”，因为我导出了单个 [id]/index.html 页面并获取客户端上每个 [id] 的数据。
啊，明白了。您在客户端获取数据。
你需要重写 URL。正确的解决方案确实是拥有任何可以将“out/3”重写为实际文件“out/[id]/index.html”的技术解决方案。它可能是 NGINX 服务器、API 网关等。我还没有在我的应用程序中设置它，所以我没有精确/可扩展的解决方案。问题确实是如何自动更新，您需要一种解析页面的方法。但我很确定如果它还不存在，你可以以某种方式编写脚本。
谢谢，我希望能够做一些 cloudfront/S3 魔术，但看起来我必须朝着不同的方向前进。

标签： reactjs amazon-s3 next.js amazon-cloudfront

【解决方案1】：

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

它还包括对许多其他 Next.js 功能的支持，所以看起来这就是现在要走的路。

【讨论】：

【解决方案2】：

一年多以来，我一直坚持使用 S3 和 Cloudfront 来托管它，然后我搬到了 Vercel。如果您的网站有大量页面（例如产品列表），那么对于 SEO 和性能，您必须拥有 ISG（增量静态生成），而纯 S3 和 Cloudfront 组合无法做到这一点。我们奋力拼搏，似乎我们的工程部门要打造一个像 vercel 这样的产品，而不是自己开发产品。所以终于拔掉插头搬家了。

注意：我不为 vercel 工作，这只是在基于 S3 + Cloudfront + LambdaEdge 的 1.5 年挣扎之后的一个启示，之后生活很容易。

【讨论】：

是的，最终重建 Vercel 没有任何意义。