图片资源升级为HTTPS

全站HTTPS成功后,页面仍然看不到标志性的小绿锁,打开devtool,看到一行warning

image.png

是由于全站https后,仍然引用的http的图片资源。接下来记录下配置https访问七牛资源的步骤。

业务模型:

图片资源升级为HTTPS_第1张图片
image.png

按照 《七牛镜像存储使用手册》中所述,分为三个步骤

配置自定义域名

需要给七牛图片空间(如 image1)配置一个自定义域名(如,image11.abc.com)

  1. 先在七牛购买证书,补全域名信息后完成购买。购买完成后出现如下信息,
图片资源升级为HTTPS_第2张图片
image.png
  1. 在自己的DNS控制台增加一个二级域名image11.abc.com,然后在自己的服务器配置二级域名image11.abc.com(服务器配置此处不作赘述)。并在上图红线所示的目录创建文件fileauth.txt,将验证文件值写入文件,重启服务器。在访问http://image11.abc.com/.well-known/pki-validation/fileauth.txt时,能看到验证文件值。

注:
此处与阿里云证书购买不同,没有提示配置服务器HTTPS的步骤(也不需要),不需要下载证书,因为后面会配置CNAME的记录值到七牛存储空间,不需要进一步配置自己的服务器,仅保证能访问到fileauth.txt的内容就可以了。

  1. 验证成功后,进入需要操作的图片空间,点击域名绑定,在加速域名的输入框输入image11.abc.com通信协议选择HTTPS,再选择刚才的购买的证书。选择好其他配置项后,点击创建
将非结构化数据的源站配置为七牛空间的镜像源站。

选择空间,然后在空间的概览页面里,找到镜像存储,然后在镜像源对话框内填入用于回源抓取资源的源站域名。比如将空间 image1 的镜像源站配置为http://image1.abc.com。

配置CNAME

自定义域名审核通过之后,在客户的DNS服务设置那里,就可以根据审核通过后提示的CNAME目标来将自定义域名绑 定到七牛的空间域名。

图片资源升级为HTTPS_第3张图片
image.png

看到上图后,就说明配置成功了,然后返回自己的服务器,可以将 image11.abc.com 二级域名的配置注释掉。
然后还可以在存储空间的 内容管理选择默认域名外链(此步骤非必须)。

至此就完成了,可以尝试访问以下https://image11.abc.com/path/1234567.jpg,看看是否有小绿锁出现。

本文记录个人配置的过程,有错误的地方,还各位望指正。

本文还参考了:
如何配置域名的 CNAME
融合CDN快速入门

你可能感兴趣的:(图片资源升级为HTTPS)