如何使用 cloudfront 使 S3 上托管的静态站点的 index.html 缓存失效？

Question

所以我在 s3 上使用 Cloudfront 托管了我的 Angular 应用程序。我进行文件修订（使用 grunt filerev）以确保我永远不会得到过时的内容。但是，我应该如何对index.html 文件进行版本控制。它是必需的，因为所有其他文件都在 index.html 中引用。

我已将我的存储桶配置为用作静态站点。因此，当我在 url 中引用存储桶时，它只会获取 index.html。

Cloudfront 表示您应该将最小 TTL 设置为 0，这样它总是会命中源来提供内容。但是，我不需要这个，因为我正在对所有文件（index.html 除外）进行文件修订。我可以利用 CDN 缓存这些文件。

他们还说，为了使单个对象无效，请将 max-age 标头设置为 0。我尝试将以下内容添加到我的 index.html

<meta http-equiv="Cache-Control" content="public, must-revalidate, proxy-revalidate, max-age=0"/>

但是一旦您在 s3 上上传，这并不会反映出来。我是否需要使用 s3cmd 或仪表板在 s3 上显式设置标头？每次index.html发生变化并上传时我都需要这样做吗？

我知道我可以使用 cmd 使单个文件无效，但这是一个重复的过程，如果它可以通过部署在 s3 上来照顾自己，那就太好了。

Answer 1

虽然如果您使用 s3cmd，接受的答案是正确的，但我使用的是 AWS CLI，所以我所做的是以下 2 个命令：

首先，实际部署代码：

aws s3 sync ./ s3://bucket-name-here/ --delete

然后，在 CloudFront 上创建失效：

aws cloudfront create-invalidation --distribution-id <distribution-id> --paths /index.html

Answer 2

我在 S3 上托管并通过 CloudFront 分发的静态网站也遇到了同样的问题。就我而言，使

/index.html

无效不起作用。

我与 AWS 支持人员进行了交谈，我需要做的就是仅使用

/

来使其失效。这是因为我使用 https://website.com/ URL 访问我的网站，而不是使用 https://website.com/index.html （这会带来更新的内容

/index.html

失效）。这是在 AWS CloudFront 控制台中完成的，而不是使用 AWS CLI 完成的。

Answer 3

回答我自己的问题。我使用

s3cmd

工具 将我的网站部署到 S3，您可以提供一个选项来使所有已更改文件的 CloudFront 缓存失效（

dist

文件夹和 S3 存储桶之间的差异）。这将使所有已更改文件（包括索引文件）的缓存失效。通常需要大约 15-20 分钟才能反映生产上的新变化。

这是命令

s3cmd sync --acl-public --reduced-redundancy --delete-removed --cf-invalidate [your-distribution-folder]/* s3://[your-s3-bucket]

^{注意：在 macOS 上，您可以通过以下方式安装此工具：}

brew install s3cmd

.

希望这有帮助。

Answer 4

您可以使用 Lambda 自动化流程。它允许您创建一个函数，该函数将执行某些操作（在您的情况下是对象失效）以响应某些事件（S3 中的新文件）。

更多信息在这里： https://aws.amazon.com/documentation/lambda/

Answer 5

当您将本地目录与 s3 同步时，您可以执行以下操作：

aws s3 sync ./dist/ s3://your-bucket --delete

aws s3 cp \
   s3://your-bucket s3://your-bucket \
   --exclude 'index.html' --exclude 'robots.txt' \ 
   --cache-control 'max-age=604800' \
   --metadata-directive REPLACE --acl public-read \
   --recursive

第一个命令只是正常同步，第二个命令使 S3 能够返回除

index.html

和

robots.txt

之外的所有文件的缓存控制。

然后你的SPA就可以被完全缓存了（除了

index.html

）。

Answer 6

如果您使用

s3cmd sync

并使用

--cf-invalidate

选项，则可能还需要根据您的设置指定

--cf-invalidate-default-index

。

来自手册页：

使用Custom Origin和S3静态网站时，使默认索引文件失效。

这将确保您的索引文档（最有可能是index.html）无效，否则无论是否通过同步更新，都会跳过该文档。

Answer 7

有一种便捷的方式将 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控制台服务页面