如何在AWS S3对象上实现复杂的静态文件缓存（CreateReactApp构建输出）？

Question

因此，我有一个托管在 AWS S3 存储桶上的 React 应用程序（它之前还有一个 CloudFront 发行版）。使用 GitHub Actions 工作流程，我使用aws-cli s3sync 命令在 S3 上部署构建输出：

aws s3 sync build s3://mybucket --delete --acl public-read

现在，我想使用CreateReactApp 文档中指定的起始配置执行静态文件缓存：

• Cache-Control: max-age=31536000对于build/static资产来说，
• Cache-Control: no-cache对于其他一切（以确保浏览器始终检查更新的 index.html 文件）

问题

如何根据文件/文件夹路径在 S3 对象上应用此类条件配置？

到目前为止我的想法/尝试

• 首先，我认为可以通过 S3 存储桶上的设置来完成。但经过一些搜索，现在，我的理解是存储桶本身没有这样的设置（至少，这篇文章的答案没有提出）。
• 然后，我前往aws cli s3sync docs--cache-control的 flag ，但我没有找到一种应用不同缓存控制的直接、单行方式。

Answer 1

这是我使用的\xe2\x80\x99s：

\n

aws s3 sync build s3://bucket \\\n  --metadata-directive REPLACE \\\n  --cache-control max-age=86400 \\\n  --exclude index.html --exclude \'static/*\' \\\n  --delete\naws s3 sync build/static s3://bucket/static \\\n  --metadata-directive REPLACE \\\n  --cache-control max-age=31536000,immutable \\\n  --size-only\naws s3 cp build/index.html s3://bucket \\\n  --metadata-directive REPLACE \\\n  --cache-control no-cache\n

\n

因此，公共文件夹和杂项其他文件会被提供缓存 24 小时的指令，index.html并被提供从不缓存的指令，而静态文件夹则被提供缓存一年的指令，并且带有一个immutable标志，据说这对于重新加载来说是一个真正的福音。 [1]。

\n

此外，我们不会删除旧资产的静态文件夹，这意味着任何坚持使用过时版本的浏览器仍然会获取这些文件。这似乎可能是正确的选择，而不是 404ing 和被破坏。

\n

CloudFront 将使用这些标头作为自己的缓存并将它们发送到浏览器。

\n

[1]\n https://hacks.mozilla.org/2017/01/using-immutable-caching-to-speed-up-the-web/

\n