用 OBS 做静态站点托管与 CDN 加速的完整流程

场景引入

我给一个前端项目发布官网，原来用一台 ECS 跑 Nginx。站点里只有 HTML、CSS 和 JS，再加些图片。可每次发版都得登录服务器，替换目录后再重载 Nginx，遇到节假日还要担心机器和证书。市场同事临时改一张图，我也得走完这套发布流程，挺麻烦。

后来我把构建产物直接放到 OBS，开启静态网站托管，再挂 CDN 做加速和 HTTPS。发版就成了一条 obsutil cp，要回滚，重新上传上一版产物就行。这里把实际跑通的流程和踩过的坑记下来。

环境与前提

本地开发用 MacBook Pro M2，发布用 Ubuntu 22.04.4 LTS 构建机。构建环境是 Node.js 20.11.1 和 npm 10.2.4，上传工具用 obsutil 5.5.2；检查请求和解析分别用 curl 7.81.0、dig 9.18.24。

OBS 桶在 cn-north-4，桶名是 site-demo-202406，CDN 加速域名用 www.example.com。本地和构建机出方向放通 80/443。如果构建机是 ECS，安全组只放出方向 443 访问 OBS 和 CDN，入方向不开放 Web 端口。

OBS 桶不绑安全组。静态网站托管要求匿名可读，所以我把桶 ACL 设为公共读。桶里只放公开静态资源，配置文件和密钥都不能放，源文件也不上传。

具体步骤

初始化 OBS 桶并开启静态网站托管

obsutil config -i=$AK -k=$SK -e=obs.cn-north-4.myhuaweicloud.com
obsutil mb obs://site-demo-202406 -location=cn-north-4

obsutil config 写入 AK/SK 和 OBS 终端节点，后续命令就不用重复认证。创建桶用 obsutil mb，其中 -location 指定区域，桶名必须全局唯一。

桶建好后，进入 OBS 控制台的静态网站托管，填入以下配置。

<WebsiteConfiguration>
  <IndexDocument>
    <Suffix>index.html</Suffix>
  </IndexDocument>
  <ErrorDocument>
    <Key>404.html</Key>
  </ErrorDocument>
</WebsiteConfiguration>

目录请求由 IndexDocument 指定默认返回的 index.html；对象不存在，则按 ErrorDocument 返回 404.html。我接着把桶 ACL 设为公共读，不然直接访问静态网站域名会返回 403。

上传构建产物

npm run build
obsutil cp ./dist/ obs://site-demo-202406/ -r -f

执行 npm run build 后会生成 dist 目录，再用 obsutil cp 把目录上传到桶根目录。这里的 -r 用来递归子目录，-f 会覆盖同名对象。

我发布时不手工改桶内文件，免得线上内容和仓库不一致。传完先直连静态网站域名，检查 OBS 侧是否正常。

curl -I http://site-demo-202406.obs-website.cn-north-4.myhuaweicloud.com/

返回 200，并且 Content-Type: text/html，这一步才算通过。碰到 403 就先查桶 ACL；返回 404，再看 index.html 有没有放在桶根目录。

配置 CDN 源站与回源 HOST

在 CDN 控制台新增加速域名 www.example.com，源站类型选自定义源站。源站地址填 site-demo-202406.obs-website.cn-north-4.myhuaweicloud.com，回源 HOST 也填这个静态网站域名。

回源 HOST 别填 www.example.com，否则 OBS 无法按 Host 识别桶。我把缓存规则按文件类型拆开。

*.html        0s
/assets/*     604800s
/*            3600s

HTML 不缓存或只做极短缓存，发版后才能尽快更新。带哈希的 JS/CSS/图片缓存 7 天，其余请求用 1 小时作为兜底缓存。

接着在 CDN 侧开启 HTTPS，证书可以在控制台上传，也可以用托管证书。

域名解析与验证

dig +short www.example.com CNAME
curl -I https://www.example.com/
curl -I https://www.example.com/not-exist

用 dig +short 检查 CNAME，确认它指向 CDN 控制台给出的加速域名。首页请求要看状态码和 Content-Type，不存在的路径则用来检查 404 页面是否生效。

响应头也得看。我会检查 X-Cache、Age 和 Cache-Control，确认缓存是否命中，缓存时间是否符合预期。发版后如果 HTML 还是旧的，就先到 CDN 控制台刷新 https://www.example.com/ 和 https://www.example.com/index.html。

遇到的问题与解决

CDN 回源 HOST 我填错过。直接访问 OBS 静态网站域名正常，经过 CDN 访问首页却一直是 404，日志里的回源请求也返回 404。

OBS 静态网站托管靠 Host 识别桶。CDN 回源时把 HOST 改成加速域名，OBS 就找不到对应的桶了。把回源 HOST 改回 site-demo-202406.obs-website.cn-north-4.myhuaweicloud.com，刷新缓存后，访问恢复正常。

另一个坑出在 HTML 缓存上。obsutil cp 已经上传了新 index.html，浏览器里却还是旧页面。检查 curl -I 的结果，Age 很大，而且有 X-Cache: HIT。

原因是早期的缓存规则把 *.html 也设成了 7 天。我后来把 HTML 缓存改为 0 秒，静态资源继续保留长缓存，并在发布脚本末尾加上 CDN 刷新。资源命中率没有受影响，首页更新也不再被长缓存拖住。

小结

改成这套方案后，ECS 和 Nginx 不用再维护，静态站点发布就是构建加 obsutil cp。HTTPS 和缓存交给 CDN，带宽也由它收敛。

代价同样明确。桶必须公共读，敏感文件不能放进去；缓存规则得设计好，否则发版后排障还是会绕弯路。OBS 静态托管适合纯静态站点，登录和表单需要的后端仍要单独做，搜索接口也一样。

官网、文档和活动页适合这套方案，前端 SPA 也可以采用。需要服务端渲染、权限校验和动态接口的项目，不宜直接套用。纯静态项目省下的是服务器维护和发布操作，公共读权限与缓存更新则要自己管好。