Question

我在S3存储桶上托管了一个React应用。代码使用yarn build缩小（它是基于create-react-app的应用程序）。 build文件夹类似于：

build
├── asset-manifest.json
├── favicon.ico
├── images
│   ├── map-background.png
│   └── robot-icon.svg
├── index.html
├── js
│   ├── fontawesome.js
│   ├── packs
│   │   ├── brands.js
│   │   ├── light.js
│   │   ├── regular.js
│   │   └── solid.js
│   └── README.md
├── service-worker.js
└── static
    ├── css
    │   ├── main.bf27c1d9.css
    │   └── main.bf27c1d9.css.map
    └── js
        ├── main.8d11d7ab.js
        └── main.8d11d7ab.js.map

我绝不希望缓存index.html，因为如果我更新代码（导致main.*.js中的十六进制后缀更新），我需要用户下一次访问才能获取<script src>中index.html更改为指向更新后的代码。

在CloudFront中，我似乎只能排除路径，并排除＆＃34; /＆＃34;似乎没有正常工作。我在改变代码的过程中遇到了奇怪的行为，如果我点击刷新，我就会看到它，但如果我退出Chrome并返回，我会因某种原因看到过时的代码。

我不想在每次代码发布时触发失效（通过CodeBuild）。还有其他方法吗？我认为其中一个挑战是，由于这是一个使用React Router的应用程序，我不得不通过将错误文档设置为index.html并强制HTTP状态200而不是403来做一些技巧。

Answer 1

如果您不希望缓存index.html，请仅在该文件上设置Cache-Control: max-age=0标头。 CloudFront将在每个请求上向您的原始S3存储桶发回请求，但听起来这是期望的行为。

如果您想要设置更长的到期时间并手动使CloudFront缓存无效，您可以使用*或/*作为失效路径（而不是/，如您所述）。但是，全球所有CloudFront边缘节点最多可能需要15分钟才能反映原点的变化。

Answer 2

在将新文件上传到s3并使Cloudfront无效之后，这是我运行的用于对index.html文件设置缓存控制的命令：

aws s3 cp s3://bucket/index.html s3://bucket/index.html --metadata-directive REPLACE --cache-control max-age=0

Answer 3

基于CloudFront配置的解决方案：

转到“行为”选项卡下的CloudFront分配，并创建新行为。指定以下值：

路径模式：index.html
对象缓存：自定义
最大TTL：0（或另一个很小的值）
默认TTL：0（或另一个很小的值）

保存此配置。

CloudFront将不再缓存index.html。

Answer 4

在每个发行版上运行index.html的失效比击败Cloudfront的目的并每次都从S3提供服务（基本上是应用程序的切入点）要好得多。

如何使CloudFront永远不会在S3存储桶

4 个答案: