wordpress实现动静分离(对象存储+CDN)

技术文档评论835阅读模式

这篇文章飞牛介绍如何使用插件将 WordPress 的媒体库附件存储在腾讯云对象存储 COS上实现网站动静分离,并配合腾讯云内容分发网络CDN 进一步提升用户查看图片附件的速度,优化网站访问速度。

在对象存储和cdn上,飞牛踩了很多坑,也一度放弃过。文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

不过本着折腾精神,飞牛不断试错,算是慢慢摸索出一些门道。下面飞牛尽量用最精简的语言准确地描述wordpress实现腾讯云对象存储cos+CDN的过程,请严格遵照步骤操作文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

一、创建存储和部署cdn加速域名

(一)创建一个公有读私有写的存储桶,存储桶的地域建议与运行 WordPress 博客平台的 CVM 的地域相同(也就是说你的主机或空间是哪个地方的,就选哪个地方)。文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

飞牛士是放在香港的,所以存储桶也选择【中国香港】,访问权限选择【公有读私有写】。wordpress实现动静分离(对象存储+CDN)
(二)创建成功后,转到存储桶列表,进行回源设置,作用是访问网站时,自动将图片文件存储到COS中,无需自己手动上传图片。文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

点击基础配置-回源设置,添加回源规则,一般填写域名即可,最后单击【保存】即可。COS暂时不支持HTTPS回源,也就是说源站不能开启强制HTTPS访问,否则是无法回源获取静态资源的。
wordpress实现动静分离(对象存储+CDN)
(三)进入云产品-CDN与加速-内容分发网络。添加加速域名。这里添加的加速域名如果是要在中国境内加速的话,是必须要备案的域名,比如cdn.feinews.com。文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

添加域名后,还要进行相应的别名解析,如果你需要全站https,还需要部署证书,腾讯云有免费的证书申请,可以参照配置。可参照官方文档(CDN 加速配置) 。
wordpress实现动静分离(对象存储+CDN)文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

二、安装并配置插件

(一)安装cos插件文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

在 WordPress 后台,单击【插件】>【安装插件】,开始安装插件。您可通过下面两种方式获取插件并安装:文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

  • 后台直接搜索 Sync QCloud COS 进行安装(推荐使用)。
  • 您也可以从 Github 下载最新 releases 源码,通过 WordPress 后台上传安装,或者直接将源码上传到 WordPress 插件目录wp-content/plugins,然后在后台启用。

(二)配置cos插件文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

单击 WordPress 左侧导航栏【设置】,然后在页面中配置 COS 的相关信息,配置说明见下表:文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

配置项配置值
存储桶名称创建存储桶时自定义的名称
存储桶地域创建存储桶时所选择的地域
APPIDAPPID 是您在成功申请腾讯云账户后所得到的账号,由系统自动分配,具有固定性和唯一性,可在 账号信息 中查看。
SecretID、SecretKey访问密钥信息,可前往 云 API 密钥 中获取
不上传缩略图勾选后不会上传对应的缩略图文件,建议不勾选
不在本地保留备份勾选后不会在本地保留源文件,建议不勾选
本地文件夹本地保存路径,例如wp-content/uploads
URL前缀对象存储保存路径,例如https://cdn.feinews.com/wp-content/uploads
保存/更新选项完成上述设置后,点击保存更改即可
图片处理样式这个按你实际需要填写,也可以留空
同步历史附件这个不需要操作,因为刚才我们部署了回源和cdn,会自动获取静态资源
数据库原链接替换不需要操作

一定要注意以下几点:文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

wordpress实现动静分离(对象存储+CDN)文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

(三)安装cdn插件文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

飞牛士用的是积木插件,里面有个cdn选项,可以将网站的静态资源地址替换到cdn域名地址。比如www.feinews.com/logo.png替换成cdn.feinews.com/logo.png。直接填入地址保存即可。文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

如果你不使用积木插件,你可以自行安装wordpress相关cdn插件,功能基本都大同小异。CDN Enabler 推荐使用这个。 文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

基本原理就是把指定目录的静态文件,比如jpg,png,gif等静态图片以及css,js等文件的地址从www.feinews.com换成在腾讯云cdn加速设置的域名cdn.feinews.com。文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

如此设置以后网站基本就实现了动静分离和cdn静态加速了。文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

三、测试效果

首先上传一个新文件进行测试,查看附件详情,查看附件图片的 URL,确认附件图片的 URL 指向腾讯云 COS的加速地址。
wordpress实现动静分离(对象存储+CDN)
接下来你可以在腾讯云控制台刷新cdn目录,或者自行刷新网站页面。cdn会拉取静态资源并存储到存储桶(cos)里面。至于数据库的地址批量替换这些,飞牛在这里不推荐。等待cdn生效以后,自行测试是否有其他错误,如果有错误,尽量学会自己看浏览器控制台是什么错误。文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

#扩展

#如果在文章中引用对应的资源链接,控制台提示跨域的错误No 'Access-Control-Allow-Origin' header is present on the requested resource。原因是没有添加 header。您需要在跨域访问 CORS 设置中添加 HTTP Header 配置。下面提供两种途径进行配置(两选一,推荐第二个)
(一)在 COS 控制台上配置
wordpress实现动静分离(对象存储+CDN)关于跨域配置操作步骤,请参见 设置跨域访问 文档。文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

(二)在 CDN 控制台上配置文章源自飞牛士 FeiNews-https://www.feinews.com/experience/1120.html

cdn-域名管理-高级配置-Response Header配置

如允许所有域名,则添加配置如下:
Access-Control-Allow-Origin: *
只允许您个人的域名访问,则配置如下:
Access-Control-Allow-Origin: https://example.com

#如果图片报错

如果开启了cdn-图像优化-webp自适应的话,很有可能出现有些图片加载不出,控制台报错,net::ERR_HTTP2_PROTOCOL_ERROR 200,你可以选择不开启webp自适应,如果要开启webp自适应,可以在cdn里配置智能压缩将jpg;gif等图片格式添加进去,

文章参考:
https://cloud.tencent.com/document/product/436/41153
https://cloud.tencent.com/document/product/436/18670

匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定