apache2 反向代理 Google Web Fonts & Gravatar

自打Google被封杀,折腾wordpress就越来越蛋疼,一旦页面引用了Google Web Fonts,不爬墙的情况下整个站点的加载速度就会被拖慢,还会造成内容显示异常。这段时间更是Gravatar都悲剧了,评论区头像全显示不出来了。于是乎干脆搞起了 反向代理。

我用的是apache2,反向代理使用mod_proxy搭配mod_cache做缓存,以Ubuntu系统为例。

启用相应的mod:

先配置反向代理,找到/etc/apache2/mods-enabled/proxy.conf,编辑:

ProxyPass /grvt_mirror/ http://0.gravatar.com/ 这一句,将http://0.gravatar.com/映射到服务器域名下/grvt_mirror/这个虚拟目录。

假设你的域名是www.mysite.com,那么,如果要反向代理一个Gravatar头像:http://0.gravatar.com/avatar/abcd1234.jpeg

那么访问:http://www.mysite.com/grvt_mirror/avatar/abcd1234.jpeg 即可。

当然你也可以配置一个virtual hosts将目录/grvt_mirror/映射到一个二级域名上。

而ProxyPassReverse紧跟之,具体为啥请自己查阅Apache2的文档,不做过多说明。

上面4句,配置了两个反向代理,一个代理gravatar的头像文件,一个代理google fonts的字体文件。0.gravatar.com的0可以换成1 2 3 4,具体可以用服务器下载个头像下试试哪个服务器快些。

这时候我们先测试一下反向代理是否配置正确了。重启apache:

分别找一个gravatar和google fonts的连接测试一下,比如说这两个:

http://fonts.gstatic.com/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTSUUniRZcd_wq8DYmIfsw2A.woff2

http://0.gravatar.com/avatar/ca320be14fd958852c77430438a94df7?s=44&d=&r=G

相应的我们把域名替换成自己的反向代理url,测试一下是否一致:

http://www.mysite.com/gf_mirror/s/opensans/v10/DXI1ORHCpsQm3Vp6mXoaTSUUniRZcd_wq8DYmIfsw2A.woff2

http://www.mysite.com/grvt_mirror/avatar/ca320be14fd958852c77430438a94df7?s=44&d=&r=G

如果你使用wordpress,那么接下来你可以直接试一下gravatar反向代理的效果了。找到主题的functions.php文件,加入以下代码:

把www.mysite.com/grvt_mirror改成你的地址就行了,保存后就可以测试效果了。

接下来我们继续处理Google Web Fonts,Google Web Fonts是通过URL送入参数后,服务器会返回所需的CSS文件,这个CSS文件里面包含了字体文件的url。我们已经反向代理了这个url,但是我们还没有处理获得这个css文件的过程。

这里我使用php来生成这个css文件(假设使用mod_php),在你想要的位置建立一个php文件,比如在我的wordpress目录下面建立gf_css文件夹(别和之前反向代理的虚拟目录重了),新建一个文件名为css文件(不带扩展名),写入以下代码:

只需将最后的www.mysite.com/gf_mirror/改为你自己的反向代理url就行了,这条命令是改写原css里面的url,改成反向代理的url。

然后在这个目录建立.htaccess文件,写入如下内容:

最好再从wordpress的wp-content里面拷贝一个生成forbiden页面的Index.php过来到这个文件夹

最后确保站点的<VirtualHost>配置中,主目录的<Directory>配置中配置了AllowOverride All(至少要AllowOverride FileInfo,否则ForceType无效)

然后我们就可以试试这个php文件的效果了,一个测试用的链接如下:

http://fonts.googleapis.com/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C6

我们将它改为:

http://www.mysite.com/gf_css/css?family=Open+Sans%3A300italic%2C400italic%2C600italic%2C300%2C400%2C6

如果输出结果一致,那么恭喜你成功了。

接着就是替换掉站点内Google Web Fonts的链接了。因为可能会很杂,主题、插件都可能会引用Google Web Fonts,所以我们采用批量文本内查询的方式。假设你的wordpress在/var/www/wp目录下,那么先切换到这个目录,然后用grep命令查询fonts.googleapis.com字段:

输出结果会显示来自哪个文件,以及行号,方便查找;一一将链接替换成www.mysite.com/gf_css即可;如果结果很多,可以试着用sed命令批量替换,在此不再详述了。

至此,反向代理应该可以正常工作了,打开浏览器的开发者工具测试一下吧。

如果功能正常运行,那么我们进行最后一步,开启缓存功能。前面已经启用了mod_cache和mod_cache_disk。在/etc/apache2/mods-enabled里面找到cache_disk.conf,编辑:

然后:

然后在Chrome上,硬性重加载你的网站页面,访问几个包含gravatar和google fonts引用的页面,就应能在/var/cache/apache2/mod_cache_disk 文件夹内看到缓存的文件了

15 条评论

  1. 风色番茄 回复

    沙发

  2. lollxxox 回复

    Google Web Fonts用360,Gravatar用多说这样不会更方便么- –

    1. cokebar 文章作者 回复

      这俩都不支持HTTPS 我站点开启了HTTPS的 而且后台强制HTTPS

    2. cokebar 文章作者 回复

      而且也得考虑国外访问的用户 特别是那些挂了全局代理的

  3. 70599 回复

    请教两处:

    1、
    “gf_css文件夹(别和之前反向代理的虚拟目录重了),新建一个文件名为css文件(不带扩展名)”
    请问css在gf_css文件夹里,还是和gf_css文件夹同目录?

    2、
    “然后在这个目录建立.htaccess文件,写入如下内容:”
    “这个目录”指的是gf_css文件夹吗?还是wp根目录?

    谢谢。

    1. cokebar 文章作者 回复

      空白表示php执行出错了 可能是代码语法有误 检查自己的php文件看有没有语法错误
      另外也要确保php启用了curl模块

    2. cokebar 文章作者 回复

      还有就是这种方法适合使用mod_php模块处理php的 如果使用mod_fcgid等其他模块处理php 配置要稍有不同

      1. 70599 回复

        谢谢回复。
        我的OS是debian7,搭建了lamp环境。
        现在是反代成功了,css不正常。
        phpinfo里可以看到curl,应该是已经启用了。
        截图:http://i.share.pho.to/49c22916_o.png
        关于php文件的语法错误,我都是从你文章里复制来的代码,反复逐行确认过应该没有错误了。
        mod_php模块,我是这样检查的:
        # a2enmod mod_php
        ERROR: Module mod_php does not exist!
        # a2enmod php5
        Module php5 already enabled
        # apt-get install libapache2-mod-php5
        正在读取软件包列表… 完成
        正在分析软件包的依赖关系树
        正在读取状态信息… 完成
        libapache2-mod-php5 已经是最新的版本了。
        # ls /etc/apache2/mods-enabled
        alias.conf authz_user.load dir.conf negotiation.conf reqtimeout.conf
        alias.load autoindex.conf dir.load negotiation.load reqtimeout.load
        auth_basic.load autoindex.load disk_cache.conf php5.conf setenvif.conf
        authn_file.load cache.load disk_cache.load php5.load setenvif.load
        authz_default.load cgi.load env.load proxy.conf status.conf
        authz_groupfile.load deflate.conf mime.conf proxy_http.load status.load
        authz_host.load deflate.load mime.load proxy.load
        这样我的apache2算是启用了php模块吗?(wordpress运行正常,应该是已经启用了吧)

        1. cokebar 文章作者

          php逐行调试下吧 把每行的结果分别输出出来看看对不对 逐行排查到底哪里出问题了

  4. 70599 回复

    测试发现是.htaccess没能把无后缀的css当成php去执行,给css添加.php后缀就正常了。
    apache2、php5的环境下.htaccess有特殊的设置方法吗?
    给css加上后缀有什么弊端吗?

    1. cokebar 文章作者 回复

      我这个只是为了和原来保持一致 原来的URL就是css?xxxx 加上php也行 相应修改链接时候加上就行

    2. cokebar 文章作者 回复

      检查一下Virtualhost的设置 确保站点主目录下设置为AllowOverride All

      1. 70599 回复

        博主新年好。
        谢谢,弄好了,设置了.htaccess,可以无后缀执行php了。
        又回顾了一下gravatar反代的部分,想确认一下:博文里的设置只是针对特定主题反代gravatar是吗?wp-admin的gravatar不会被反代是吗?

        1. cokebar 文章作者

          不是 gravatar是wp自带的 只不过我们在主题的function.php里加了一个filter 来改变gravatar的url 这个filter写在别处也行 比如写在wp-include的function.php里面 不过写在不怎么变动的主题里面合适一些 否则wp一更新 就还原了

发表评论

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

请输入验证码 * 请输入正确的验证码