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


但是不乏有部分站长不愿意使用七牛、又拍这种便利的方式,(原因:贵)
如果你想使用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 最终测试

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


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

引用内容:①https://huai.pub/2020/03/31/%E6%9C%89%E5%85%B3%E8%B7%A8%E5%9F%9F%E8%AF%B7%E6%B1%82%E7%9A%84%E4%B8%80%E4%BA%9B%E8%AE%B0%E5%BD%95/ 参考文献:①https://www.starroad.top/archives/671.html
最后修改:2020 年 08 月 30 日
如果觉得我的文章对你有用,请随意赞赏