Question

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

我正在使用S3 Cloudfront提供所有静态功能，并且不得不从导出的Next文件中删除.html以支持所选的部署环境。

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

从某种意义上说，a.html应该是a /文件夹中的index.html，但这将导致Cloudfront出现问题，后者仅支持根文件的index.html文件。

是否可以解决此问题，或者可以更新我的输出配置-我想我可以根据需要使用exportPathMap定义路径。

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

出文件夹导出（已删除）：

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

Answer 1

您可以考虑 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);
};

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

Answer 2

最终不得不弄平solutions的结构。这解决了我的问题，因为a.html文件夹导致a无法重命名为a/。

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

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

动态路由静态导出使其难以在S3 + Cloudfront [NextJS]

2 个答案: