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

通过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？

我只是遇到了这个问题，我想分享解决方案：

您必须将文件的元数据设置Content-type为text/htmlAND并重命名该文件，以消除.html结尾的。

这样，您无需文件扩展名就能访问每个页面。

通常，在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。

就像有些人已经说过的那样，删除文件扩展名，但是只需执行以下步骤：

1. 转到您的Amazon S3存储桶。
2. 选中要正确链接的文件旁边的复选框。
3. 单击右侧的“属性”，将显示一个新窗格。它会说“对象：文件名”
4. 单击“元数据”选项卡，将其更改为默认值，对我来说是“ binary / octet-stream”；新值应为“ text / html”。
5. 保存。

就像人们所说的那样，请确保html中的新链接不再包含.html文件扩展名。这对我有用。

在我创建一个文件夹/mypage并将其放入index.html其中并不起作用。原来，这是因为存储桶的“索引文档”设置已更改为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-Typeto设置text/html不起作用-似乎应该如此，在很多地方都提到过。

无论如何，通过更改BucketIndex Document和所有子文件夹来解决该问题index.html。

使用AWS CLI：

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

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

非常简单且经过测试的解决方案。：

1. 重命名文件，从文件名中删除扩展名（.html）。（例如，将gallery.html更改为gallery）。
2. 编辑文件属性。添加元数据键（内容类型= text / html，内容语言= html）。
3. 从浏览器网址（例如websiteurl.com/gallery）进行保存和测试。

如果要上传json文件。将不带扩展名的json文件保存在本地计算机中。

在AWS CLI中，使用以下命令：

  aws s3 mb s3://<s3bucketname>

  #output 
  make_bucket: s3bucketname

  aws s3 cp path\to\local\file s3://<s3bucketname>  --content-type 'application/json' --acl public-read

  #output
  upload: .\<filename> to s3://<s3bucketname>/<filename>

现在您可以使用url访问文件：

https://<s3bucketname>.s3.amazonaws.com/<filename>

我添加了一些自动化脚本示例来删除* .HTML扩展名，并通过添加元对象的内容类型将其上传到s3。我使用JavaScript创建sh文件，运行sh文件。

const recursive = require("recursive-readdir");
const fs = require("fs");

(async (params) => {
 let buffer = "aws s3 cp ./out s3://www.Example.com \n";
  await recursive("out", [
    "css",
    "_next",
    "images",
    "static",
    "svg",
    "*.ico",
    "*.txt",
    "*.xml",
    "index.html",
    "404.html",
  ]).then(
    (files) => {
     
    
      for (const file of files) {
        const path = file.substring(file.indexOf("\\") + 1);

        buffer += `aws s3 cp --content-type 'text/html' --metadata-directive REPLACE ./out/${path}  s3://www.example.com/${path} \n`;

        const removeExtension = file.replace(/\.[^/.]+$/, "");

        fs.rename(file, removeExtension, function (err) {
          if (err) console.log("ERROR: " + err);
        });
      }
   
    },
    (error) => {
      console.error("something exploded", error);
    }
  );

  


  fs.writeFileSync("deploy.sh", "echo 'copy your files' \n");
  fs.appendFileSync("deploy.sh", buffer);

  fs.appendFileSync("deploy.sh", 'echo "Invalidation cloudfront"');
  fs.appendFileSync("deploy.sh", 'aws cloudfront create-invalidation --distribution-id XXXXXXX --paths "/*" ');





})();

另一种可能的解决方案是使用Lambda @ edge功能，此处的文档参考。

它在根域上没有尾部斜杠的原因是因为您的主索引具有以下结构：

mysite.com/index.html

然后服务器转到服务器并为索引默认页面显示以下内容：

mysite.com/

如果您不希望所有页面都使用斜杠，则应对所有html文件执行相同的斜杠。代替

mysite.com/mypage.html

做

mysite.com/mypage/index.html

然后，服务器将显示mypage文件夹的默认索引文件，并显示在url中

mysite.com/mypage/