用Nginx反代缓存Google fonts 谷歌字体

3315

现在WordPress都会用到Google fonts 谷歌字体,虽然国内也可以访问,但难保那天又挂了。14年的时候,我写过一篇用Nginx反代Gravatar头像的文章,同样的,我们也能用Nginx反代缓存谷歌字体。

本文以一键lnmp安装包为例,http://lnmp.org/

1、首先你需要一个可用的环境

一个稳定可靠国外的VPS,如果没有的可以买个Vultr,我的博客也是用这个哦。

Vultr服务商虽然是从2014年才开始提供云VPS主机服务产品的,但是其背景还是相当实力雄厚的,来自著名的游戏服务器提供商,正是因为其全球范围的服务器部署优势,从一开始就直接上线14个自营数据中心机房,这个在同行业中数据中心数量算是领先的。

Vultr VPS主机全部采用KVM架构,最低月付仅需要5美元(768MB内存起步),全部采用SSD固态硬盘,他的出现,甚至给一直霸占老大地位的Linode商家连续降价和提高配置,甚至也影响到整个行业的成本降低,对我们消费者是有利的。

目前,Vultr VPS采用灵活的小时计费方式,我们可以快速的部署服务器,可以用于建站和项目的需求。

2、修改nginx.conf配置文件,加入代理缓存功能

找到nginx.conf所在位置:/usr/local/nginx/conf/

查找#limit_conn_zone $binary_remote_addr zone=perip:10m;,并在前面加入以下内容:

client_body_buffer_size 512k;
proxy_connect_timeout 5;
proxy_read_timeout 60;
proxy_send_timeout 5;
proxy_buffer_size 16k;
proxy_buffers 4 64k;
proxy_busy_buffers_size 128k;
proxy_temp_file_write_size 128k;
proxy_temp_path /home/cache/temp;
#配置临时目录
proxy_cache_path /home/cache/path levels=1:2 keys_zone=cache:20m inactive=30d max_size=600m;
#20m是内存占用,30d是30天无访问删除,600m是缓存占具硬盘空间,cache为缓存区名字,
如果修改则下文的配置亦要相应修改。

创建缓存目录,并赋予权限

mkdir /home/cache/path -p
mkdir /home/cache/temp
chmod 755 -R /home/cache

3、在vhost下新建下conf文件,复制Nginx代码:

upstream fonts_google {
    server fonts.googleapis.com:80;
}

upstream fonts_gstatic {
    server fonts.gstatic.com:80;
}

server {
    listen 80;
    listen [::]:80;

    server_name fonts.yourdomain.com; #改为自己的字体库域名
    access_log /home/wwwlogs/fonts.log access;


    location /css {
        sub_filter 'fonts.gstatic.com' 'fonts.yourdomain.com';#改为自己的字体库域名
        sub_filter_once off;
        sub_filter_types text/css;
	proxy_cache cache;
        proxy_cache_valid 200 304 7d;
        #200 304状态缓存7天,按实际情况修改
        #其他状态缓存(如502 404)10秒
        proxy_cache_valid any 10s;
        proxy_cache_key "$scheme$host$request_uri";
        #缓存key规则,用于自动清除缓存。
        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 http://fonts_google;
    }

    location / {
        proxy_cache cache;
        proxy_cache_valid 200 304 7d;
        proxy_cache_valid any 10s;
        proxy_cache_key "$scheme$host$request_uri";
        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://fonts_gstatic;
    }
}

完整的代码下载:点这里

解释一下上面的一些东西:

sub_filter ‘fonts.gstatic.com’ ‘fonts.miskcoo.com’; 这一行是把返回的所有东西里边的 fonts.gstatic.com 替换成我们自己的域名,要不然你得到了 css 文件,字体内容还是在 google 上面。

然后 sub_filter_once off; 是表示全部替换,proxy_set_header Accept-Encoding ”; 这要求 google 返回不压缩的内容,因为压缩了就没有办法进行替换了。

proxy_set_header 重新定义或添加发往后端服务器的请求头。

proxy_redirect 决定是否替换掉后端返回的 Location 响应头和 Refresh 响应头。

proxy_pass 设置后端服务器的协议和地址,可以使用 URI (统一资源标记符,区别于 URL,参见维基百科

4、在WordPress主题function文件加入

//反代替换谷歌字体
function wp_replace_open_sans() {
wp_deregister_style('open-sans');
wp_register_style( 'open-sans', '//fonts.yourdomain.com/css?family=Open+Sans:300italic,400italic,600italic,300,400,600' );
if(is_admin()) wp_enqueue_style( 'open-sans');
}
add_action( 'init', 'wp_replace_open_sans' );

代码下载
5、需要解析域名fonts.yourdomain.com,上传Nginx文件,重启nginx。

6、HTTPS的方法,大家自行搜索吧。

用Nginx反代缓存Google fonts 谷歌字体》有1个想法

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注