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

我已尝试按照this post将Content-Type设置为text/html，但它并不能解决我的问题。

如何让/mypage在S3上的/mypage.html提供文件？

Answer 1

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

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

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

Answer 2

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

使用“干净”名称上传页面文件，例如mypage并将Content-Type设置为text/html（作为您所关联的帖子）。您必须先重命名系统，然后再将其上传到没有扩展程序，或者在上传后将rename文件重命名为S3。 S3 上的文件名不得具有扩展名。
使用“干净”名称创建一个文件夹，并将页面文件上传到该文件夹，其名称设置为default index document，例如index.html。您需要检查默认索引文档名称是什么。将存储桶配置为网站时会设置此项，但可以在以后更改。

如果您无法完成上述工作，则可以上传名为key mypage的新零字节对象，然后通过指定值为{Website Redirect Location的{{1}}键来设置页面重定向。 1}}在上传过程中的元数据中。请参阅Amazon S3文档中的配置网页重定向。

您还可以将文件复制到名为mypage.html的新对象，mypage设置为Content-Type。

Answer 3

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

转到您的Amazon S3存储桶。
选中您要正确链接的文件旁边的复选框。
点击右侧的“属性”，系统会显示一个新窗格。它会说“Object：filename”
点击元数据标签，更改为默认值，对我来说是“binary / octet-stream”;新值应该是“text / html”。
保存。

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

Answer 4

在/mypage创建一个文件夹并将index.html置于其中并不适合我。事实证明，这是因为Bucket＆＃34; Index Document＆＃34;设置已更改为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-Type到text/html不起作用 - 似乎应该在几个地方提到它。

无论如何，通过更改Bucket的Index Document和所有子文件夹以使用index.html来解决问题。

Answer 5

使用AWS CLI：

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

gcc -o main main.c

Answer 6

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

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

Answer 7

For those using collections I was able to prettify the links by adding an extra / character to the end of the

collections:
  my_collection:
   output:true
   permalink: /:collection/:path/

Answer 8

另一种可能的解决方案是使用Lambda @ edge功能documentation reference here。

Answer 9

如果要上传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>

Answer 10

我添加了一些自动化脚本示例来删除* .HTML扩展名，并通过添加元对象的content-type将其上传到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 "/*" ');





})();

Answer 11

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

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

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

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

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

内容交付仍将与您眨眼的速度一样快。

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

Answer 12

之所以在根域上不加斜杠，是因为您的主索引具有以下结构：

mysite.com/index.html

然后服务器运行并为索引默认页面提供服务器，显示：

mysite.com /

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

mysite.com/mypage.html

做

mysite.com/mypage/index.html

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

mysite.com/mypage /

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

12 个答案: