自设带缓存的 Google Fonts 反向代理以实现海内外高速访问

お久しぶり！好久没有写过新东西啦~

最近使用 Internet Explorer 和 Microsoft Edge 访问博客首页的时候发现特别慢。

打开 Developer Tools 对网站做了 Profiler 后发现 Google Fonts 所占用的 Waiting 时间实在是太长，虽然说现在 googleapis 是能够正常解析了，但是速度还是相当的不忍直视。

解决办法有三：

禁用 Google Fonts
使用国内镜像
使用国外 VPS 做反代

第一种办法无疑是得不偿失的，为了速度而牺牲了整个网页的美观性。

第二种办法看起来挺理想，但是

大多数国内镜像不支持 HTTPS（对于追求小绿锁的我来说这是绝对不能忍的）
大多国内访问优秀，国外速度堪忧
反代在别人服务器上，稳定性没有保障

由于最近博客迁移到了 Azure 上，响应时间和速度还是比较有保证的，最终我选择了第三种方案。

特此声明，本文仅适用于带宽充裕，响应时间较短，速度较快的国外 VPS ，国内机基本免谈

设立反向代理的条件如下：

nginx-extra（Ubuntu 里 apt-get install nginx 出来的 Nginx 并不支持 SSL）
域名（其实没有域名的话随意弄个免费的 tk 域名也可以）
（可选）SSL 证书（假如你不需要 HTTPS，可以不要）

关于 Nginx 如何安装，点击这里有传送门直达
接下来我要暴力贴出配置，并在必要的地方加上注释，跟着修改即可使用

第一步，创建让 Nginx 存放反代缓存的目录

sudo mkdir -p /var/cache/nginx/cache
sudo mkdir -p /var/cache/nginx/temp

第二步，暴力复制、修改配置文件

正常情况下 Nginx 会在配置文件中 include /etc/nginx/sites-enabled/* 和 include /etc/nginx/conf.d/*.conf

（评论中的 dant 菊苣指出，Debian 系的 Nginx 才有 sites-{enabled,available}，RH 系是没有的）

我们选择在 sites-enabled 里头创建配置

sudo vim /etc/nginx/sites-enabled/fonts-proxy.conf

复制粘贴并且根据注释修改以下内容

proxy_temp_file_write_size 128k;
proxy_cache_path  /var/cache/nginx/cache levels=1:2 keys_zone=fonts:300m inactive=7d max_size=10g;
proxy_temp_path   /var/cache/nginx/temp;

upstream google {
    server fonts.googleapis.com:443;
}

upstream gstatic {
    server fonts.gstatic.com:443;
}

server {
    listen 80;
    #将下面的 font.lawrencexs.xyz 替换成你要做反代用的域名
    server_name font.lawrencexs.xyz;
    #限制引用的域名。按需改成自己要用到字体库的域名。做公益服务需要去掉下面的一行以及if
    valid_referers server_name *.lawrencexs.xyz *.winooxx.tk;
    if ($invalid_referer) {
        return 404;
    }

    resolver 8.8.8.8;

    location /css {
    #将下面的 font.lawrencexs.xyz 替换成你要做反代用的域名
        sub_filter 'fonts.gstatic.com' 'font.lawrencexs.xyz';
        sub_filter_once off;
        sub_filter_types text/css;
        proxy_pass_header Server;
        proxy_set_header Host fonts.googleapis.com;
        proxy_set_header Accept-Encoding '';
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_pass https://google;
        proxy_cache fonts;
        proxy_cache_valid  200 304 365d;
        proxy_cache_key $host$uri$is_args$args;
        expires max;
    }

    location /icon {
    #将下面的 font.lawrencexs.xyz 替换成你要做反代用的域名
        sub_filter 'fonts.gstatic.com' 'font.lawrencexs.xyz';
        sub_filter_once off;
        sub_filter_types text/css;
        proxy_pass_header Server;
        proxy_set_header Host fonts.googleapis.com;
        proxy_set_header Accept-Encoding '';
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_pass https://google;
        proxy_cache fonts;
        proxy_cache_valid  200 304 365d;
        proxy_cache_key $host$uri$is_args$args;
        expires max;
    }

    location / {
        proxy_pass_header Server;
        proxy_set_header Host fonts.gstatic.com;
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_pass http://gstatic;
        proxy_cache fonts;
        proxy_cache_valid  200 304 365d;
        proxy_cache_key $host$uri$is_args$args;
        expires max;
    }
}

#如果你没有证书或者不需要 HTTPS 访问，那么下面这部分你不需要再看了

server {
    #监听 443 端口
    listen 443 ssl spdy;

    #打开 HTTPS
    ssl on;

    #替换下面的证书
    ssl_certificate /etc/ssl/certs/lawrencexs.xyz.crt;
    ssl_certificate_key /etc/ssl/private/lawrencexs.xyz.key;

    ssl_prefer_server_ciphers on;
    ssl_dhparam /etc/ssl/certs/dhparam.pem;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers "EECDH+ECDSA+AESGCM EECDH+aRSA+AESGCM EECDH+ECDSA+SHA384 EECDH+ECDSA+SHA256 EECDH+aRSA+SHA384 EECDH+aRSA+SHA256 EECDH+aRSA+RC4 EECDH EDH+aRSA !aNULL !eNULL !LOW !3DES !MD5 !EXP !PSK !SRP !DSS !RC4";
    keepalive_timeout 70;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;

    #将下面的 font.lawrencexs.xyz 替换成你要做反代用的域名
    server_name font.lawrencexs.xyz;

    #限制引用的域名。按需改成自己要用到字体库的域名。公益服务需要去掉下面的一行以及if
    valid_referers server_name *.lawrencexs.xyz *.winooxx.tk;
    if ($invalid_referer) {
        return 404;
    }

    resolver 8.8.8.8;

    location /css {
    #将下面的 font.lawrencexs.xyz 替换成你要做反代用的域名
        sub_filter 'fonts.gstatic.com' 'font.lawrencexs.xyz';
        sub_filter_once off;
        sub_filter_types text/css;
        proxy_pass_header Server;
        proxy_set_header Host fonts.googleapis.com;
        proxy_set_header Accept-Encoding '';
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_pass https://google;
        proxy_cache fonts;
        proxy_cache_valid  200 304 365d;
        proxy_cache_key $host$uri$is_args$args;
        expires max;
    }

    location /icon {
    #将下面的 font.lawrencexs.xyz 替换成你要做反代用的域名
        sub_filter 'fonts.gstatic.com' 'font.lawrencexs.xyz';
        sub_filter_once off;
        sub_filter_types text/css;
        proxy_pass_header Server;
        proxy_set_header Host fonts.googleapis.com;
        proxy_set_header Accept-Encoding '';
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_pass https://google;
        proxy_cache fonts;
        proxy_cache_valid  200 304 365d;
        proxy_cache_key $host$uri$is_args$args;
        expires max;
    }

    location / {
        proxy_pass_header Server;
        proxy_set_header Host fonts.gstatic.com;
        proxy_redirect off;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Scheme $scheme;
        proxy_pass https://gstatic;
        proxy_cache fonts;
        proxy_cache_valid  200 304 365d;
        proxy_cache_key $host$uri$is_args$args;
        expires max;
    }
}

最后一步，让 Nginx 重载配置文件

sudo nginx -s reload

如果中间不出差错，那么你就可以使用你新设的反代地址去替换 fonts.googleapis.com 了。

自设带缓存的 Google Fonts 反向代理以实现海内外高速访问

第一步，创建让 Nginx 存放反代缓存的目录

第二步，暴力复制、修改配置文件

最后一步，让 Nginx 重载配置文件

Enjoy! お楽しみください！

发布者

Lawrence