一、背景

在阿里云上面搭建了一个博客，使用的是 hexo 博客框架，主题暂时使用的是 butterfly。

在博客选型上，之前使用的过 halo，这个博客系统相对来说比较复杂，除了前台页面还有后台管理系统，文章数据、页面信息（标签、分类等）还需要使用到数据库（mysql）。

这次是第一次使用 hexo，是静态页面，不依赖于后端服务，支持 markdown 文章格式，在本地编辑、生成 html 文件，同样也可以部署到远程服务器。

主题使用的是 butterfly，这个主题中的图片是比较多的，首页大图，各个页面的大图等。

在记笔记的过程中，笔记中涉及到的图片我都是放在 gitee 中的，配合 gitee pages 服务，可以在笔记中通过 <img alt="图片加载失败" scr=""> 来引入图片，这在 markdown 中也都是支持的。之前是有使用过有道云笔记记笔记的，不能上传图片除非开通会员，图片是上传到有道云笔记的，这就造成了图片和笔记内容的耦合过于严重。这种形式不是很好，因为如果后续需要将笔记从有道云笔记中迁移出来的时候，就会很麻烦，图片是娜不出来的。后来有道云笔记又加大了限制，免费用户增加了登陆终端的限制，在超过限制外的终端登陆时会将其他终端给顶掉，很烦。所以就从有道云笔记中迁移出来了，现在使用的是 obsidian + gitee。

笔记中的图片放在 gitee 中，配合 gitee pages 使用是没有问题的，笔记图片也不大，图片内容也没有什么不合规的地方。在使用 butterfly 时，需要上传一些首页大图等博客图片，gitee pages 说我的图片“涉黄”不能用，哇咔咔，好烦。

所以就将主题使用的图片放到 github 上，配合 github pages 使用，github pages 还可以在 push 之后自动刷新资源，不像 gitee pages 还需要在仓库管理中手动点击刷新。但国内的 github 懂得都懂，ping 值检测的时候全国一片红，即便 pages 服务的 github.io 在检测的时候下载数据前延迟也挺长的 300ms+，到图片下载的时候，好的情况下获取时间在 1s 一下，不好的时候 5s，更糟糕的时候 10s 的样子，长时间加载不出来。这个图片的问题就很难搞。

图片加载失败

然后，想到的解决方案就是，博客笔记文章内的图片还使用 gitee pages，博客主题的图片跟博客一起放到服务器上，这种图片就直接从服务器上面获取。但是你懂得，阿里云 ECS 用的是 99 块钱搞活动的，内存是 2GB 的，带宽是 3Mbps 的，贵的 ECS 是根本用不起的。导致这 10 张图片，排着队获取就要 10s。。。

图片加载失败

那怎么办呢？就再搞一个阿里云的 CDN 吧

二、配置阿里云 CDN

如果没有开通 CDN 服务的话，在进入 CDN 控制台的时候会提示未开通，勾选同意后开通一下就好，开通好之后就进入到 CDN 的配置环节了。

1、配置 CDN

在 CDN 控制台，域名管理，新增域名。

图片加载失败

加速域名，指的接入 CDN 的域名，即用户实际访问的域名，这里只用一个顶级域名 z2huo.cn。在配置了加速域名之后，需要对该域名进行 DNS 解析验证，在 DNS 解析中添加对应记录即可。

源站信息，即对于加速域名资源的访问最终需要从哪里获取，可以是 ip，也可以是域名。

图片加载失败

启用 CDN 加速服务需要将加速域名指向 CNAME 地址，这样访问加速域名的请求才能转发到 CDN 节点上。这里需要将加速域名 z2huo.cn 域名解析到提供的 CNAME 上 z2huo.cn.w.kunlunaq.com

图片加载失败

2、配置 HTTPS

需要通过 HTTPS 访问 CDN 时，需要在 CDN 配置中，给加速域名配置 HTTPS 证书，这里还是使用阿里云提供的免费的 3 个月的证书即可。

2.1 给 CDN 配置 HTTPS 证书

之前没有使用 CDN 的时候已经申请了一个包含 z2huo.cn 和 www.z2huo.cn 的证书了，所以在配置 CDN 的 HTTPS 时候直接使用之前的证书即可。

图片加载失败

在证书名称中，可以直接勾选申请过的证书，系统会自动复制公钥。配置完成后 HTTPS 就开启成功了。

图片加载失败

记得这个证书要 3 个月换一次。

2.2 对于源站访问的取舍

CDN 是配置好了，那么对于源站来说呢？是否需要通过域名访问源站？是否需要通过 HTTPS 访问源站呢？针对这两个需求的取舍，又需要对源站作出不一样的配置。

2.2.1 通过域名访问源站

这种情况下，需要给源站配置域名，因为顶级域名已经被 CDN 加速域名使用了，所以源站只能用子域名 blog.z2huo.cn。在 DNS 解析中，需要给子域名 blog.z2huo.cn 添加 A 记录指向阿里云 ECS 的 IP。

这样的结果就是，加速域名 z2huo.cn 的源站是 blog.z2huo.cn，blog.z2huo.cn 再通过 DNS 解析指向服务器 IP。

此时如果还需要通过 HTTPS 访问 blog.z2huo.cn，那么还是需要给其申请证书，因为免费版本的证书不支持通配符域名 *.z2huo.cn，所以需要单独给子域名申请证书。

图片加载失败

支持通配符的证书要好多好多钱的呀！

图片加载失败

以下是 nginx 的配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
server {
    listen 80;
    server_name _;
    rewrite ^(.*)$ https://$host$1;
}

# Settings for a TLS enabled server.
server {
    listen       443 ssl http2;
    listen       [::]:443 ssl http2;
    server_name  blog.z2huo.cn;
    root         /var/www/hexo;
    
    ssl_certificate "/etc/nginx/conf.d/cert/blog.z2huo.cn.pem";
    ssl_certificate_key "/etc/nginx/conf.d/cert/blog.z2huo.cn.key";
    ssl_session_cache shared:SSL:1m;
    ssl_session_timeout  10m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    ssl_protocols TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;
    
    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;
    
    error_page 404 /404.html;
        location = /40x.html {
    }
    
    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }
}
2.2.2 不需要通过域名访问源站

如果不需要通过域名访问源站，则将加速域名的源站直接配置成阿里云 ECS 服务器的 IP 即可。这时，对于源站来说，就只能通过 IP 进行访问，至于是否要给 IP 配置 HTTPS，是不需要的，就算需要也没有这个经济能力。因为免费版本的证书不支持 IP。

图片加载失败

这样的结果就是，加速域名 z2huo.cn 的源站是 ECS 服务器的 IP，且不开通 HTTPS，直接指向 80 端口。

以下是 nginx 配置：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
server {
    listen       80;
    listen       [::]:80;
    server_name  111.111.111.111;
    root    /var/www/hexo;
    
    # Load configuration files for the default server block.
    include /etc/nginx/default.d/*.conf;
    
    error_page 404 /404.html;
        location = /40x.html {
    }
    
    error_page 500 502 503 504 /50x.html;
        location = /50x.html {
    }
}

2024-05-28 补充：如果使用 ECS 的 IP 作为源站，指定的端口肯定是要开墙的，因为需要给 CDN 回源访问，那么访问者也是可以通过 IP 加端口的方式进行访问的。这就有点不太好，想要达到的效果是，访问者不能通过 IP 进行访问，且必须通过 HTTPS 访问。那么最好的选择是：通过子域名 blog.z2huo.cn 回源，且给子域名 blog.z2huo.cn 配置 SSL 证书，并且在 nginx 配置中 blog.z2huo.cn 的 server 配置判断条件，不让访客通过 IP 进行访问。nginx 禁用 IP 访问配置如下：

1
2
3
4
5
server {
    if ($host != $server_name) {
        return 403;
    }
}

3、CDN 缓存配置

使用的 hexo 博客都是静态页面，可以在 CDN 配置中配置缓存过期时间。

图片加载失败

主要是用的静态文件就是 html、css、js 和图片了

针对 css 和 js，这两个文件基本上是不同的，除非需要手动去修改博客主题的样式，比如我之前修改过 css 文件中的博客顶端大图的宽度，所以这两个后缀的文件设置过期时间比较长。

对于 html 而言，变更是会有点频繁的，因为新增文章，修改文章内容等操作，在 hexo 生成静态文件时会对 html 进行更改。

下图中，可以看到在首次执行 hexo generate 命令时（执行 hexo clean 之后），会生成 css、js、html、img 等静态文件。

图片加载失败

而再次执行 hexo generate 命令时（无 hexo clean），可以看到只重新生成了 html 类型的文件。

图片加载失败

所以针对 html 类型的缓存策略，可以将缓存过期时间设置的稍微短一点。如果在更新了博客之后，html 未发生变更，可以使用阿里云 CDN 控制台的刷新预热功能，让 CDN 节点重新从源站获取数据。

三、图片获取速度对比

1、github pages

图片加载失败

图片下载时间基本上在 3s 到 5s 左右。

2、直接从服务器获取数据

图片加载失败

因为购买的搞活动的 99 块钱的阿里云 ECS 带宽只有 3Mbps，换成字节就是 0.375MBps（375KBps），这个带宽在获取多个图片的时候会占用满，所以可以看到有的图片获取时间达到了 10s

3、配置阿里云 CDN

图片加载失败

效果显著啊，基本上图片在 100ms 一下，不戳不戳。

相关链接

提交SSL证书申请资料并审核签发_数字证书管理服务（原SSL证书）(SSL Certificate)-阿里云帮助中心 (aliyun.com)

OB tags

#阿里云 #CDN #HTTPS #Git #建站