为网站开启Nginx缓存加速,支持html伪静态页面

上一篇文章分享了如何开启 Nginx 的缩略图功能,也提到了 Nginx 缩略图在完美替代七牛缩略图或 PHP 缩略图的同时,还会带来一定的 CPU 负载消耗。

因此,本文就来分享一下如何解决这个实时生成缩略图带来的 CPU 开销问题。

思路很简单,既然你要实时生成,那我就将你生成的缩略图缓存一份好了!在我测试期间发现,Nginx 的缓存也同样可以缓存伪静态的 html 页面,完全可以替代 WP-Super-Cache 这类缓存插件了。相信大部分 CDN 也是用的这个原理,比如百度云加速,我们可以在 header 里面发现一个 “Server:yunjiasu-nginx”的标识。

好了,废话不说,一起来看看如何实现吧!

一、代理模式

代理模式,即在使用 Nginx 反向代理时缓存指定内容,所用模块为 proxy_cache。这里网络上的很多教程会说,这个模式必须在反向代理中才能使用,说的好像不能用在只有一台服务器的情况似的。其实不然,我们用点小技巧,将 Nginx 本机的 80 端口代理转发到 本机的 8080 端口即可变相的开启反向代理模式,在这期间,就完全可以指定缓存内容了,且继续往下看!

①、下载模块

所用模块为 ngx_cache_purge,官方地址:http://labs.frickle.com/files/,我们可以挑选一个新版本下载到服务器上,比如 http://labs.frickle.com/files/ngx_cache_purge-2.3.tar.gz

cd /usr/local/src
#下载
wget http://labs.frickle.com/files/ngx_cache_purge-2.3.tar.gz
#解压
tar zxvf ngx_cache_purge-2.3.tar.gz

②、重新编译

所以先执行 -V 命令查看 Nginx 是否已经编译了该模块,

[marsge@Mars_Server ~]$ nginx -V
Tengine version: Tengine/2.1.0 (nginx/1.6.2)
built by gcc 4.4.7 20120313 (Red Hat 4.4.7-11) (GCC) 
TLS SNI support enabled
configure arguments: --user=www --group=www --prefix=/usr/local/nginx --with-http_stub_status_module --with-http_gzip_static_module --with-http_concat_module --add-module=../ngx_cache_purge-2.3 --with-http_image_filter_module --add-module=../ngx_slowfs_cache-1.9
loaded modules:
    ngx_core_module (static)
    ngx_errlog_module (static)
...

如果编译参数中找不到 ngx_cache_purge,就需要重新编译 Nginx ,新增编译参数:

#注意第一步解压的文件夹和nginx源码在同一个目录
--add-module=../ngx_cache_purge-2.3

我现在用的是淘宝开放的 Tengine ,可以使用动态加载模块功能,如果是原版 Nginx ,可以参考张戈博客之前分享的文章,在原来的基础上加上上述参数重新编译 Nginx 即可:

Nginx 在线服务状态下平滑升级或新增模块的详细操作记录

③、新增配置

A. 在 http 上下文中新增缓存配置:

http {
                #以上略                
                ##cache##
                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 /tmp/temp_cache1; #临时缓存目录
                proxy_cache_path /tmp/cache1 levels=1:2 keys_zone=cache_one:200m inactive=30d max_size=5g; #设置缓存存放,不懂的参数自己百度搜索下
                ##end##
                #以下略
....
}

Ps:上述配置中出现的目录,请在保存配置后,使用 mkdir 手动创建。

B. 如下修改网站原来的 server 模块:

server
        {
         #将之前监听修改成监听本地8080,其他配置保持不变    
         listen 127.0.0.1:8080;
         server_name zhangge.net;
#以下内容略...
}

B. 如下新增一个反向代理 Server 模块,用于转发请求到本地 8080,变相实现反向代理模式:

server {
        listen 80;
        server_name zhangge.net;
        #缓存清理模块
        location ~ /purge(/.*) {
              allow 127.0.0.1;
              allow 192.168.1.101; #此处表示允许访问缓存清理页面的IP
              deny all;
              proxy_cache_purge cache_one $host$1$is_args$args;
        }
        #缓存html页面,可以缓存伪静态【这是亮点!】
        location ~ .*\.html$ {
              proxy_pass http://127.0.0.1:8080;
              proxy_redirect off;
              proxy_set_header Host $host;
              proxy_cache cache_one;
              #状态为200、302的缓存1天
              proxy_cache_valid 200 302 1d;
              #状态为301的缓存2天
              proxy_cache_valid 301 2d;
              proxy_cache_valid any 1m;
              #浏览器过期时间设置4小时
              expires 4h;
              #忽略头部禁止缓存申明,类似与CDN的强制缓存功能
              proxy_ignore_headers "Cache-Control" "Expires" "Set-Cookie";
              #在header中插入缓存状态,命中缓存为HIT,没命中则为MISS
              add_header Nginx-Cache "$upstream_cache_status";
        }
        #图片缓存设置,如果不是使用了Nginx缩略图功能,这个可以不用,效果不明显
        location ~ .*\.(gif|jpg|png|css|jsico)(.*) {
              proxy_pass http://127.0.0.1:8080;
              proxy_redirect off;
              proxy_set_header Host $host;
              proxy_cache cache_one;
              proxy_cache_valid 200 302 30d;
              proxy_cache_valid 301 1d;
              proxy_cache_valid any 1m;
              expires 30d;
              proxy_ignore_headers "Cache-Control" "Expires" "Set-Cookie";
              add_header Nginx-Cache "$upstream_cache_status";
        }
        #动态页面直接放过不缓存
        location ~ .*\.(php)(.*){
             proxy_pass http://127.0.0.1:8080;
             proxy_set_header        Host $host;
             proxy_set_header        X-Real-IP $remote_addr;
             proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        #设置缓存黑名单,不缓存指定页面,比如wp后台或其他需要登录态的页面,用分隔符隔开
        location ~ ^/(wp-admin|system)(.*)$ {
             proxy_pass http://127.0.0.1:8080;
             proxy_set_header        Host $host;
             proxy_set_header        X-Real-IP $remote_addr;
             proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        }
        #缓存以斜杠结尾的页面,类似于CDN的目录缓存,如果存在问题请取消缓存机制
        location ~ ^(.*)/$ {
              proxy_pass http://127.0.0.1:8080;
              proxy_redirect off;
              proxy_set_header Host $host;
              proxy_cache cache_one;
              proxy_cache_valid 200 302 1d;
              proxy_cache_valid 301 1d;
              proxy_cache_valid any 1m;
              expires 1h;
              proxy_ignore_headers "Cache-Control" "Expires" "Set-Cookie";
              add_header Nginx-Cache "$upstream_cache_status";
        }
       location / {
             proxy_pass http://127.0.0.1:8080;
             proxy_set_header        Host $host;
             proxy_set_header        X-Real-IP $remote_addr;
             proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
        }
}

全部保存后,执行 nginx -s reload 让配置生效即可。现在你再去访问网站的 html 页面,刷新一次就可以看到效果了!加载速度绝逼会有质的飞跃!而且你可以在 F12 开发模式的 Network 状态中看到 Nginx-Cache HIT 的标识!

④、清理缓存

清理缓存就有点麻烦了,我弄了多次也还是感觉不怎么好用!网上也有不少先驱分享了自动清理脚本或批量清理代码等。不过用了下也是不咋的好用。

还是说一下清理方法吧!在 A 部分的配置中,我们已经加入了 purge 缓存清理页面,假设一个 URL 为 http://192.168.1.1/test.html,通过访问 http://192.168.1.1/purge/test.html 就可以清除该 URL 的缓存(我实际测试经常是 404...)。

二、本地模式

第一种代理模式,我们是利用本地转发变相实现反向代理下的 Nginx 缓存功能,并且可以缓存 html 伪静态页面。从整体的配置可以看出,已经非常接近百度云加速等 CDN 的缓存功能了!对于理解 CDN 缓存还是有不小的帮助的!

现在分享一下,如果不用反向代理模式,该如何实现 Nginx 缓存呢?很简单,进一步借助 ngx_slowfs_cache 模块即可,这也是张戈博客在用模式,如何实现,且继续往下看。

①、下载模块

这个模式需要下载 2 个缓存模块:ngx_cache_purge 和 ngx_slowfs_cache 。这 2 个模块都出自一个网站,下载地址依然是 http://labs.frickle.com/files/ ,挑选一个最新版下载即可,比如:

http://labs.frickle.com/files/ngx_slowfs_cache-1.9.tar.gz

②、重新编译

和第一种模式一样,新增 2 个 --add-module 重新编译 Nginx 即可:

--add-module=../ngx_cache_purge-2.3 --add-module=../ngx_slowfs_cache-1.9

具体就不赘述了,参考上文和博客之前的分享就可以搞定了。

③、新增配置

I. 在 http 上下文新增如下配置:

http {
     #以上略
     slowfs_cache_path /home/wwwroot/cache  levels=1:2   keys_zone=fastcache:256m inactive=1d max_size=5g;
slowfs_temp_path  /tmp/nginx_temp_cache 1 2;
     #以下略
}

Ps:以上配置中所涉及的目录请手动创建。

II. 在 server 模块中新增如下配置:

#新增缓存清理配置
location ~ /purge(/.*) {
            allow               127.0.0.1;
            allow               192.168.1.101;
            deny                all;
            slowfs_cache_purge  fastcache $1;
        }
#在上一篇文章的缩略图模块后新增缓存,让生成的缩略图缓存到磁盘(具体请看上一篇文章)
location ~ .*\.(gif|jpg|jpeg|png|bmp)$ {
            set $width '';
            set $height '';
            set $width $arg_width;
            set $height $arg_height;
            if ( $width != '' ) {
               add_header Thumbnail "By Nginx";
            }
            if ( $height = '' ) {
                set $height '-';
            }
            if ( $width = '' ) {
                set $width '-';
                set $height '-';
            }
            image_filter resize $width $height;
            image_filter_buffer 5M;
            image_filter_jpeg_quality 80;
            image_filter_transparency on;
 
            #新增缓存配置
            slowfs_cache        fastcache;
            slowfs_cache_key    $uri;
            slowfs_cache_valid  1d;
            #在header中插入缓存标识,比如:HIT/MISS from zhangge.net
            add_header X-Cache '$slowfs_cache_status from $host';
            expires  max;
}

保存后,执行 nginx -s reload 重载 Nginx 即可。测试中发现,这种模式貌似无法缓存 html 伪静态页面,稍有遗憾,有兴趣的童鞋可以深入研究看看,可能是我没测试到位。

三、惯例总结

好了,通过以上折腾,我们已经完美的解决了 Nginx 实时生成缩略图带来的 CPU 开销问题了!而且,从代理模式的缓存中,我们甚至可以缓存 html 伪静态页面,这意味着什么?强迫症们有可以无情的丢弃一款 WordPress 缓存插件啦!不过,张戈博客暂时还是使用自己写的 php 代码来实现静态缓存,没有别的,主要是为了方便管理。

总体来说,对于 Nginx 的缩略图和缓存,我还是非常满意的,喜欢折腾的朋友也可以亲自试试,也许你能找到比本文更多的经验呢!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏macOS 开发学习

Mac开发基础练习:制作一个状态栏(NSStatusBar)上的App(二)

1.1 选中ViewController.m文件,添加鼠标左键点击事件监听,实现代码如下图:

12930
来自专栏SpringBoot 核心技术

Git核心技术:在Ubuntu下为Gitolite添加管理端

在之前章节已经完成了服务端的配置,可以访问Git核心技术:在Ubuntu下部署Gitolite服务端查看配置步骤,因为gitolite的管理是通过一个名为git...

17320
来自专栏GreenLeaves

Oracle 基础系列之1.1 oracle的安装

一、 1、以下是安装Oracle的一些硬件上的条件: (1)、操作系统最后是windows2000(也就是服务器版的操作系统) (2)、内存最好在1G以上,当然...

257100
来自专栏LhWorld哥陪你聊算法

【Python篇】---Python3.5在Centoos的安装教程--超实用

Python3在公司用的还是比较多的,但一般Centoos默认是python2的环境。所以本文就python3的安装做个总结。

16820
来自专栏别先生

github协作开发遇到的问题

1、十一来了,帝都不好买票,30号就调休一天回去了,项目还没搞完,紧张的不行,就自己和同事搞了一个github协作开发,由于是功能和公司项目不是很沾边,但是是自...

11840
来自专栏逸鹏说道

07.GitHub实战系列~7.Git之VS2013团队开发(如果不想了解git命令直接学这篇即可)

GitHub实战系列汇总:http://www.cnblogs.com/dunitian/p/5038719.html ————————————————————...

28850
来自专栏用户画像

MAC Elasticsearch安装

https://www.elastic.co/downloads/elasticsearch

9120
来自专栏vue学习

后来的我们—我与git的破镜重圆

因为git给远程库起的默认名称是origin,所以如果有多个远程库,我们需要用不同的名称来标识不同的远程库。

11620
来自专栏Jerry的SAP技术分享

Linux系统里让vim支持markdown格式的语法高亮

下面就来介绍如何设置使得markdown格式的文件在vim里也能享有语法高亮的待遇。

13410
来自专栏大数据挖掘DT机器学习

python模拟新浪微博登陆功能(新浪微博爬虫)

有些网站设置了权限,只有在登录了之后才能爬取网站的内容,如何模拟登录,目前的方法主要是利用浏览器cookie模拟登录。 浏览器访问服务器的过程 在用户访问网页时...

1.1K50

扫码关注云+社区

领取腾讯云代金券