ECS滚动部署中Vite构建JS文件加载失败问题求助

针对滚动部署时静态资源跨版本找不到的问题，除了固定chunk名称，还有以下几种更优的可行方案：

1. 版本化静态资源路径 #

在Vite构建时给静态资源路径添加唯一版本标识（比如Git commit短哈希、项目版本号），确保新旧版本的资源路径完全隔离：

• 修改Vite配置，通过环境变量动态设置base参数：

  // vite.config.js
  export default defineConfig({
    base: `/assets-v${process.env.BUILD_VERSION}/`,
    // 其他配置项
  })
  

• 部署时传入BUILD_VERSION（例如用Git命令生成：BUILD_VERSION=$(git rev-parse --short HEAD)），让每个版本的资源路径都带有专属前缀。
• 旧页面请求的旧版本路径只会命中旧容器，新版本页面请求的新路径命中新容器，从根源避免跨版本资源访问的冲突。

2. 静态资源托管到独立CDN/对象存储 #

将前端构建后的静态资源（JS、CSS、图片等）完全分离到CDN或对象存储服务，仅保留HTML文件在ECS容器中：

• Vite构建时配置base为CDN地址：

  export default defineConfig({
    base: 'https://your-cdn-domain.com/',
    // 其他配置项
  })
  

• 每次构建后自动将dist/assets目录下的文件上传到CDN，开启基于文件名哈希的长期缓存（缓存有效期可设为1年以上，CDN会自动识别哈希文件名并更新缓存）。
• 滚动部署时，新旧容器的HTML分别指向各自版本的CDN资源，静态资源请求直接走CDN，不会经过负载均衡路由到ECS容器，彻底解决跨版本资源缺失问题，同时还能提升资源加载速度。

3. 滚动部署阶段的旧容器延迟销毁 #

调整ECS滚动部署策略，在新容器健康可用并接管全部流量后，不立即销毁旧容器，而是保留一段时间（比如10-15分钟，可根据用户平均会话时长调整）：

• 配置负载均衡，新容器上线后逐步将流量从旧容器切换到新容器，直到旧容器不再接收新请求。
• 旧容器保留期间，仍能响应已加载旧页面的用户的资源请求，待大部分用户刷新页面加载新版本HTML后，再销毁旧容器。
• 这个方案无需修改前端构建配置，仅调整部署流程即可，适合无法修改前端资源路径的场景。

关于固定chunk名称的补充 #

固定chunk名称确实能解决问题，但会失去哈希文件名带来的缓存优势：浏览器无法通过文件名变化自动更新缓存，你需要额外添加缓存清除策略（比如给资源加查询参数、引导用户强制刷新），长期来看可能引发缓存不一致的问题，仅适合版本更新频率极低的场景。

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