MERN栈部署后CloudFront与S3内容未更新问题求助

一、先排查S3内容未同步的问题 #

• 验证部署上传逻辑：
  确认部署工具/脚本是否正确覆盖S3旧文件。如果用AWS CLI的aws s3 sync命令，必须加--delete参数，否则旧冗余文件不会被删除，同名文件也可能因配置问题未覆盖。示例命令：

  aws s3 sync ./build s3://your-bucket-name --delete
  

  同时检查上传的是否是最新构建目录（如build或dist），避免传了旧构建产物。
• 检查S3版本控制：
  若S3开启版本控制，进入对应文件的「版本历史」，确认1.3版本的新文件是否设为当前活动版本。如果新上传的只是历史版本，S3会默认返回旧的活动版本内容。
• 对比本地与S3文件：
  本地打开构建后的index.html，查看版本号或静态资源哈希（如main.xxxx.js），再去S3控制台下载对应文件对比，确认内容是否一致，排除构建本身的问题。

二、修复CloudFront缓存无效化不生效的问题 #

• 确认无效化路径与生效时间：
  无效化所有内容必须用/*，仅无效化/index.html的话，js、css等静态资源缓存不会被清除。另外，CloudFront无效化需要5-15分钟生效，提交后不要立即测试。
• 检查缓存行为的TTL与策略：
  进入CloudFront缓存行为设置，查看默认TTL是否过长（如86400秒即1天），导致无效化后后续请求又重新缓存旧内容。同时确认是否开启了「忽略查询字符串」「忽略Cookie」等设置，这类配置可能导致CloudFront无法识别内容变化。
• 调整源的缓存头配置：
  静态资源（js、css、图片）可设置较长TTL（如public, max-age=31536000, immutable），但index.html必须设置短TTL或强制不缓存：Cache-Control: no-cache, no-store, must-revalidate。也可以在CloudFront缓存行为中单独对index.html设置自定义缓存策略，覆盖S3的头信息。

三、解决浏览器缓存导致的回退问题 #

• 确保静态资源哈希命名：
  确认MERN构建工具（Webpack/Vite/CRA）是否开启内容哈希命名，新版本静态资源文件名会带唯一哈希（如main.abc123.js），浏览器会识别为新文件，不会用旧缓存。如果资源文件名固定（如main.js），浏览器会一直缓存旧文件，只有硬刷新才会重新请求。
• 强制index.html不缓存：
  除了在S3/CloudFront设置index.html的Cache-Control头，还可以在构建时给index.html添加ETag或Last-Modified头，让浏览器每次请求都验证文件是否更新。
• 用隐私窗口测试：
  常规刷新可能仍使用浏览器本地缓存，测试时用隐私模式打开页面，排除本地缓存干扰，确认CloudFront是否已返回新内容。

四、MERN栈额外注意点 #

• 客户端路由配置：
  如果使用React Router等客户端路由，CloudFront的错误页面必须设置为index.html，否则访问非根路径时可能返回旧缓存页面。
• 环境变量检查：
  确认构建时使用的环境变量（如版本号REACT_APP_VERSION）是否已更新，避免构建出的内容仍带旧版本信息。

内容的提问来源于stack exchange，提问作者Muhammad Mansha