如何在 AWS S3 对象（CreateReactApp 构建输出）上实现复杂的静态文件缓存？
How to achieve complex static file caching on AWS S3 objects (CreateReactApp build outputs)?
所以，我有一个托管在 AWS S3 存储桶上的 React 应用程序（它之前还有一个 CloudFront 分布）。使用 GitHub Actions 工作流程，我使用 aws-cli s3 sync command:
在 S3 上部署我的构建输出
aws s3 sync build s3://mybucket --delete --acl public-read
现在，我想使用 CreateReactApp docs 中指定的起始配置执行 静态文件缓存 :
Cache-Control: max-age=31536000 build/static 个资产，Cache-Control: no-cache 用于其他一切（以确保浏览器始终检查更新的 index.html 文件）
问题
如何根据 file/folder 路径在 S3 对象上应用这种条件配置？
到目前为止我thought/tried
- 首先我认为这可以通过对 S3 存储桶进行设置来完成。但是经过一番搜索，现在，我的理解是桶本身没有这样的设置（至少，this post的答案建议none）。
- 然后，我前往 aws cli s3 sync docs 的
--cache-control 标志，但我没有找到一种直接的单行方式来应用不同的缓存控制。
这可以非常简单地完成，无需在 S3 端进行配置，因为您首先使用 CloudFront，这将在行为中得到控制。
您可以定义多个behaviours，它们根据路径模式进行匹配。在 CloudFront 中，这将显示为好像您有多个来源，但两者都可以转到同一个 S3 存储桶。
您将有一个 build/static 的路径模式，您可以为其设置所有对象的缓存最长期限。然后对于默认行为，您将禁用对象缓存。
This article 有基本的设置演示。
这是我使用的：
aws s3 sync build s3://bucket \
--metadata-directive REPLACE \
--cache-control max-age=86400 \
--exclude index.html --exclude 'static/*' \
--delete
aws s3 sync build/static s3://bucket/static \
--metadata-directive REPLACE \
--cache-control max-age=31536000,immutable \
--size-only
aws s3 cp build/index.html s3://bucket \
--metadata-directive REPLACE \
--cache-control no-cache
因此，public 文件夹和 misc 其他文件的指令是缓存 24 小时，index.html 的指令是从不缓存，静态文件夹的指令是缓存一个年 和 带有 immutable 标志，据称这可能是重新加载的真正福音 [1].
此外，我们不会 删除旧资产的静态文件夹，这意味着任何坚持使用陈旧版本的浏览器仍将获得这些文件。这似乎是正确的选择，而不是 404ing 和被破坏。
CloudFront 会将这些 headers 用于自己的缓存 并且 将它们发送到浏览器。
[1]
https://hacks.mozilla.org/2017/01/using-immutable-caching-to-speed-up-the-web/
所以，我有一个托管在 AWS S3 存储桶上的 React 应用程序（它之前还有一个 CloudFront 分布）。使用 GitHub Actions 工作流程，我使用 aws-cli s3 sync command:
在 S3 上部署我的构建输出aws s3 sync build s3://mybucket --delete --acl public-read
现在，我想使用 CreateReactApp docs 中指定的起始配置执行 静态文件缓存 :
Cache-Control: max-age=31536000build/static个资产，Cache-Control: no-cache用于其他一切（以确保浏览器始终检查更新的 index.html 文件）
问题
如何根据 file/folder 路径在 S3 对象上应用这种条件配置？
到目前为止我thought/tried
- 首先我认为这可以通过对 S3 存储桶进行设置来完成。但是经过一番搜索，现在，我的理解是桶本身没有这样的设置（至少，this post的答案建议none）。
- 然后，我前往 aws cli s3 sync docs 的
--cache-control标志，但我没有找到一种直接的单行方式来应用不同的缓存控制。
这可以非常简单地完成，无需在 S3 端进行配置，因为您首先使用 CloudFront，这将在行为中得到控制。
您可以定义多个behaviours，它们根据路径模式进行匹配。在 CloudFront 中，这将显示为好像您有多个来源，但两者都可以转到同一个 S3 存储桶。
您将有一个 build/static 的路径模式，您可以为其设置所有对象的缓存最长期限。然后对于默认行为，您将禁用对象缓存。
This article 有基本的设置演示。
这是我使用的：
aws s3 sync build s3://bucket \
--metadata-directive REPLACE \
--cache-control max-age=86400 \
--exclude index.html --exclude 'static/*' \
--delete
aws s3 sync build/static s3://bucket/static \
--metadata-directive REPLACE \
--cache-control max-age=31536000,immutable \
--size-only
aws s3 cp build/index.html s3://bucket \
--metadata-directive REPLACE \
--cache-control no-cache
因此，public 文件夹和 misc 其他文件的指令是缓存 24 小时，index.html 的指令是从不缓存，静态文件夹的指令是缓存一个年 和 带有 immutable 标志，据称这可能是重新加载的真正福音 [1].
此外，我们不会 删除旧资产的静态文件夹，这意味着任何坚持使用陈旧版本的浏览器仍将获得这些文件。这似乎是正确的选择，而不是 404ing 和被破坏。
CloudFront 会将这些 headers 用于自己的缓存 并且 将它们发送到浏览器。
[1] https://hacks.mozilla.org/2017/01/using-immutable-caching-to-speed-up-the-web/