amazon-web-services - 如何使 CloudFront 从不在 S3 存储桶上缓存 index.html

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中，我似乎只能排除路径，并且排除“/”似乎无法正常工作。我在更改代码时遇到了奇怪的行为，如果我点击刷新，我会看到它，但如果我退出 Chrome 并返回，我会因为某种原因看到非常过时的代码。

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

Answer 1

基于CloudFront配置的解决方案:

转到您的 CloudFront 分配，在“行为”选项卡下创建一个新行为。指定以下值:

• 路径模式:index.html
• 对象缓存:自定义
• 最大 TTL:0(或其他非常小的值)
• 默认 TTL:0(或其他非常小的值)

保存此配置。

CloudFront 将不再缓存 index.html。