精品:千字长文手把手教你使用字节跳动的火山引擎veImageX

经过我的研究发现，这个方法竟然比较通用，于是转载群发之

veImageX 是字节跳动旗下的火山引擎推出的图像、文档等各类素材上传、托管、智能处理和 CDN 分发一站式解决方案，WPJAM Basic 的「CDN加速」功能也在第一时间整合了 veImageX。通过该功能，可以轻松让 WordPress 对静态资源进行 CDN 加速，为了方便大家的使用，我整理一个非常长的完全指南，基本上覆盖了 WordPress 使用火山引擎 veImageX 进行静态资源 CDN 加速的方方面面，欢迎大家收藏，方便碰到问题时候查询。

veImageX 的镜像回源功能原理

首先我们说一下背后的原理，WPJAM Basic 的 CDN 加速功能是使用 veImageX 的镜像回源的功能实现的，所以为了方便理解和操作，建议使用之前首先要理解镜像回源的原理。 当网站的用户请求的资源不存在的时候，可以通过回源规则从设定的源地址获取到正确的数据，然后再返回给网站的用户。

WordPress 博客上的图片，CSS，JS 这些静态文件一般都是不会经常修改的，使用镜像回源功能把这些静态文件资源镜像到 veImageX 的服务器上，网站用户访问的时候就直接从 veImageX 的服务器上读取数据，这样可以降低网站服务器读取数据的压力和提高网站的速度。并且使用镜像回源功能实现静态资源 CDN 加速并不影响 WordPress 原来的使用体验，原来怎么上传图片还是继续在 WordPress 中怎么操作即可。

为什么不直接上传到 veImageX？

从前面的介绍可知，用户还是要首先将图片上传到 WordPress 的媒体库，然后再通过镜像回源的功能来同步到 veImageX。为什么不直接上传到到 veImageX 呢？这样就不用经过 WordPress 媒体库。如果要实现直接上传，需要对接 veImageX 的 API ，这个需要额外的时间开发，并且每家的云存储提供的 API 略有不同，每增加一个云存储服务，都需要额外的二次开发，而每家云存储的镜像回源功能基本一致，并且 API 对接还会存在一定失败率。使用镜像回源功能还有一个好处，就是已经发布的历史文章里面的图片也能镜像到 veImageX 上，我们所需要做只需要按照下面的指引设置好即可，其他什么都不用做，然后用户访问之后，网站上的所有图片都会全部自动镜像到 veImageX。

一步一步教你使用 veImageX

了解清楚 WPJAM Basic 对接 veImageX 的原理之后，下面我们开始一步一步开通和使用 veImageX，一共有7个步骤，但是完全不用担心，只要耐心跟着步骤做就可以完美搞定。 1. 首先注册开通火山引擎 veImageX 产品，记得点我的链接，火山引擎会给我返佣，看在我做的插件，和那么辛苦写教程份上，所以一定要点击这个链接哦。开通的时候填写我的邀请码：CLEMNL，可以领取福利：每月免费额度（10GB流量+10GB存储+20TB基础处理）+https访问免费+回源流量免费。 2. 然后开启火山引擎的 veImageX 服务，点击点击右侧「服务管理」按钮，创建一个新的存储空间：

服务名称：根据自己的填入。
地区：根据你网站用户在哪里最多选择。
服务类型：选择图像处理服务。
绑定域名：请输入你要绑定的 CDN 域名。
服务属性：选择永久保存。

然后点击保存，火山引擎就会审核你的服务，审核好之后，火山引擎就会给你一个绑定域名的 CNAME 值，把它填到你域名管理的对应 CDN 子域名的 CNAME 里面。

3. 创建好服务之后，我们要进行镜像回源设置，点击上图的「基础配置」按钮：首先可以设置 CDN 域名的 https 证书：

这一块比较简单，我就不做介绍了，接着打开源地址访问：

然后页面往下滚动，就可以进行设置镜像回源：

我们只需要在主回源地址填入 WordPress 博客的域名即可，备用回源地址在后面迁移可能用到，这里暂时留空。 4. 接着要设置 veImageX 的图片处理模板，用于智能缩放和裁剪图片，在前面第二步生成的服务中，点击「图片配置」按钮，进入图片处理配置页面，点击「新建模板」:

首先常规编辑，模板名称，根据自己的喜好进行设置，输出源格式选择原格式即可。

编辑操作就要求比较严格，要首先设置缩放，然后再设置裁剪，缩放的宽高和裁剪的尺寸都选择 URL输入，这样就能适配 WordPress 中各种尺寸的图片缩放和裁剪的需求。设置好之后，将会得到一个模板配置参数，比如我设置的： ~tplv-g7ckde5uoo-image:resize_width:resize_height:crop_width:crop_height.image 这里 resize_width:resize_height:crop_width:crop_height 这一段一定要有，并且要顺序和这里保持一致。 5. 在 veImageX 后台设置后之后，我们回到 WordPress 博客后台，安装好 WPJAM Basic 插件之后，在 WordPress 后台点击菜单「WPJAM」> 「CDN 加速」：

云存储：选择火山引擎veImageX。
CDN域名：输入在 veImageX 中设置的域名。
图片处理：建议勾选上，这样我们就可以使用 veImageX 对图片进行缩放和裁剪等操作了。 6. 然后我们先切换到「图片设置」标签下，进行缩图和其他图片的设置设置

首先是缩图功能，因为 veImagex 已经提供更为强大的缩图功能，这里首先提供一个选项，直接使用 veImagex 的缩图功能，本地就无需再生成各种尺寸的缩略图了。然后还可以设置文章中图片的尺寸，比如上图中设置为600，那么文章中图片最大图片宽度为 1200（2倍高清图显示），超过的图片会被缩放到 1200 宽度，这样就不怕大图花费 CDN 流量了，这个建议根据前端网页的宽度来设置。接着是 WebP 格式，支持自动将任意格式的图片转换成 WebP 格式，经过我测试使用 WebP 图片格式可以省一半的流量费，所以无需怀疑，直接开启。最后输入刚才在 veImageX 后台生成的「模板配置参数」，WordPress 是根据这个配置进行智能缩放和裁剪处理的。 7. 最后 WordPress 博客本地还需要进行本地域名和文件扩展名等的设置：

首先输入的是本地域名，就是 WordPress 博客的域名，特别注意的是，一定要把本地域名也填入 veImageX 的镜像源中。 veImageX 最后是否生效就是这里起作用的，程序会把页面中的静态资源地址替换成 CDN 上的静态文件地址，用户访问网站看到静态文件就会是 CDN 上的地址，如果 CDN 上没有这个文件，veImageX 就会通过我们在镜像源中设置的地址来抓取并保存到 veImageX 中，然后再进行 CDN 加速。然后如果站点中有些静态资源的链接是 //域名/图片地址.jpg 这样的无 HTTP 模式，如果需要把这部分静态资源也镜像到 veImageX，那么就要开启「无 HTPP 替换」这个选项。接着输入要CDN加速的静态文件的扩展名，默认支持 png / jpg / jpeg / gif / ico 这常用的五种图片扩展名，如果你想支持 JS 和 CSS 也 CDN 加速，你也可以把 js / css 加入。继续输入要CDN加速的静态文件所在的目录，这里的设置和上面的设置会构成一个正则表达式，然后使用这个正则表达式来替换本地的静态文件地址为CDN上的静态文件地址。额外域名基本用不到，如果你是从别的云存储迁移过来的，可能会用得到，我们在后面再讲。

如何迁移到 veImageX

由于火山引擎 veImageX 上线的时间比较晚，所以绝大部分的 WordPress 博客都已经使用了其他云存储服务，很多人可能基于稳定压倒一切的想法，害怕出问题，就不想迁移了。其实迁移根本不会有什么大的问题，并且现在火山引擎推广期间，使用我的邀请码 CLEMNL，可以领取福利：每月免费额度（10GB流量+10GB存储+20TB基础处理）+https访问免费+回源流量免费，对于很多博客来说，基本就不要钱了。在迁移之前，可能本地的图片被删除了，为什么呢？因为当所有本地图片镜像到云存储之后，本地的图片是可以删除的，这时候用户访问图片是云存储上的，本地的图片是不会再被访问了，所以有些服务器空间比较小用户，就会删除自己服务器上的图片，节省空间。这个删除本地图片的操作就造成迁移的时候产生了两种情况，大家根据自己的情况来选择操作：第一种，图片在自己的服务器还有保留：这种情况迁移非常简单，CDN 域名都不需要换。这种情况完全按照上面 veImageX 开通和使用指引进行操作，没有任何额外的问题，在新的服务那里设置回源站点，最后把 CDN域名按照新的服务要求修改解析即可，搞定之后等待用户访问你站点的时候，新的对象存储服务就会到你的服务器去抓取图片，然后展示给用户。第二种，自己服务器上全部或者部分删除图片了，这个时候就有点复杂，需要使用一个新的 CDN 域名。为了更好的理解，假设我们从七牛云存储迁移到 veImageX：博客源站域名是：https://blog.wpjam.com。
在七牛设置的 CDN 域名是：https://cdn.wpjam.com
在 veImageX 新的 CDN 域名是：https://cdnnew.wpjam.com，首先还是一样根据上面 veImageX 开通和使用指引进行操作，然后有两个不同的地方： 1. 在 veImageX 设置镜像回源的地方，除了自己服务器域名之外，还需要把在七牛设置的 CDN 域名也要添加到备用源站地址，就是利用 veImageX 镜像回源功能会依次匹配的能力去实现的，本地图片删除了，就到原来 CDN 去抓取。

2. 然后按照 veImageX 的要求，解析新的CDN域名**：https://cdnnew.wpjam.com，在七牛设置的 CDN 域名 https://cdn.wpjam.com 的解析保持不变。 3. 最后回到 WPJAM Basic 的「CDN 加速」功能设置界面，把原来在七牛云存储的 CDN 域名（https://cdn.wpjam.com）填入「本地设置」标签下的「额外域名**」中，把新的 CDN 域名（https://cdnnew.wpjam.com）填入「云存储设置」标签下的「CDN 域名」中。

使用 veImageX 常见问题

虽然上面的 veImageX 的使用指引已经非常详细了，但是很多小伙伴在使用的时候，还是经常碰到一些问题，下面我把常见的问题整理一下：

1. 设置好之后，怎么判断成功了？

其实很好判断，简单说，打开自己网站，按 F12 查看网页源代码，看看图片的地址是不是替换成 CDN 域名了，如果图片都替换成 CDN 域名，则基本说明生效了。为什么要加上基本呢？可能部分用户的 CDN 域名没有按照要求解析到 CDN 上，所以还需要做最后一步的确认。直接打开其中的一张图片查看其响应标头，看看响应标头里面有 X-Powered-By: ImageX 的响应标头：

2. 为什么 veImageX 的空间里没有看到任何的文件？

veImageX 通过镜像回源的方式把博客里面的图片抓取到 veImageX 的空间是实时的，但是 veImageX 的空间里面文件列表的显示是有延迟的，所以有时候可能看不到最新文件，如果刚刚使用「CDN 加速」功能，可能veImageX的空间里没有任何文件。 veImageX 的空间的文件列表由于缓存而造成显示延迟，这个并不会影响图片和其他静态资源的加速和使用，所以无需太过担心，正确的检测 CDN 加速成功，还是使用前面的方法：查看文件的响应标头是否有veImageX 的特殊标头。这里在特别分享一个案例，有些用户使用了 CDN 加速之后，发现图片都没有显示，后面过了一段时间才显示，并且还造成网站更慢。这是因为他的服务器带宽比较小，设置了 CDN 加速之后，veImageX 的镜像回源的爬虫来到他的服务器来抓取所有的静态资源，短时间抓取很多文件，并发很大，小水管卡住了，所以刚刚设置的时候，没有显示，甚至样式都乱了，慢慢等一下，等图片和静态资源都抓取完成，小水管终于通了，并且不用处理静态资源，小水管服务器也可以网站速度很快。

3. 我感觉什么都设置好了，但是图片还是不显示？

首先要不要你感觉，要我感觉。