React SPA部署S3+CloudFront：如何禁止缓存所有HTML文件？

核心问题分析 #

你遇到的情况是：SPA路由（如/login）触发CloudFront返回缓存的index.html（被误当作login.html），根本原因是CloudFront对.html后缀的请求缓存策略未生效，且SPA路由的回源规则未和缓存策略联动。

具体配置步骤 #

1. 创建HTML文件专属缓存行为

   • 打开CloudFront分发的「行为」面板，点击「创建行为」
   • 路径模式填 *.html——这是CloudFront支持的后缀匹配模式，能覆盖所有以.html结尾的请求
   • 缓存策略直接选「Managed-CachingDisabled」，这个内置策略会完全禁用缓存，强制每次请求都回源到S3
   • 原点请求策略选「AllViewer」，确保请求的所有头信息、查询字符串都转发给S3，避免缓存误匹配
   • 把这个行为的优先级设为1（数值越小优先级越高，要比默认的/*行为优先级高），保存配置

2. 配置SPA路由的404回源规则
   因为React SPA的所有路由最终都要指向index.html，需要让CloudFront在找不到对应路径文件时自动返回index.html，且这个index.html不被缓存：

   • 进入CloudFront分发的「错误页面」面板，点击「创建自定义错误响应」
   • HTTP错误代码选「404 Not Found」，自定义响应页面路径填 /index.html，HTTP响应代码选「200 OK」
   • 保存后，像/login这类不存在的路径请求，会被CloudFront转发到index.html，而因为我们已经给.html文件配置了禁用缓存，这个请求会直接从S3拉取最新文件

3. （可选）给静态资源配置缓存优化性能
   如果你有/js/、/css/、/img/这类静态资源，可以单独配置缓存提升性能：

   • 新建行为，路径模式填对应静态资源前缀（比如/js/*）
   • 缓存策略选「Managed-CachingOptimized」，这是CloudFront针对静态资源优化的内置策略
   • 优先级设为2（比HTML行为低，比默认行为高），保存即可

4. 清理现有缓存
   最后别忘了清理CloudFront的旧缓存：

   • 到「缓存」面板，点击「创建无效ation」，路径填 /*，确认发起无效请求，确保之前缓存的旧HTML文件被清除

这样配置后，所有HTML文件请求都会直接从S3获取最新版本，SPA路由也能正常工作，不会再返回缓存的旧文件。

内容的提问来源于stack exchange，提问作者Otavio Bonder