这篇文章飞牛介绍如何使用插件将 WordPress 的媒体库附件存储在腾讯云对象存储 COS上实现网站动静分离，并配合腾讯云内容分发网络CDN 进一步提升用户查看图片附件的速度，优化网站访问速度。
在对象存储和cdn上，飞牛踩了很多坑，也一度放弃过。
不过本着折腾精神，飞牛不断试错，算是慢慢摸索出一些门道。下面飞牛尽量用最精简的语言准确地描述wordpress实现腾讯云对象存储cos+CDN的过程，请严格遵照步骤操作
一、创建存储和部署cdn加速域名
（一）创建一个公有读私有写的存储桶，存储桶的地域建议与运行 WordPress 博客平台的 CVM 的地域相同（也就是说你的主机或空间是哪个地方的，就选哪个地方）。
飞牛士是放在香港的，所以存储桶也选择【中国香港】，访问权限选择【公有读私有写】。
（二）创建成功后，转到存储桶列表，进行回源设置，作用是访问网站时，自动将图片文件存储到COS中，无需自己手动上传图片。
点击基础配置-回源设置，添加回源规则，一般填写域名即可，最后单击【保存】即可。COS暂时不支持HTTPS回源，也就是说源站不能开启强制HTTPS访问，否则是无法回源获取静态资源的。
（三）进入云产品–CDN与加速–内容分发网络。添加加速域名。这里添加的加速域名如果是要在中国境内加速的话，是必须要备案的域名，比如cdn.feinews.com。
添加域名后，还要进行相应的别名解析，如果你需要全站https，还需要部署证书，腾讯云有免费的证书申请，可以参照配置。可参照官方文档（CDN 加速配置） 。
二、安装并配置插件
（一）安装cos插件
在 WordPress 后台，单击【插件】>【安装插件】，开始安装插件。您可通过下面两种方式获取插件并安装：
- 后台直接搜索 Sync QCloud COS 进行安装（推荐使用）。
- 您也可以从 Github 下载最新 releases 源码，通过 WordPress 后台上传安装，或者直接将源码上传到 WordPress 插件目录
wp-content/plugins，然后在后台启用。
（二）配置cos插件
单击 WordPress 左侧导航栏【设置】，然后在页面中配置 COS 的相关信息，配置说明见下表：
| 配置项 | 配置值 |
|---|---|
| 存储桶名称 | 创建存储桶时自定义的名称 |
| 存储桶地域 | 创建存储桶时所选择的地域 |
| APPID | APPID 是您在成功申请腾讯云账户后所得到的账号，由系统自动分配，具有固定性和唯一性，可在 账号信息 中查看。 |
| SecretID、SecretKey | 访问密钥信息，可前往 云 API 密钥 中获取 |
| 不上传缩略图 | 勾选后不会上传对应的缩略图文件，建议不勾选 |
| 不在本地保留备份 | 勾选后不会在本地保留源文件，建议不勾选 |
| 本地文件夹 | 本地保存路径，例如wp-content/uploads |
| URL前缀 | 对象存储保存路径，例如https://cdn.feinews.com/wp-content/uploads |
| 保存/更新选项 | 完成上述设置后，点击保存更改即可 |
| 图片处理样式 | 这个按你实际需要填写，也可以留空 |
| 同步历史附件 | 这个不需要操作，因为刚才我们部署了回源和cdn，会自动获取静态资源 |
| 数据库原链接替换 | 不需要操作 |
一定要注意以下几点：
（三）安装cdn插件
飞牛士用的是积木插件，里面有个cdn选项，可以将网站的静态资源地址替换到cdn域名地址。比如www.feinews.com/logo.png替换成cdn.feinews.com/logo.png。直接填入地址保存即可。
如果你不使用积木插件，你可以自行安装wordpress相关cdn插件，功能基本都大同小异。CDN Enabler 推荐使用这个。
基本原理就是把指定目录的静态文件，比如jpg,png,gif等静态图片以及css,js等文件的地址从www.feinews.com换成在腾讯云cdn加速设置的域名cdn.feinews.com。
如此设置以后网站基本就实现了动静分离和cdn静态加速了。
三、测试效果
首先上传一个新文件进行测试，查看附件详情，查看附件图片的 URL，确认附件图片的 URL 指向腾讯云 COS的加速地址。
接下来你可以在腾讯云控制台刷新cdn目录，或者自行刷新网站页面。cdn会拉取静态资源并存储到存储桶（cos）里面。至于数据库的地址批量替换这些，飞牛在这里不推荐。等待cdn生效以后，自行测试是否有其他错误，如果有错误，尽量学会自己看浏览器控制台是什么错误。
#扩展
#如果在文章中引用对应的资源链接，控制台提示跨域的错误No 'Access-Control-Allow-Origin' header is present on the requested resource。原因是没有添加 header。您需要在跨域访问 CORS 设置中添加 HTTP Header 配置。下面提供两种途径进行配置（两选一，推荐第二个）：
（一）在 COS 控制台上配置
关于跨域配置操作步骤，请参见 设置跨域访问 文档。
（二）在 CDN 控制台上配置
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
© 文章系本站作者 飞牛 原创发布于「飞牛士 FeiNews」，文章授权后方可转载，请勿侵权！