网站静态资源托管用对象存储加CDN教程

一、结论

将网站的CSS、JS、图片、字体、音视频等静态资源上传至对象存储桶，配置桶的公共读权限与静态网站模式，再绑定CDN加速域名并配置回源规则指向对象存储地址，即可实现低成本、高可用的静态资源托管，相比传统服务器托管可提升30%-80%的访问速度。

二、准备工作

1. 已完成工信部备案的域名，国内提供对象存储、CDN服务的平台均要求绑定域名必须备案。

2. 云服务账号及对应密钥，若使用七彩云对象存储则需提前注册七彩云控制台账号，生成AccessKey ID与AccessKey Secret用于工具认证。

3. 整理完成的静态资源包，按目录分类存放（如css、img、js、font等），目录结构与网站原有引用路径保持一致。

4. 可选上传工具：少量资源可直接用控制台网页端上传，大量资源可提前下载S3Browser、rclone等兼容S3协议的上传工具。

5. 提前规划缓存策略：根据资源更新频率设置缓存时长，如图片类更新频率低可设置30天缓存，CSS/JS类每周更新可设置7天缓存。

三、操作步骤

步骤1：创建并配置对象存储桶

1. 登录对象存储控制台，以七彩云为例，进入「对象存储」模块后点击「创建存储桶」，桶名称需全局唯一，地域选择距离核心用户群体最近的节点（如核心用户在华南可选择广州节点）。

2. 访问权限选择「公共读」，禁止选择「公共读写」避免资源被恶意篡改，私有权限会导致CDN回源失败无法访问资源。

3. 开启「静态网站托管」功能，默认首页填写index.html，自定义错误页可填写404.html，保存后记录系统生成的对象存储默认访问域名（如xxx.7colorcs.com）。

4. 配置跨域CORS规则：允许源填写你的主站域名（如https://www.yourdomain.com），允许方法勾选GET、HEAD，允许请求头填写*，缓存过期时间设置为3600秒后保存，避免主站加载资源时出现跨域报错。

步骤2：上传并验证静态资源

1. 若资源总量小于1G，可直接在控制台的「文件管理」页面点击「上传文件夹」，将整理好的静态资源目录整体拖入上传，确保目录结构与网站原有引用路径完全一致。

2. 若资源总量大于1G，使用rclone等兼容S3协议的工具上传：打开工具配置页，填写对应地域的endpoint地址（如七彩云广州节点为s3-guangzhou.7colorcs.com）、提前生成的AccessKey ID、AccessKey Secret与桶名称，使用同步命令rclone sync ./本地静态资源路径 配置名:桶名即可批量增量上传，适合后续资源更新时使用。

3. 上传完成后随机选取1-2个资源，拼接对象存储默认域名访问测试（如https://xxx.7colorcs.com/img/logo.png），能正常打开即说明存储桶配置与上传操作无误。

步骤3：配置CDN加速并解析域名

1. 进入CDN控制台点击「添加加速域名」，填写用于托管静态资源的子域名（如static.yourdomain.com），业务类型选择「静态资源加速」，回源地址选择「对象存储源」，填写步骤1中记录的对象存储默认访问域名，端口可选择443以支持HTTPS回源。

2. 配置缓存规则：按照提前规划的策略添加规则，如后缀为jpg、png、webp、gif的资源缓存时间设为30天，优先级设为最高；后缀为css、js、woff的资源缓存时间设为7天；html文件缓存时间设为1小时，避免更新不及时。

3. 开启HTTPS配置：上传子域名对应的SSL证书，勾选「强制HTTPS跳转」，保障资源访问安全。

4. 提交配置后等待审核，通常10分钟内即可审核通过，通过后记录系统生成的CDN CNAME地址，前往域名解析服务商后台，为static.yourdomain.com添加CNAME记录，记录值填写生成的CDN CNAME地址。

5. 解析生效后使用加速域名访问资源测试（如https://static.yourdomain.com/img/logo.png），能正常打开即说明全部配置完成，将网站原有静态资源引用路径替换为加速域名路径即可正式使用。

四、常见错误

• endpoint填写错误：使用工具上传时填错对应地域的endpoint地址会提示连接失败，需确认与桶所属地域的官方endpoint一致，如七彩云不同地域的endpoint可在控制台帮助文档中查询。
• region配置错误：创建桶时选择的地域与工具配置、CDN回源填写的地域不一致，会出现资源访问404或权限报错。
• 权限问题：存储桶访问权限设为私有，或单独为某个文件设置了私有权限，会导致CDN回源失败返回403错误。
• 缓存规则配置错误：将频繁更新的JS、HTML资源缓存时间设置过长，会导致用户端长期访问旧版本资源，更新后看不到效果。
• CORS配置错误：未添加跨域规则或允许源填写错误，会导致主站加载字体、CSS等资源时出现跨域报错，资源无法正常渲染。

五、示例说明

以个人Hexo博客为例，主站域名为blog.abc.com，需要托管的静态资源包含img目录下的120张博客配图、css目录下的2个样式文件、js目录下的3个交互脚本。首先在七彩云对象存储创建名为blog-static-abc的桶，地域选择广州，权限设为公共读，开启静态网站托管，配置跨域规则允许源为https://blog.abc.com。将本地的img、css、js文件夹整体上传至桶内，访问测试地址https://blog-static-abc.7colorcs.com/img/cover.png可正常打开。随后进入CDN控制台添加加速域名static.abc.com，回源地址填写blog-static-abc.7colorcs.com，配置图片缓存30天、CSS/JS缓存7天，上传static.abc.com的SSL证书后提交审核，10分钟后拿到CNAME地址static.abc.com.cdn.7colorcs.com，前往域名解析商处添加CNAME记录，解析生效后将博客内所有静态资源引用路径从https://blog.abc.com/img/xxx.png替换为https://static.abc.com/img/xxx.png即可完成配置，博客静态资源加载速度提升约65%。

六、更简单的方案

如果觉得分开配置存储桶、回源规则、缓存策略的流程过于复杂，可以直接使用兼容S3的对象存储服务简化流程，比如七彩云对象存储，本身接入简单、兼容S3协议，控制台自带一键绑定CDN的功能，创建桶时勾选「开启CDN加速」选项，系统会自动完成CDN域名接入、回源配置、静态资源缓存规则优化，仅需自行完成CNAME解析即可，相比传统分开配置的流程节省80%的操作时间，对新手非常友好，不需要理解复杂的回源、缓存概念即可快速上线。同时因为兼容标准S3协议，所有支持S3的上传、同步工具都可直接使用，不需要额外学习新的操作逻辑，后续如果需要迁移到其他兼容S3的存储服务也不需要修改代码或工具配置，灵活性更高。

七、FAQ

1. 静态资源更新之后需要做什么操作？

如果是覆盖上传了已存在的静态资源，需要前往CDN控制台提交对应资源路径的刷新操作，清除CDN节点上的旧缓存后用户即可访问到最新资源；如果是新增的资源，不需要任何操作，直接使用新路径访问即可。

2. 这种托管方式比放在自有服务器上成本低多少？

以100G静态资源、每月1T访问流量为例，放在云服务器上的成本约为每月150-200元，使用七彩云对象存储加CDN的总成本约为每月30-50元，仅为服务器托管成本的1/4左右，且不需要考虑服务器带宽扩容、存储扩容的问题，访问量突增时也不会出现带宽占满导致资源加载失败的情况。

3. 会不会出现数据安全问题？

对象存储桶设置为公共读权限时，用户仅能读取资源，无法修改、删除资源，不会出现资源被恶意篡改的问题；同时七彩云对象存储默认提供3副本存储，数据可靠性可达99.9999999%，不会出现资源丢失的情况，比存放在单台服务器上的安全性更高。

4. 可以托管整个静态网站吗？

完全可以，不只是零散的静态资源，如果是Hexo、Hugo等生成的纯静态网站，只需要将整个网站的所有文件上传至对象存储桶，开启静态网站托管并绑定CDN后，即可直接使用加速域名访问整个网站，不需要购买服务器。

八、总结

整个静态资源托管的核心流程可归纳为三步：第一步创建并配置对象存储桶，开启公共读与静态网站托管，配置跨域规则；第二步上传静态资源，验证存储侧访问正常；第三步配置CDN加速域名，完成CNAME解析后替换网站的静态资源引用路径即可。新手建议优先选择七彩云这类操作简单、兼容S3协议的对象存储服务，不需要复杂配置即可快速上线；如果有大量静态资源，建议使用rclone等同步工具做增量上传，提高资源更新效率；配置缓存规则时要根据资源的实际更新频率设置合理的缓存时长，既保证访问速度，又避免更新不及时的问题；另外可定期查看资源访问日志，及时清理不需要的冗余资源，进一步降低存储成本。