没有.html扩展名的S3静态页面

Question

在从Amazon S3提供静态站点时,我想知道如何摆脱.html每个页面的文件扩展名.

现在我有:

mysite.com/             # works fine, serves index.html
mysite.com/mypage.html  # works fine
mysite.com/mypage       # doesn't work

/mypage节目的错误:

404 Not Found

Code: NoSuchKey
Message: The specified key does not exist.
Key: mypage
RequestId: 1089D7A26EFED9AD
HostId: Ud8cFy8Zl1mJ+oFjFOmU1Xacq9+v70KuaJfOc4nFMEPhd66AkLhr4Pj5u0QH6Gog

我已尝试设置Content-Type为text/html,根据这篇文章,但它并没有解决我的问题.

如何在S3上/mypage提供文件服务/mypage.html？

Answer 1

我刚遇到这个问题,我想分享解决方案:

您必须将文件的元数据设置Content-type为text/htmlAND重命名文件,删除.html结尾.

这样,您就可以在没有文件扩展名的情况下访问每个页面.

Answer 2

通常在Amazon S3上,要创建干净的URL,您可以:

1. 使用"干净"名称上传页面文件,例如mypage将Content-Type设置设置为text/html(作为您描述的链接的帖子).您必须先重命名系统上的文件,然后才能将其上传到没有扩展名,或者在上传后重命名该文件而不使用S3上的扩展名.S3上的文件名不得包含扩展名.

2. 创建一个具有"干净"名称的文件夹,并将页面文件上传到该文件夹​​,并将其名称设置为默认索引文档,例如index.html.您需要检查默认索引文档名称是什么.将存储桶配置为网站时会设置此项,但可以在以后更改.

如果您无法完成上述工作,则可以使用名称密钥上传新的零字节对象,mypage然后通过在上载过程中使用元数据中的Website Redirect Location值指定密钥来设置页面重定向mypage.html.请参阅Amazon S3文档中的配置网页重定向.

你也可以将文件复制到一个名为新对象mypage与Content-Type设置为text/html.

Answer 3

我能够让 Cloudfront 功能正常工作。它比提供的 lambda 解决方案便宜得多，并且您不需要提供没有扩展名的 html 文件。这是对代码块的一个非常微小的更改，以使子目录在 CF 中工作。

'use-strict';
function handler(event) {
    var request = event.request;
    var uri = request.uri;
    if (uri.endsWith('/')) {
        request.uri += 'index.html';
    }
    else if (!uri.includes('.')) {
        request.uri += '.html';
    }
    return request;
}

警告，我还没有找到删除尾随斜杠的解决方案，但是这段代码将解决您的问题。

Answer 4

正如一些人已经说过的那样,删除文件扩展名,但只需按照以下步骤操作:

1. 转到您的Amazon S3存储桶.
2. 选中您要正确链接的文件旁边的复选框.
3. 单击右侧的"属性",将显示一个新窗格.它会说"对象:文件名"
4. 单击Metadata选项卡,从默认值更改,对我来说是"binary/octet-stream"; 新值应该是"text/html".
5. 保存.

正如人们所说,请确保您的html中的新链接不再包含.html文件扩展名.这对我有用.

Answer 5

创建一个文件夹/mypage并将其放入index.html其中对我不起作用。事实证明，这是因为 Bucket 的“索引文档”设置已更改为myindex.html：

Bucket Properties --> Static Website Hosting --> Enable Website Hosting --> Index Document

这实际上也应用于所有子文件夹，因此它不会/mypage/index.html在/mypage路由上查找；它正在寻找/mypage/myindex.html。

我只是将myindex.html设置改回index.html，并且标准文件夹结构有效。myindex.html在该设置到位的情况下在任何地方使用文件也同样有效，但这似乎没有真正的好处。

我仍然不知道为什么设置Content-Typetotext/html不起作用 - 似乎应该像在几个地方提到的那样。

无论如何，通过将 BucketIndex Document和所有子文件夹更改为使用index.html.

Answer 6

使用 AWS CLI：

假设您已从文件名中删除扩展名并使用您的账户设置 AWS CLI，您可以通过在控制台中运行以下命令来设置文件的元数据：

aws s3 cp /path/to/file s3://yourwebsite.com --content-type 'text/html' --acl public-read

Answer 7

在多页 Web 应用程序（例如 12 页）中，接受的答案效率很低，因为每次上传都需要手动编辑文件扩展名和格式。

一种自动化且无忧的策略是使用AWS Lamda@Edge。它彻底解决了这个问题。

首先，创建一个 AWS Lambda 函数，然后附加您的 CloudFront 作为触发器。

在此 AWS Lamda 页面的代码部分中，将代码段添加到下面的存储库中。

https://github.com/CloudUnder/lambda-edge-nice-urls/blob/master/lambdaRewrite.js

内容传输速度仍将如您眨眼的速度一样快。

PS：请注意上面存储库的自述文件部分中的选项