所以我在 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 上来照顾自己,那就太好了。
虽然如果您使用 s3cmd,接受的答案是正确的,但我使用的是 AWS CLI,所以我所做的是以下 2 个命令:
首先,实际部署代码:
aws s3 sync ./ s3://bucket-name-here/ --delete
然后,在 CloudFront 上创建失效:
aws cloudfront create-invalidation --distribution-id <distribution-id> --paths /index.html
我在 S3 上托管并通过 CloudFront 分发的静态网站也遇到了同样的问题。就我而言,使
/index.html
无效不起作用。
我与 AWS 支持人员进行了交谈,我需要做的就是仅使用
/
来使其失效。这是因为我使用 https://website.com/ URL 访问我的网站,而不是使用 https://website.com/index.html (这会带来更新的内容/index.html
失效)。这是在 AWS CloudFront 控制台中完成的,而不是使用 AWS CLI 完成的。
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
.
希望这有帮助。
您可以使用 Lambda 自动化流程。它允许您创建一个函数,该函数将执行某些操作(在您的情况下是对象失效)以响应某些事件(S3 中的新文件)。
当您将本地目录与 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
)。
如果您使用
s3cmd sync
并使用 --cf-invalidate
选项,则可能还需要根据您的设置指定 --cf-invalidate-default-index
。
来自手册页:
使用Custom Origin和S3静态网站时,使默认索引文件失效。
这将确保您的索引文档(最有可能是index.html)无效,否则无论是否通过同步更新,都会跳过该文档。
有一种便捷的方式将 SPA 部署到 S3 和 CloudFront,并轻松在云上设置基础设施! 它称为 SWS Console Quick Cloud Architecture Builder 服务。只需几个简单的输入,您就可以控制 AWS 资源。请参阅下面的文档!
使用 S3 和 CloudFront 将 SPA(React、Vue 等)项目部署到 AWS 时,需要执行一些复杂的任务,例如在 S3 上设置静态 Web 托管并将存储桶链接到 CloudFront。不如使用 Sws Console 服务,它为您的 SPA 项目构建 S3 静态 Web 托管 + CloudFront 的 AWS 云架构,而无需担心这些任务?请参考下面的文档,尝试使用Sws Console Quick Builder工具快速构建AWS架构!