AWS Cloudfront 未获取我的最新版本化 javascript 文件

Question

我正在为我的 javascript 和 css 文件实施 AWS Cloudfront 版本控制，以便自动更新 Cloudfront 缓存，这样我就不必手动使我的文件失效。我在 S3 中托管静态网站内容。我部署新更改的流程如下。使用 webpack 构建网站，它会自动对我的 js 和 css 文件进行哈希处理。 Web pack 还更新了对我的 index.html 文件中的 js 和 css 文件的引用（不是这个文件没有版本控制）。然后，我将新生成的静态网站从 dist 文件夹复制到我的 S3 存储桶。根据文档，我应该自动看到我的更改，而不必使发行版中的每个文件无效，但我没有。我想知道我是否错过了一步。起初我认为index.html 可能需要版本控制，但文档明确指出不要对根文档对象进行版本控制。所以我的问题是......我错过了什么？包含新版本的 js 和 css 文件的 index.html 文件是否也需要进行版本控制？如果是这样我怎样才能做到这一点？

http://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ReplacingObjects.html

第 46 页：https://d0.awsstatic.com/whitepapers/Storage/Building%20Static%20Websites%20on%20AWS.pdf

Answer 1

我为此挣扎了很长时间。最终我发现以下方法可以工作：

1. 将新文件上传到s3
2. 使 Cloudfront 分发无效
3. 将缓存控制设置添加到index.html

对于最后一步，您可以使用 AWS CLI：

aws s3 cp s3://bucket/index.html s3://bucket/index.html 
--metadata-directive REPLACE --cache-control max-age=0

Answer 2

有一种便捷的方式将 SPA 部署到 S3 和 CloudFront，并轻松在云上设置基础设施！ 它称为 SWS Console Quick Cloud Architecture Builder 服务。只需几个简单的输入，您就可以控制 AWS 资源。请参阅下面的文档！

使用 SWS 控制台快速云架构构建器使前端部署变得简单

使用 S3 和 CloudFront 将 SPA（React、Vue 等）项目部署到 AWS 时，需要执行一些复杂的任务，例如在 S3 上设置静态 Web 托管并将存储桶链接到 CloudFront。不如使用 Sws Console 服务，它为您的 SPA 项目构建 S3 静态 Web 托管 + CloudFront 的 AWS 云架构，而无需担心这些任务？请参考下面的文档，尝试使用Sws Console Quick Builder工具快速构建AWS架构！

使用 SWS 控制台快速云架构构建器使前端部署变得简单

进入Sws控制台服务页面