动态路由静态导出使得很难在 S3 + Cloudfront [NextJS] 中进行路由

Question

我正在使用动态路由模板来管理嵌套路径。

我使用 S3 Cloudfront 为所有静态服务提供服务，因此不得不从导出的 Next 文件中删除 .html 以支持所选的部署环境。

我发现很难解决 solutions/a.html 因为当我尝试重命名它时它与文件夹名称冲突 a.

在某种程度上，a.html 可能应该 index.html 在 a/ 文件夹中，但这会导致 Cloudfront 出现问题，Cloudfront 仅支持根文件的 index.html 文件。

有没有办法解决这个问题或者更新我的输出配置 - 我想我可以使用 exportPathMap 来根据需要定义路径。

/pages
   /solutions
      [...id].tsx

Out 文件夹导出（编辑）：

└── solutions
   ├── a
   |  ├── b
   |  ├── b.html
   |  ├── c
   |  ├── c.html
   ├── a.html

Answer 1

最终不得不扁平化 solutions 的结构。这解决了我的 a.html 由于 a/ 文件夹而无法重命名为 a 的问题。

既然已经实现了，剩下的就是将 ContentType 更改为 text/html。我使用具有 params 属性的 serverless-s3-sync 包实现了这一点。

└── solutions
   ├── a
   ├── a.html
   ├── b
   ├── b.html
   ├── c
   ├── c.html

Answer 2

您可以考虑 Lambda@Edge 在 origin-request 上指向实际文件的缓存行为：

  const request = event.Records[0].cf.request;
  const uri = request.uri;

  if (uri.endsWith('/')) {
    request.uri += 'index.html';
  } else if (!uri.includes('.')) {
    request.uri += '/index.html';
  }

  callback(null, request);
};

这应该可以解决问题，而无需展平结构

动态路由静态导出使得很难在 S3 + Cloudfront [NextJS] 中进行路由

Dynamic routing static export makes it hard to route in S3 + Cloudfront [NextJS]

amazon-s3

next.js

amazon-cloudfront