华为云 OBS 静态网站托管实战：不用服务器，几分钟上线你的前端项目

在做前端性能优化时，缓存往往是最容易被低估的一环。同样的接口、同样的静态资源，有缓存和没缓存的页面，二次加载速度可能相差数倍。本文结合浏览器行为和常见配置，把 HTTP 缓存中最核心的两个概念——强缓存与协商缓存——一次讲清楚。

一、两类缓存的本质区别

强缓存：浏览器完全不再请求服务器，直接从本地读取资源。命中时，在 DevTools 的 Network 面板中会看到状态码为 200，且 Size 一栏显示 disk cache 或 memory cache。

协商缓存：浏览器携带缓存标识向服务器发起询问，如果资源没有变化，服务器返回 304 Not Modified，浏览器继续使用本地缓存；如果资源已更新，则返回新的 200 和新的内容。

一句话总结：强缓存不发请求，协商缓存要发请求但省流量。

二、关键响应头

1. 强缓存相关

Cache-Control: max-age=31536000
Expires: Wed, 07 Nov 2026 03:00:00 GMT

• Cache-Control 是 HTTP/1.1 的标准，优先级高于 Expires，常用指令包括 max-age、no-cache、no-store、public/private。
• Expires 是 HTTP/1.0 的产物，基于绝对时间，容易受客户端本地时间影响，一般只作兜底。

2. 协商缓存相关

Last-Modified: Wed, 05 Nov 2026 10:00:00 GMT
ETag: "5f4c-6318a2b"

• 浏览器下次请求时带上 If-Modified-Since（对应 Last-Modified）或 If-None-Match（对应 ETag）。
• ETag 是资源的唯一指纹，能解决 Last-Modified 秒级精度不够、文件内容未变但修改时间变化等问题。两者同时存在时，服务器通常优先校验 ETag。

三、浏览器优先级与完整流程

一次资源请求的缓存判断顺序如下：

1. 是否有强缓存且未过期（Cache-Control / Expires）？有则直接使用，流程结束。
2. 强缓存过期，发起协商缓存请求，携带 If-None-Match / If-Modified-Since。
3. 服务器判断资源未变，返回 304，浏览器使用本地缓存；否则返回 200 和新资源。

四、实战建议

• HTML 入口文件：使用 Cache-Control: no-cache，每次都走协商缓存，保证用户第一时间拿到新版本。
• 带 hash 的静态资源（如 app.a1b2c3.js）：使用 Cache-Control: max-age=31536000, immutable，一年强缓存，文件名变化即内容变化。
• 接口数据：一般不设置强缓存；对实时性要求不高的列表接口，可以短时间 max-age=60 减轻服务器压力。
• 注意 no-cache 不是不缓存，而是"可以缓存但每次都要协商"；真正不缓存的是 no-store。

五、小结

理解强缓存与协商缓存的分工，是做好性能优化的基础：用强缓存让"不变的内容"零请求直达，用协商缓存保证"会变的内容"及时更新。在实际项目中，配合构建工具给静态资源加上内容 hash，再按上面的策略配置响应头，就能在不牺牲更新及时性的前提下，把缓存收益拿到最大。很多同学做完一个前端项目（纯静态页面、Vue/React 打包产物）后，第一反应是"买台服务器部署"。其实在华为云上，还有一条更轻量的路：用对象存储服务 OBS 的静态网站托管能力，几分钟就能把项目发布上线，成本几乎为零。本文记录完整的操作过程和踩坑点。

一、什么是静态网站托管

OBS 静态网站托管的原理很简单：把你的 HTML/CSS/JS 等静态文件存进一个桶（Bucket），开启托管配置后，OBS 会自动以网页形式响应访问请求，并提供一个专属的网站访问域名。整个过程不需要维护服务器、不需要配置 Nginx，天然免运维。

适用场景：产品官网、活动页、文档站、个人主页，以及前端项目打包后的纯静态产物。只要页面内容不需要服务端渲染，基本都可以托管。

二、操作步骤

1. 准备静态文件

先在本地准备好网站文件，要求入口文件名为 index.html（OBS 默认的首页配置），例如：

dist/
├── index.html
├── css/
│   └── style.css
└── js/
    └── app.js

2. 创建桶并上传文件

进入 OBS 管理控制台，创建一个桶，注意两点：

• 区域：选择离目标用户近的区域，降低访问延迟；
• 存储类别：一般选"标准存储"，适合高频率访问的网站资源。

创建完成后，把整个目录的文件上传到桶的根目录。上传后建议检查对象是否保持原有的目录层级。

3. 设置对象访问权限

静态托管要求访问者能直接读取对象，需要把网站文件设置为公共读。可以在上传时统一勾选，也可以在桶策略中对整个桶配置公共读规则。

提示：如果只给部分对象设置公共读，其余对象被引用时会出现 403，页面上表现为样式丢失、JS 加载失败。

4. 开启静态网站托管

在桶的"基础配置 → 静态网站托管"中：

• 托管模式：选择"配置到所有请求"或按需选择；
• 默认首页：填 index.html；
• 重定向规则（可选）：配置 404 页面，比如把错误请求重定向到 error.html，避免用户看到生硬的报错。

5. 访问验证

开启托管后，在"静态网站托管"页面可以看到 OBS 分配的网站访问域名，形如：

https://桶名.obs-website.区域域名

浏览器打开该地址，能看到网站首页即部署成功。注意这个域名和普通的 OBS 对象访问域名不同，走的是网站托管终端节点。

三、进阶：绑定自定义域名

网站域名自带 OBS 前缀，正式使用建议绑定自定义域名：

1. 在桶的"域名管理"中添加已备案的自定义域名；
2. 在 DNS 服务商处添加 CNAME 记录，指向 OBS 网站域名；
3. 如需 HTTPS，可以配合华为云 CDN 或证书服务完成配置。

接入 CDN 后，静态资源会被缓存到边缘节点，用户体验和源站压力都会明显改善。

四、常见问题

• 访问 403：多数是对象没有设置公共读，或者桶策略阻止了匿名访问；
• 页面白屏：检查 index.html 引用的 CSS/JS 路径是相对路径还是绝对路径，绝对路径容易在托管环境下指向错误地址；
• SPA 路由 404：单页应用刷新子路由报错时，利用重定向规则把所有请求重定向回 index.html 即可解决。

五、小结

OBS 静态网站托管把"部署"这件事简化为"传文件"，特别适合轻量静态站点的快速上线。整个流程可以概括为：建桶 → 上传 → 公共读 → 开托管 → 绑域名。配合 CDN 和自定义域名，就能得到一个稳定、低成本、免运维的网站方案。如果你的下一个项目只是几个静态页面，不妨先试试这条路。