一、背景

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

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

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

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

在记笔记的过程中，笔记中涉及到的图片我都是放在gitee中的，配合gitee pages服务，可以在笔记中通过<image 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 #建站