图片来源：图虫创意

我们已经知道网站使用 CDN 加速后能有效地缓解服务器压力，更快速的加载网站页面，也通过 CDN 实操成功完成了阿里云对象存储 OSS 与 CDN 加速的设置。

一切皆大欢喜。

当我在给网站部署 SSL 证书时，网站竟然崩了！！

说网站崩了确实是我夸张了，实际上网站的内容依旧能照常显示，但是网站的 CSS 样式和 JS 脚本却加载不出来，导致整个网页显示异常。

反复尝试几次后，我发现了问题，因为我的网站使用了 CDN 加速，我的 CDN 加速域名是 cdn.matchtools.top，我把这些静态资源（png、jpg、gif、ico、css、js）存放在 CDN 服务器上，在没有部署 SSL 证书前，一切都能正常访问。当我给网站部署 SSL 证书后，网站网址从 https://matchtools.top，变为了 https://matchtools.top，而 CDN 加速域名还是 http://cdn.matchtools.top，这样就会造成存放在 CDN 服务器上的 CSS 样式和 JS 脚本无法加载过来了。

解决思路：

网站域名 matchtools.top 部署 SSL 证书

CDN 加速域名 cdn.matchtools.top 部署 SSL 证书

网站和 CDN 加速都同时部署证书，经过测试此方法能完美解决网站显示异常。

什么是SSL证书

百度百科的解释：

SSL 证书是数字证书的一种，类似于驾驶证、护照和营业执照的电子副本。因为配置在服务器上，也称为 SSL 服务器证书。SSL 证书就是遵守 SSL 协议，由受信任的数字证书颁发机构 CA，在验证服务器身份后颁发，具有服务器身份验证和数据传输加密功能。

SSL 证书通过在客户端浏览器和 web 浏览器之间建立一条 SSL 安全通道（Secure socket layer(SSL)，对传送的数据进行加密和隐藏；确保数据在传送中不被改变，保证数据的完整性。

为什么要部署SSL证书

SSL 证书是用来保护网站安全的，让网站在数据传输过程中不受到攻击和泄露，目前对网站而言，部署 SSL 证书是必须的。如果不部署 SSL 证书，尤其在谷歌浏览器中会被显示网站不安全警告。

图片来源：bing截图

CDN+SSL 解决方法

1. 购买SSL证书

到阿里云上购买免费证书。

图片来源：阿里云

购买完毕后点击“创建证书”，能看到证书处于“待申请”的状态。

2. 申请SSL证书

点击“证书申请”填写以下信息：

• 证书绑定域名：自己的网站域名 / CDN 加速域名

• 域名验证方式：手工 DNS 验证

• 联系人：填自己的

• 所在地：填自己的

• 密钥算法：RSA

• CSR 生成方式：系统生成

填写完毕后到 DNS 云解析后台添加 DNS 解析配置，之后点击“验证”，等待证书签发，平均签发时间 5 分钟左右。

证书签发成功后，会在状态一栏看到“已签发”。记得申请两个 SSL 证书，一个绑定网站的域名，另一个绑定 CDN 加速的域名。

3. 部署SSL证书

接着下载 SSL 证书，解压会得到一个 PEM 文件（也称为公钥）和一个 KEY 文件（称为密钥）。

到阿里云 CDN 后台配置证书，填写以下信息：

• 证书来源：自定义上传（证书+私钥）

• 证书名称：填写证书 ID

• 证书（公钥）：把 PEM 文件里的内容全部复制

• 私钥：把 KEY 文件里的内容全部复制

下一步关联对应的域名，点击“完成”。这样 CDN 加速的 SSL 证书就部署成功了。

接着到宝塔后台部署网站的 SSL 证书，与 CDN 加速的 SSL 证书类似，分别把 PEM 文件和 KEY 文件里的内容复制到对应的框中，勾选“强制 HTTPS”选项，并保存。

以上，就完成了网站和 CDN 加速的 SSL 证书部署。这时再测试网站已经可以正常跳转正常显示了。唯一需要注意的是，别把两个证书的 PEM 文件、KEY 文件弄混了。