前言

首先说下为啥要写这篇文章呢？因为本人的博客搭建用的是GithabPage+Hexo依托于Github的能力。但是我们平日正常访问Github的响应速度也就那样，很多时间本人都是通过科学上网并且开启全局代理才能快速渲染页面，可想而知*.github.io的速度并不是很让人满意。为了让该站点的打开速度加快，显而易见的是采用缓存技术（浏览器缓存、CDN、反向代理），该篇文章主要从Blog响应速度优化（图片加载、JS加载）来谈谈常用的缓存技术以及本人最后选择的缓存技术。

CDN

CDN（Content Delivery Network）技术我想其实大家都不陌生，大多数企业所开发的Web应用为解决静态资源加载速度、网络堵塞以及考虑到服务器带宽都会运用该技术。要了解CDN的具体原理也很简单，其本质就是反向代理，由于CDN是做了网络拓扑使得CDN技术拥有负载均衡、多节点缓存、动态路由等特性。
cdn-structure
一开始的方案本人也是选择了CDN并且在一众CDN服务商之间选择了又拍云，因为又拍云还有免费的SSL证书（免费的DV证书正好个人博客比较适合）。想的很美好大致操作如下图所示：
cdn-opation
然后兴冲冲的跑到阿里云买了一个自己的域名，结果国内CDN加速的域名都需要ICP备案，本人嫌备案比较麻烦且目前博客面向的用户大多数都是本人的朋友基本都在浙江这块区域，因此就放弃了使用国内CDN的方案，最终使用了本人自己在华东的腾讯云服务器搭建一台Nginx反向代理服务器缓存图片、JS等静态资源实现博客访问加速的效果。

Nginx反向代理

Nginx反向代理主要通过反向代理实现，其原理主要是通过反向代理到源服务器获取的静态资源并将其缓存至Nginx反向代理服务器上，当下次同一个请求能直接返回。话不多说上配置，这里要注意的是*.github.io是https协议，因此需要你的代理服务器也安装SSL证书，不过目前市面上也有不少免费的DV证书，相对于ICP备案搞一个SSL证书还是简单不少。

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
http {

        ##
        # Basic Settings
        ##

        sendfile on;
        tcp_nopush on;
        tcp_nodelay on;
        keepalive_timeout 65;
        types_hash_max_size 2048;
        # server_tokens off;

        # server_names_hash_bucket_size 64;
        # server_name_in_redirect off;

        include /etc/nginx/mime.types;
        default_type application/octet-stream;

        ##
        # SSL Settings
        ##

        ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
        ssl_prefer_server_ciphers on;

        ##
        # Logging Settings
        ##

        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        ##
        # Gzip Settings
        ##

        gzip on;

        # gzip_vary on;
        # gzip_proxied any;
        # gzip_comp_level 6;
        # gzip_buffers 16 8k;
        # gzip_http_version 1.1;
        # gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;

        ##
        # Virtual Host Configs
        ##
        proxy_cache_path /var/www/blog_cache levels=1:2 keys_zone=blog_cache:10m inactive=1y max_size=5g;

        include /etc/nginx/conf.d/*.conf;
#       include /etc/nginx/sites-enabled/*;
}

首先需要再http下新增proxy_cache_path配置并输入缓存的地址，其他参数配置含义参考下表:

参数 含义
levels 缓存目录的层次结构，不同的层级结构可能会影响缓存的速度
keys_zone 设置一个共享内存区，该内存区用于存储缓存键和元数据，有些类似计时器的用途
max_size 缓存上限，如果达到上限便会清理掉部分缓存文件
inactive 指定了项目在不被访问的情况下能够在内存中保持的时间

再来看一下Server相关的配置：

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
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
server {
    listen 443 ssl;

    server_name <your_host>;
    ssl_certificate </ssl_certificate_path/your_host.pem>;
    ssl_certificate_key </ssl_certificate_key_path/your_host.key>;

    location / {
        root   html;
        index index.html index.htm;
    }

    location /assets/images/posts {
        proxy_pass <your.github.io>;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;
        
        add_header Access-Control-Allow-Origin *;
        
        # 设置缓存状态header，用于判断访问时是否命中
        add_header lms_cache $upstream_cache_status;
        # 不遵循源站的缓存头
        proxy_ignore_headers Set-Cookie Cache-Control expires;
        # 指定缓存键区，需要与1中区域设置对应
        proxy_cache blog_cache;
        # 忽略缓存参数
        proxy_cache_key $host$uri;
        # 缓存指定的状态码，缓存有效期30天
        proxy_cache_valid 200 304 301 302 30d;
        # 浏览器缓存有效期30天
        expires 30d;
    }

    location /assets/images {
        proxy_pass <your.github.io>;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;
        
        add_header Access-Control-Allow-Origin *;
        
        # 设置缓存状态header，用于判断访问时是否命中
        add_header lms_cache $upstream_cache_status;
        # 不遵循源站的缓存头
        proxy_ignore_headers Set-Cookie Cache-Control expires;
        # 指定缓存键区，需要与1中区域设置对应
        proxy_cache blog_cache;
        # 忽略缓存参数
        proxy_cache_key $host$uri;
        # 缓存指定的状态码，缓存有效期30天
        proxy_cache_valid 200 304 301 302 30d;
        # 浏览器缓存有效期30天
        expires 30d;
    }

    location /assets/js {
        proxy_pass <your.github.io>;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header REMOTE-HOST $remote_addr;
        
        add_header Access-Control-Allow-Origin *;
        
        # 设置缓存状态header，用于判断访问时是否命中
        add_header lms_cache $upstream_cache_status;
        # 不遵循源站的缓存头
        proxy_ignore_headers Set-Cookie Cache-Control expires;
        # 指定缓存键区，需要与1中区域设置对应
        proxy_cache blog_cache;
        # 忽略缓存参数
        proxy_cache_key $host$uri;
        # 缓存指定的状态码，缓存有效期30天
        proxy_cache_valid 200 304 301 302 30d;
        # 浏览器缓存有效期30天
        expires 30d;
    }
}

总结

通过这样一个反向代理的配置就能实现JS、Image的缓存提高我们博客的一个访问速度，当然面对不同地域以及高频的访问还是需要使用CDN的技术。这里也恰恰反应一点对于技术架构的思想就是对于当前的需求做适合自己的架构，不要盲目堆技术。