CloudFront/S3 对 HTML/CSS/JS 文件做了什么？
What CloudFront/S3 doing with HTML/CSS/JS files?
我上传到 S3 以下文件：
- EntryPoint__fd6b122d5ca60cd57ec5.js
- index.html
- Main.css
但是服务器returns以下内容：
特别是那个灰色的很奇怪：它看起来不像文件。
它的名称（文件名？）是来自 URN 的 ID：
https://XXXX.com/product/53483ca1-9fd1-4970-841d-e9fbeadd4660
但是当我检查EntryPoint__fd6b122d5ca60cd57ec5.js、Main.css的内容时，我看到了与上图相同的HTML代码（换句话说，53483ca1-9fd1-4970-841d-e9fbeadd4660的内容, Main.css 和 EntryPoint__fd6b122d5ca60cd57ec5.js 是偶数).
我有错误：
Uncaught SyntaxError: Unexpected token '<'
EntryPoint__fd6b122d5ca60cd57ec5.js:1
要解决这个错误，首先我需要了解 CloudFront/S3 对我的文件做了什么。灰一是什么？它的名称在哪里设置？
无论如何，它做错了：EntryPoint__fd6b122d5ca60cd57ec5.js有HTML内容，当然
JavaScript无法解析。
更新或请求：部署到 S3 任务
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}/**/**`
}));
- 查看者在 www.example.com 请求网站。
- 如果请求的 object 被缓存，CloudFront return 将 object 来自
它的缓存给查看器。
- 如果 object 不在 CloudFront 的缓存中，CloudFront 请求
object 来自源（S3 存储桶）。
- S3 returns object 到 CloudFront，这会触发 Lambda@Edge
原始响应事件。
- object，包括 Lambda@Edge 添加的安全 header
函数，被添加到 CloudFront 的缓存中。
- （未显示）objects returned 给查看者。随后的
对到达同一 CloudFront 边缘的 object 的请求
位置由 CloudFront 缓存提供。
如第5点所述，再详细说说Lambda@Edge吧！ Lambda@Edge 处理有很多用途。例如：
- Lambda 函数可以检查 cookie 并重写 URL，以便用户
查看网站的不同版本以进行 A/B 测试。
- CloudFront 可以 return 向查看者提供不同的 object
通过检查 User-Agent header 他们正在使用的设备
包括有关设备的信息。例如，CloudFront 可以
return 不同的图像基于他们设备的屏幕尺寸。
同样，函数可以考虑 Referer 的值
header 并使 CloudFront return 将图像发送给具有
最低可用分辨率。
- 或者您可以检查 cookie 是否符合其他条件。例如，在
销售服装的零售网站，如果您使用 cookie 表明
用户为夹克选择了哪种颜色，Lambda 函数可以改变
请求，以便 CloudFront returns 中的夹克图像
所选颜色。
- Lambda 函数可以在 CloudFront 查看器时生成 HTTP 响应
发生请求或源请求事件。
- 一个函数可以检查 headers 或授权令牌，并插入一个
header 在 CloudFront 转发之前控制对您的内容的访问
对您的来源的请求。
- Lambda 函数也可以对外部资源进行网络调用
确认用户凭据，或获取其他内容以进行自定义
回应。
希望它能帮助您了解您的文件发生了什么。在检查中，灰色文件表示 HTML、orange/yellow 表示 javascript 或 .js 文件，蓝色表示 css 文件。
以下是我的文件示例！
我上传到 S3 以下文件：
- EntryPoint__fd6b122d5ca60cd57ec5.js
- index.html
- Main.css
但是服务器returns以下内容：
特别是那个灰色的很奇怪：它看起来不像文件。 它的名称（文件名？）是来自 URN 的 ID：
https://XXXX.com/product/53483ca1-9fd1-4970-841d-e9fbeadd4660
但是当我检查EntryPoint__fd6b122d5ca60cd57ec5.js、Main.css的内容时，我看到了与上图相同的HTML代码（换句话说，53483ca1-9fd1-4970-841d-e9fbeadd4660的内容, Main.css 和 EntryPoint__fd6b122d5ca60cd57ec5.js 是偶数).
我有错误：
Uncaught SyntaxError: Unexpected token '<'
EntryPoint__fd6b122d5ca60cd57ec5.js:1
要解决这个错误，首先我需要了解 CloudFront/S3 对我的文件做了什么。灰一是什么？它的名称在哪里设置？
无论如何，它做错了：EntryPoint__fd6b122d5ca60cd57ec5.js有HTML内容，当然
JavaScript无法解析。
更新或请求：部署到 S3 任务
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}/**/**`
}));
- 查看者在 www.example.com 请求网站。
- 如果请求的 object 被缓存，CloudFront return 将 object 来自 它的缓存给查看器。
- 如果 object 不在 CloudFront 的缓存中，CloudFront 请求 object 来自源（S3 存储桶）。
- S3 returns object 到 CloudFront，这会触发 Lambda@Edge 原始响应事件。
- object，包括 Lambda@Edge 添加的安全 header 函数，被添加到 CloudFront 的缓存中。
- （未显示）objects returned 给查看者。随后的 对到达同一 CloudFront 边缘的 object 的请求 位置由 CloudFront 缓存提供。
如第5点所述，再详细说说Lambda@Edge吧！ Lambda@Edge 处理有很多用途。例如：
- Lambda 函数可以检查 cookie 并重写 URL，以便用户 查看网站的不同版本以进行 A/B 测试。
- CloudFront 可以 return 向查看者提供不同的 object 通过检查 User-Agent header 他们正在使用的设备 包括有关设备的信息。例如，CloudFront 可以 return 不同的图像基于他们设备的屏幕尺寸。 同样，函数可以考虑 Referer 的值 header 并使 CloudFront return 将图像发送给具有 最低可用分辨率。
- 或者您可以检查 cookie 是否符合其他条件。例如，在 销售服装的零售网站，如果您使用 cookie 表明 用户为夹克选择了哪种颜色，Lambda 函数可以改变 请求，以便 CloudFront returns 中的夹克图像 所选颜色。
- Lambda 函数可以在 CloudFront 查看器时生成 HTTP 响应 发生请求或源请求事件。
- 一个函数可以检查 headers 或授权令牌，并插入一个 header 在 CloudFront 转发之前控制对您的内容的访问 对您的来源的请求。
- Lambda 函数也可以对外部资源进行网络调用 确认用户凭据，或获取其他内容以进行自定义 回应。
希望它能帮助您了解您的文件发生了什么。在检查中，灰色文件表示 HTML、orange/yellow 表示 javascript 或 .js 文件，蓝色表示 css 文件。
以下是我的文件示例！
