Amazon web services CloudFront/S3如何处理HTML/CSS/JS文件？

我上传到S3的文件如下：

• 入口点_uuFD6B122D5CA60CD57EC5.js
• index.html
• Main.css

但服务器返回以下内容：

尤其是灰色的那个很奇怪：它看起来不像文件。 它的名称（文件名？）是URN的ID：

https://XXXX.com/product/53483ca1-9fd1-4970-841d-e9fbeadd4660

但是当我检查

EntryPoint\uufd6b122d5ca60cd57ec5.js

，

Main.css

的内容时，我看到了与上图相同的HTML代码（换句话说，

53483ca1-9fd1-4970-841d-e9fbead4660

，

Main.css

和

EntryPoint\u5ca60cd57ec5.js

的内容是偶数）

我有一个错误：

Uncaught SyntaxError: Unexpected token '<'    
EntryPoint__fd6b122d5ca60cd57ec5.js:1 

浏览者请求访问网站

如果缓存了请求的对象，CloudFront将从 它的缓存被保存到查看器中

如果对象不在CloudFront的缓存中，CloudFront将请求 来自原点的对象（S3存储桶）

S3将对象返回到CloudFront，这将触发Lambda@Edge 原点响应事件

对象，包括由Lambda@Edge 函数，添加到CloudFront的缓存中。

（未显示）对象将返回给查看器。后来的 到达同一CloudFront edge的对象请求 从CloudFront缓存提供位置服务

如第5点所述，让我们详细说明Lambda@Edge更多它有很多用途Lambda@Edge处理。例如：

• Lambda函数可以检查cookie并重写URL，以便用户 查看站点的不同版本以进行a/B测试。
• CloudFront可以根据不同的属性将不同的对象返回给查看器 通过检查用户代理标头，他们正在使用的设备 包括有关设备的信息。例如，CloudFront可以 根据设备的屏幕大小返回不同的图像。 类似地，函数可以考虑引用者的值。 标头并使CloudFront将图像返回到具有 最低可用分辨率
• 或者你也可以检查cookies的其他标准。例如，在 销售服装的零售网站，如果您使用cookies来表示 用户为夹克选择哪种颜色，Lambda函数可以更改 请求，以便CloudFront返回 选定的颜色
• 当CloudFront viewer运行时，Lambda函数可以生成HTTP响应 发生请求或原始请求事件
• 函数可以检查头或授权令牌，并插入 在CloudFront转发之前控制对内容的访问的标题 请求发送到您的来源
• Lambda函数还可以对外部资源进行网络调用 确认用户凭据，或获取要自定义的其他内容 回答

我希望它能帮助你了解你的文件发生了什么。灰色文件表示HTML，橙色/黄色表示javascript或.js文件，蓝色表示css文件

下面是我的文件示例

---

在本地运行时是否出现此错误？@sagar1025，否。是否可以共享正在加载的js文件的内容？@sagar1025恐怕没有，因为这是真正的商业项目。我可以说是缩小了。js文件是由Webpack构建的，其中很大一部分是库。你是如何上传这些文件的？谢谢你的回答！本周我将再次尝试解决此问题，并报告结果。谢谢您的回答！你提出了可行的解决方案。

const applicationDeployment = ({
  targetFilesGlobSelections,
  targetIsFunctionalTesting = false
}) =>

   Gulp.src(targetFilesGlobSelections)

       .pipe(GulpPlugins.plumber({
         errorHandler: (error) => {
           console.error("Task: 'DeployApplication', error occurred:");
           console.error(error);
           NodeNotifier.notify({
             title: "Task: 'DeployApplication', error occurred:",
             message: error.message
           });
         }
       }))

       .pipe(GulpPlugins.s3(
          targetIsFunctionalTesting ? AMAZON_S3_DEPLOYMENT_CONFIG__FUNCTIONAL_STAGING : AMAZON_S3_DEPLOYMENT_CONFIG__PRODUCTION
       ));

Gulp.task("Deployment to production", () => applicationDeployment({
  targetFilesGlobSelections: `${public}/**/**`
}));