自打Google被封杀，折腾wordpress就越来越蛋疼，一旦页面引用了Google Web Fonts，不爬墙的情况下整个站点的加载速度就会被拖慢，还会造成内容显示异常。这段时间更是Gravatar都悲剧了，评论区头像全显示不出来了。于是乎干脆搞起了 反向代理。
我用的是apache2，反向代理使用mod_proxy搭配mod_cache做缓存，以Ubuntu系统为例。
启用相应的mod：
|
1 |
a2enmod proxy proxy_http cache cache_disk |
先配置反向代理，找到/etc/apache2/mods-enabled/proxy.conf，编辑：
|
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 |
<IfModule mod_proxy.c> # If you want to use apache2 as a forward proxy, uncomment the # 'ProxyRequests On' line and the <Proxy *> block below. # WARNING: Be careful to restrict access inside the <Proxy *> block. # Open proxy servers are dangerous both to your network and to the # Internet at large. # # If you only want to use apache2 as a reverse proxy/gateway in # front of some web application server, you DON'T need # 'ProxyRequests On'. #ProxyRequests On #<Proxy *> # AddDefaultCharset off # Require all denied # #Require local #</Proxy> # Enable/disable the handling of HTTP/1.1 "Via:" headers. # ("Full" adds the server version; "Block" removes all outgoing Via: headers) # Set to one of: Off | On | Full | Block #ProxyVia Off ProxyPass /grvt_mirror/ http://0.gravatar.com/ ProxyPassReverse /grvt_mirror/ http://0.gravatar.com/ ProxyPass /gf_mirror/ http://fonts.gstatic.com/ ProxyPassReverse /gf_mirror/ http://fonts.gstatic.com/ </IfModule> # vim: syntax=apache ts=4 sw=4 sts=4 sr noet |
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：
|
1 |
service apache2 restart |
分别找一个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文件，加入以下代码：
|
1 2 3 4 5 |
function mytheme_get_avatar($avatar) { $avatar = str_replace(array("www.gravatar.com","0.gravatar.com","1.gravatar.com","2.gravatar.com","secure.gravatar.com"),"www.mysite.com/grvt_mirror",$avatar); return $avatar; } add_filter( 'get_avatar', 'mytheme_get_avatar', 10, 3 ); |
把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文件（不带扩展名），写入以下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php $gf_query = $_SERVER["QUERY_STRING"]; $ua = $_SERVER['HTTP_USER_AGENT']; $url = "http://fonts.googleapis.com/css?".$gf_query; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, $url); curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1); curl_setopt($ch, CURLOPT_HEADER, 0); curl_setopt($ch, CURLOPT_USERAGENT, $ua); $output = curl_exec($ch); curl_close($ch); header("Content-Type:text/css"); echo str_replace("http://fonts.gstatic.com/","//www.mysite.com/gf_mirror/",$output); ?> |
只需将最后的www.mysite.com/gf_mirror/改为你自己的反向代理url就行了，这条命令是改写原css里面的url，改成反向代理的url。
然后在这个目录建立.htaccess文件，写入如下内容：
|
1 2 3 |
<files "css"> ForceType application/x-httpd-php </files> |
最好再从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字段：
|
1 |
grep -rn "fonts\.googleapis\.com" * |
输出结果会显示来自哪个文件，以及行号，方便查找；一一将链接替换成www.mysite.com/gf_css即可；如果结果很多，可以试着用sed命令批量替换，在此不再详述了。
至此，反向代理应该可以正常工作了，打开浏览器的开发者工具测试一下吧。
如果功能正常运行，那么我们进行最后一步，开启缓存功能。前面已经启用了mod_cache和mod_cache_disk。在/etc/apache2/mods-enabled里面找到cache_disk.conf，编辑：
|
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 |
<IfModule mod_cache_disk.c> # cache cleaning is done by htcacheclean, which can be configured in # /etc/default/apache2 # # For further information, see the comments in that file, # /usr/share/doc/apache2/README.Debian, and the htcacheclean(8) # man page. # This path must be the same as the one in /etc/default/apache2 # 缓存目录，默认即可 CacheRoot /var/cache/apache2/mod_cache_disk # This will also cache local documents. It usually makes more sense to # put this into the configuration for just one virtual host. # 打开两个反向代理虚拟目录的缓存功能 CacheEnable disk /grvt_mirror/ CacheEnable disk /gf_mirror/ # The result of CacheDirLevels * CacheDirLength must not be higher than # 20. Moreover, pay attention on file system limits. Some file systems # do not support more than a certain number of inodes and # subdirectories (e.g. 32000 for ext3) # 缓存文件夹层数3 文件夹名称长度5 酌情修改 两数相乘不能大于20 CacheDirLevels 3 CacheDirLength 5 # 缓存文件大小最大值/最小值 单位字节 CacheMaxFileSize 1048576 CacheMinFileSize 10 CacheDefaultExpire 604800 </IfModule> # vim: syntax=apache ts=4 sw=4 sts=4 sr noet |
然后：
|
1 |
service apache2 reload |
然后在Chrome上，硬性重加载你的网站页面，访问几个包含gravatar和google fonts引用的页面，就应能在/var/cache/apache2/mod_cache_disk 文件夹内看到缓存的文件了
15 条评论