很久之前我已经写过了如何将静态文件同步到七牛的教程:

将自己网站的静态文件同步到七牛

引入网站的访问速度很大程度影响了访客是否愿意继续关注你的网站,一个速度优化好的网站,可以留住更多的访客。通常我们会...


但是不乏有部分站长不愿意使用七牛、又拍这种便利的方式,(原因:贵)
如果你想使用oss(或小厂对象存储)进行存储,这篇文章就是为你准备的。

方法一:静态存放

优点:文件只存于oss,绝不会向源站发起请求,访问时不会因为重新请求文件而卡顿。缺点:主题更新、静态文件新增时需要重新上传,灵活性较低。

Step 1 下载静态文件

以handsome为例,静态文件目录是:/usr/themes/handsome/assets/
你需要下载静态文件,并进行校验(不要压缩!不要压缩!不要压缩!)

Step 2 上传静态文件

创建阿里云的oss,地域建议选择国内,读写权限选择公共读(不选择私有接CDN的原因是怕负担不起,如果你深爱阿里的CDN,可以参照参考文献的第二条。本站的文章仅介绍用第四方(非厂商名)CDN。
新建OSS
将静态文件上传到oss内,oss的操作方式可以发送工单询问工程师。
建议新建文件夹,不要放在根目录
/assets/usr/themes/handsome/assets/均可

Step 3 绑定域名

在oss处对域名进行绑定,如果是HTTPS的站点务必申请证书,避免报错。(此处不贴具体方式,有需要可以发送工单)
有条件的用户可以使用CDN进行加速,也有一定的防攻击能力(虽然静态文件本身不会产生大量流量)。

Step 4 跨域配置

这边做个简短的解释:如果访问的域名与静态文件的域名不一样,就会触发跨域,浏览器会无法正常访问部分静态文件的资源,就会报错。这种问题需要对域名进行授权才能解决。

如果你使用的是oss直接绑定域名,你需要进入权限管理→跨域设置并创建规则,来源填写自己主站的域名即可(一定程度上可以防盗链),CDN用户可以参照进行配置,允许的请求方式设置为GET
OSS跨域配置
腾讯CDN用户进入高级配置→HTTP Header配置→添加HTTP Header→选择参数Access-Control-Allow-Origin并在“值”填写自己的域名
腾讯云Header配置

常见的Header 参数


请求端:

Origin:请求中用来标示源的字段

Access-Control-Request-Method:Preflight request(预请求)中标示本次请求方式的字段

Access-Control-Request-Headers:Preflight request(预请求)中标示本次请求头部的字段

响应端:

Access-Control-Allow-Origin:响应中标示允许源的字段

Vary:响应中标示此次请求响应是以何种方式判别(好像很拗口),就是用来告诉浏览器如何控制缓存的啦。如果本次请求返回'Vary: Origin’,说明响应是根据源来响应的,下次同源的请求就可以使用上次的缓存了。

Access-Control-Allow-Methods:响应中标示允许的请求方式

Access-Control-Allow-Headers:响应中标示允许的头部

当我们遇到跨域问题,就可以去检查响应端的这些参数,是否对请求的类型允许。

Step 5 最终测试

访问网站,查看是否正常显示,而后对不正常的文件进行修复即可。

方法二:镜像空间

优点:无需频繁修改,主题更新时删除变动文件即可重新获取。缺点:文件可能损坏,实时获取可能出错,第一次获取文件会卡顿。

Step 1 新建oss

创建阿里云的oss,地域建议选择国内,读写权限选择公共读(不选择私有接CDN的原因是怕负担不起,如果你深爱阿里的CDN,可以参照参考文献。本站的文章仅介绍用第四方(非厂商名)CDN。
新建OSS

Step 2 设置镜像回源

镜像回源
按照图示进行设置即可。
ps:图示路径有误,请按照主题文档修改

Step 3 设置镜像回源

该方式同样适用于静态文件存于不同服务器的网站,希望可以

Step 4 绑定域名

在oss处对域名进行绑定,如果是HTTPS的站点务必申请证书,避免报错。(此处不贴具体方式,有需要可以发送工单)
有条件的用户可以使用CDN进行加速,也有一定的防攻击能力(虽然静态文件本身不会产生大量流量)。

Step 5 跨域配置

如果你使用的是oss直接绑定域名,你需要进入权限管理→跨域设置并创建规则,来源填写自己主站的域名即可(一定程度上可以防盗链),CDN用户可以参照进行配置,允许的请求方式设置为GET
OSS跨域配置
腾讯CDN用户进入高级配置→HTTP Header配置→添加HTTP Header→选择参数Access-Control-Allow-Origin并在“值”填写自己的域名
腾讯云Header配置
其他请求头可以查看“方法一”的第四步

Step 6 最终测试

访问网站,查看是否正常显示,而后对不正常的文件进行修复即可。


总结:将静态文件存放到对象存储可以显著提升访问速度,但是钱包要紧,希望本篇文章可以帮到各位准备入坑的站长。

最后修改:2023 年 06 月 24 日
如果觉得我的文章对你有用,请随意赞赏