cloudfront 指向托管在 s3 上的旧版 React

Question

我已将我的React应用程序部署到s3. 我正在使用 Cloudfront 来使用证书并s3 bucket通过HTTPS. 在努力设置完所有内容后，我设法设置了所有内容，现在运行良好。

现在我更新了我的项目，创建了一个新版本bundle.js，上传到s3.

我现在的问题是mydomain.com指向 V1bundle.js

所以我试图挖掘更多，这是我发现的：

• mydomain.com 指向 V1
• xxxxx.cloudfront.net 指向 V1
• mydomain.com.s3-website-eu-west-1.amazonaws.com 指向 V2

所以我的猜测是出于某种原因，cloudfront指向 V1，但为什么呢？那里有一些缓存吗？

这是配置，以防万一：

• Route53 Type A 指着 xxxxxx.cloudfront.net
• cloudfront 域是 xxxxxx.cloudfront.net
• cloudfront CNAMES是mydomain.com和www.mydomain.com
• cloudfront origin domain name and path 是 mydomain.com.s3-website-eu-west-1.amazonaws.com
• s3 bucket 是 mydomain.com

PS：只是为了仔细检查问题不仅来自bundle.js，我从存储桶中删除了背景图像，但不知何故，访问时仍然找到并使用它mydomain.com（因此显示V1）

Answer 1

正如@Joe Clay 所证实的那样，Cloudfront正在缓存所有内容。

要使用 强制清除缓存AWS console（我在一些文档中发现可以使用他们的 来完成API），以下是我遵循的步骤：

• 登录到 AWS console
• 转到Cloudfront并查看您的发行版的详细信息
• 转到invalidations选项卡，然后单击Create invalidation
• 放入对象路径*并保存
• （花了大约 5 分钟完成）
• 刷新网站mydomain.com（可能需要清理浏览器缓存）
• 瞧！

希望这个答案可以帮助任何陷入同样问题的人！

Answer 2

我知道这是个老问题。但我找到了一种使用部署脚本自动化此过程的方法。这是我的 package.json 文件中的一个条目

"deploy": "npm run build && aws s3 sync --delete build/ s3://bucket-name && npm run invalidateCache",
"invalidateCache": "aws cloudfront create-invalidation --distribution-id E23232323 --paths '/*'",

之后你所要做的就是跑npm run deploy。

命令解释。

1. 部署：这为我的反应应用程序创建了一个新的版本。然后它会从我的 s3 存储桶中删除所有旧文件并上传新文件。之后它运行我的 invalidateCache 命令
2. invalidateCache：这会在我的 Cloudfront 发行版中创建一个新的失效。您必须提供可以在下图中找到的分发 ID。最后一件事是路径。我输入 /*它是为了清除所有路径的缓存。

希望这可以帮助 ：）