配置七牛云融合 CDN 加速域名

前言

这部分是闲白儿。

最近自己做的项目 votes 不太尽如人意,很多 bug,基本是不可用状态。

还有一个很大很大的问题就是:太慢了,用的是腾讯云 1H1G1M 的乞丐机。

打开页面白屏时间长达好多好多秒,之前在做 OJ 的项目的时候,处理办法是在打包的时候将静态资源上传到七牛上,这样就会快不少。

当然了,这个办法是最简单,最粗暴的了。

前端性能优化是一个很大很大的话题,涉及到的知识很多很多。

但是,过早优化是万恶之源,切切

默认测试域名的局限

七牛云还是相当的良心,为开发者提供每个月 10G 的免费 CDN 加速额度(仅限 HTTP),10G 的对象存储额度。用来做个图床啥的是相当的棒,具体的收费标准可以看看这里

每新建一个 bucket,就会给分配一个默认的测试域名,形如: oq5td7hx8.bkt.clouddn.com,但是这种测试域名会有一些的限制,使之不能用于生产环境下:

  1. 不能支持 HTTPS 协议
  2. 限制总流量,限制单 IP 访问频率(对于个人的博客啥的没啥影响)
  3. 不能自定义域名的 CNAME

如果把自己项目的 css,js 等静态文件放到七牛上,确实可以加速静态资源,但是域名不能配置 HTTPS 证书,因为新版的 Chrome 不支持开启了 HTTPS 的域名加载 HTTP 域名上的静态资源,报错如下:

Mixed Content: The page at 'https://asset.raoul1996.cn/' was loaded over HTTPS, but requested an insecure script 'http://p5j565es2.bkt.clouddn.com/static/static/js/manifest.2021ff148ba367e3ae65.js'. This request has been blocked; the content must be served over HTTPS.

那么要怎么办呢?需要配置融合 CDN 加速域名

配置融合 CDN 加速域名

如果开启了全站 HTTPS,那么配置融合 CDN 加速域名的时候同样需要是开启了 HTTPS 的域名。

域名的 ICP 备案等详细信息可以在云服务商那里进行处理,这里不进行详细阐述。

如果在七牛上有域名的话,操作当然会很方便,跟着教程进行就可以,但是如果不满足上述情况的话,官方的文档并不是很完善。

所以这里使用使用腾讯云为例,进行一下简单的配置。

创建域名

create CDN Domain

然后需要输入自己要加速的域名(需要自行添加解析),以及使用的协议等

config-http-cdn

然后就会是这个样子,记录下 CNAME 的值

CNAME

添加域名解析记录

注意:这里使用腾讯云为例,别的大同小异

配置项主要有以下的三条:

然后,就可以看到域名已经生效。可以在回源设置中指定域名绑定的 bucket 等。

success-cdn

为融合 CDN 域名添加 HTTPS 支持

申请 SSL 证书

一般可以通过域名服务商那里进行快速申请免费的单域名 SSL 证书,还有人使用野卡证书,不详细进行阐述。

转换 SSL 证书的格式

一般在腾讯云申请下来的证书的格式不是 .pem 格式的,需要转换成 .pem 才能在七牛上使用。

stackoverflow上找到这样的解决办法:

将申请下来的 .crt 证书转为 pem 格式:

openssl x509 -in server.crt -out server.pem -outform PEM

.key 转换为 pem 格式:

openssl rsa -in server.key -text > server.pem

上传 SSL 证书到七牛

上传已经转换好的证书的内容即可。

开启融合 CDN HTTPS 支持

在想要开启 HTTPS 支持的融合 CDN 域名处设置好对应的 SSL 证书即可。

由于 HTTPS CDN 流量没有免费额度,所以需要在七牛云上进行充值付费操作。

后言

使用七牛进行 CDN 加速的话,在使用 webpack 打包的时候一定要添加 hash 来控制静态资源的版本。不然会出现很多由于 CDN 缓存带来的问题,需要注意。

在文章的示例中,使用的是公开 bucket,SSL 证书在申请的时候并没有进行加密。进行配置的时候可以根据自己的需求进行取舍。

Table of Contents