前端静态资源上云部署选型：对象存储、CDN 和容器服务怎么选

前端项目上线时，最常见的分歧是：构建后的 dist 目录到底放哪里？有人习惯把它放到 Nginx 容器里，有人希望上传到对象存储，再套一层 CDN。两种方案都能跑，但适合的场景并不一样。

这篇文章按云架构决策的顺序梳理：先看业务负载，再看约束条件，然后比较对象存储、CDN 和容器服务，最后给出一套适合大多数前端项目的推荐架构和上线清单。

业务负载：页面是低频后台还是高访问活动页

部署方式首先取决于访问负载和资源形态。一个内部管理后台和一个大流量活动页，对缓存、带宽和回滚的要求完全不同。

可以先用四个问题判断：

• 访问量：每天几十人访问，还是会有峰值流量。
• 资源大小：是否有大量图片、字体、视频或分包 JS。
• 更新频率：一天多次发布，还是一周一次发布。
• 动态能力：是否需要服务端渲染、鉴权代理或动态接口转发。

如果只是静态 HTML、CSS、JS 和图片，且流量可能波动，优先考虑对象存储加 CDN。如果需要运行服务端逻辑、SSR 或复杂代理，容器服务更合适。

约束条件：缓存、回滚和动态能力

前端静态部署最容易出问题的是缓存。构建产物通常包含两类文件：入口 HTML 和带 hash 的静态资源。它们的缓存策略应该分开。

dist/
  index.html
  assets/
    app.a8f31c.js
    style.72d9e0.css
    logo.319ab0.png

index.html 决定浏览器加载哪一版资源，应该短缓存或不缓存；assets 里的带 hash 文件内容变化后文件名也会变，可以设置长缓存。只要这个边界清楚，大部分“发版后用户还看到旧页面”的问题都能避免。

方案对比：对象存储、CDN 和容器服务

三类方案的适用场景可以这样看。

如果你的项目只是 Vite、Vue、React 或普通 SPA 构建后的静态目录，先不要急着上容器。对象存储加 CDN 通常已经足够。

推荐架构：HTML 短缓存，静态资源长缓存

推荐结构是：构建产物上传到对象存储，CDN 绑定访问域名，入口 HTML 使用短缓存，静态资源目录使用长缓存，发布脚本只刷新入口 HTML 和少量必要路径。

一个可落地的缓存策略可以这样设计：

• /index.html：短缓存，例如几十秒到几分钟。
• /assets/*：长缓存，例如数月到一年，前提是文件名带 hash。
• /config.json：如果运行时配置会变，使用短缓存。
• 发布后刷新入口 HTML，不要每次全量刷新所有静态资源。

发布脚本的核心动作可以保持很薄：

npm run build

# 示例步骤：按你的云工具替换命令
upload dist/ to object-storage://frontend-prod/
refresh-cdn /index.html
refresh-cdn /config.json

这里的重点不是某个命令，而是发布动作要分清“上传资源”和“刷新入口”。带 hash 的资源不用频繁刷新，入口 HTML 才是控制版本切换的关键。

风险点：缓存污染、跨域和回滚失效

第一类风险是缓存污染。假如 index.html 被长缓存，用户可能拿到旧入口文件，但旧入口引用的资源已经被删除，页面就会白屏。因此资源清理要保守，不要在新版本上线后立刻删除上一版 hash 文件。

第二类风险是跨域配置。字体、图片、接口 mock 文件如果走不同域名，需要确认响应头是否允许前端访问。

第三类风险是回滚失效。回滚不是简单把代码退回去，还要保证旧版本入口 HTML 引用的静态资源仍然存在。对象存储里保留最近几个版本目录，会比覆盖同一批文件更安全。

落地清单：上线前逐项检查

最后给一份上线前清单。

• 构建文件是否带 hash，入口 HTML 是否单独设置短缓存。
• CDN 是否只刷新入口和配置文件，避免无意义全量刷新。
• 对象存储是否保留最近几个版本，支持快速回滚。
• 跨域头是否覆盖字体、图片和运行时配置文件。
• 404 页面是否配置好，SPA 刷新深层路由是否能回到入口 HTML。
• 发布后是否用无缓存窗口验证新版本资源路径。

总结一下：前端静态资源上云部署的推荐路线通常是“对象存储承载文件，CDN 负责分发，HTML 短缓存，assets 长缓存”。只有当项目需要服务端运行能力时，再把容器服务作为主要承载方式。先把流量、缓存和回滚约束说清楚，部署架构就不会反复摇摆。