AWS Cloudfront将index.html中的CSS和JS引用重写为index_files / style.css而不是css / style.css

问题描述

我有以下设置：

• 启用了网站托管的S3存储桶，“阻止所有访问”默认功能已禁用。在存储桶中，我有一个index.html文件，一个css和一个包含一些文件的js文件夹。我在HTML代码中引用了它们，例如<link rel="stylesheet" href="index_files/style.css">和<script src="js/somejsfile.js"></script>。我还没有直接公开任何对象。存储桶名称为mydomain.com（我也有一个www.mydomain.com，并且s0ubq配置为启用了网站，将所有内容重定向到mydomain.com存储桶）
• 我有一个包含所有cname的证书（裸露，www，sub1）。使用Route53验证证书
• 我已经创建了一个Cloudfront发行版。
  • 原始域名指向mydomain.com.s3.amazonaws.com
  • 原始路径留空
  • 限制存储桶访问：是
  • 创建了新的身份
  • 允许Cloudfront更新存储桶策略（我后来确认该策略确实已修改）
  • 备用域名：列出了所有3个域
  • 自定义SSL证书->使用了先前创建的证书
  • 默认根对象：index.html
  • 将HTTP重定向到HTTPS
  • 所有其他默认设置
• cloudformation dns条目的Route 53别名。

问题： 该网站在mydomain.com和cloudformation网址上似乎都完全损坏了。在Firefox中检查了页面源之后，事实证明所有CSS和JS参考都被覆盖了，例如href="index_files/some-css-file.css"和src="index_files/some-js-file.js"。我不知道这个index_files的来源。我对S3进行了双重检查，下载了index.html，并且代码中没有这个index_files废话。

我使用Firefox Web Developer工具暂时将index_files覆盖为css和js，并且网站按原样加载...

我想念什么？这个index_files东西从哪里来？我的Google-fu在这方面失败了。

编辑/更新：

• 我使用AWS控制台配置了所有内容，因此不涉及terraform或cloudformation甚至AWS cli。 （这应该是快速的PoC）
• 使用S3同步将S3中的内容复制到那里。原始内容来自我httrack编辑的网站（基本上下载了该网站的所有静态内容）

顺便说一句，今天我再次检查了该站点，它正在运行。不知道为什么。我的修改：

• 我使用相同的设置将新的起源添加到分发中，但是使用了www和sub1 S3存储桶作为源（因此，该分发具有3个起源）。我不知道为什么要解决这个问题，因为那些S3存储桶是空的，而且我一直在使用裸mydomain.com测试该网站。
• 我已在存储桶中添加了CORS规则，以允许"*"和所有GET方法。但是由于同一个裸域s3存储桶中的所有文件，我不知道为什么要解决这个问题。

通常的模因是

• 我的东西不起作用...为什么？
• 我的僵尸正在工作...但是为什么？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）