使用nginx的proxy_cache实现静态资源的缓存

nginx的版本

./nginx -v
nginx version: nginx/1.9.15

需求

要求nginx缓存静态资源，如js、css、图片等，避免对静态资源的访问直接穿透到后端的j2ee应用侧，提高后端j2ee应用的运行效率。

配置方法

针对js、css、图片文件

• 分别增加缓存路径的指令，比如对于图片，增加如下的指令：

    proxy_cache_path proxy_cache_image levels=1:2 keys_zone=cache_image:100m;
  

• 分别增加路径转发配置的指令，比如对于图片，增加如下的指令：

    location ~ \.(gif|jpg|jpeg|png)$ {proxy_cache cache_image;proxy_cache_key $uri$is_args$args;proxy_cache_valid 200 206 14d;proxy_pass http://127.0.0.1:18080;}
  

• 增加如下指令，在HTTP响应消息的头部中增加资源请求命中的标识。

    add_header X-Cache $upstream_cache_status; # $upstream_cache_status表示资源缓存的状态，可选值有HIT MISS EXPIRED三种状态
  

  使用浏览器调试面板中的网络视图，查看浏览器收到的响应消息的头部，如下所示

    Connection:keep-aliveContent-Encoding:gzipContent-Type:text/cssDate:Sat, 07 Jan 2017 12:00:37 GMTETag:W/"5576-1457782914000"Last-Modified:Sat, 12 Mar 2016 11:41:54 GMTServer:nginxTransfer-Encoding:chunkedVary:Accept-EncodingX-Cache:HIT   # 表明缓存命中
  

完整的样例配置

worker_processes  1;error_log  logs/error.log;events {worker_connections  1024;
}http {include       mime.types;default_type  application/octet-stream;server_tokens off;log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log  logs/access.log  main;sendfile        on;tcp_nopush     on;keepalive_timeout  65;gzip  on;gzip_vary               on;gzip_min_length         1024;gzip_buffers            128 32k;gzip_comp_level         6;gzip_http_version       1.1;gzip_proxied            expired no-cache no-store private auth;gzip_types              text/plain text/css text/xml application/xml application/json text/javascript application/javascript application/x-javascript;charset utf-8;proxy_cache_path proxy_cache_image levels=1:2 keys_zone=cache_image:100m;proxy_cache_path proxy_cache_js levels=1:2 keys_zone=cache_js:100m;proxy_cache_path proxy_cache_css levels=1:2 keys_zone=cache_css:100m;server {listen 8080;server_name  192.168.0.107;location ~ \.js {proxy_cache cache_js;proxy_cache_key $uri$is_args$args;proxy_cache_valid 200 206 14d;proxy_pass http://127.0.0.1:18080;}location ~ \.css {proxy_cache cache_css;proxy_cache_key $uri$is_args$args;proxy_cache_valid 200 206 14d;proxy_pass http://127.0.0.1:18080;}location ~ \.(gif|jpg|jpeg|png)$ {proxy_cache cache_image;proxy_cache_key $uri$is_args$args;proxy_cache_valid 200 206 14d;proxy_pass http://127.0.0.1:18080;}location ~ / {index  index.jsp;proxy_pass http://127.0.0.1:18080;proxy_set_header        referer           '';include proxy.conf;}#error_page  404              /404.html;# redirect server error pages to the static page /50x.html#error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}location ~ /\. {deny all;access_log off;log_not_found off;}}}

对proxy_cache_key参数的简单说明

上述样例中，使用到了如下指令

proxy_cache_key $uri$is_args$args;

• $uri，请求中的当前URI，例如/foo/bar.html。
• $is_args，如果$args设置，值为"?“，否则为”"。
• $args，这个变量等于GET请求中的参数。例如foo=123&bar=blahblah。

使用上述参数，可以有效完成对如下资源样式的区分

<link href="tomcat.css?ver=123" rel="stylesheet" type="text/css" />
<link href="tomcat1.css" rel="stylesheet" type="text/css" />

参考资料

• 转 利用Proxy Cache使Nginx对静态资源进行缓存
• nginx 的proxy_cache才是王道
• 解决nginx反向代理缓存不起作用的问题
• nginx内置预定义变量
• nginx location匹配规则
• Module ngx_http_proxy_module