nginx静态资源缓存策略配置

1. 问题-背景

之前也常常用nginx，但用的不深，一般是简单的设置个location用来作反向代理。直到今天给客户作项目碰到缓存问题：客户有个app，只是用原生作了个壳，里面的内容都是用h5写的，咱们半途接手将新版本静态资源部署到服务器上后，发现手机端一直显示老的页面，一抓包，发现手机端根本就没有去请求新的html页面，定位是缓存问题。

2. 配置

乍一看，客户原来的配置好像没什么问题，该有的也全有了

# 这是客户原来的配置 server { listen 80 default_server; server_name xxx.xxx.com; root /app/xxx/html/mobile/; location ~ .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$ { expires 7d; } location ~ .*\.(?:js|css)$ { expires 7d; } location ~ .*\.(?:htm|html)$ { add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate"; } location ^~/mobile/ { alias /app/xxx/html/mobile/; } }

乍看没问题，但就是没有生效，因为查找nginx文档，发现nginx的location有优先级之分（是否生效与放置的位置没有关系）。

2.1 nginx location的四种类别

【=】模式: location = path,此种模式优先级最高（但要全路径匹配） 
【^~】模式:location ^~ path,此种模式优先级第二高于正则； 
【~ or ~*】模式:location ~ path,正则模式，优先级第三，【~】正则匹配区分大小写，【~*】正则匹配不区分大小写； 
【path】模式: location path,中间什么都不加，直接跟路径表达式； 
注意：一次请求只能匹配一个location，一旦匹配成功后，便再也不继续匹配其他location;

一对照，发现location ^~优先级高于那些正则的缓存策略，因此缓存策略确定不会对其生效，一翻查找下，终于解决了，配置以下：

server {
    listen       80 default_server; server_name xxx.xxx.com; root /app/xxx/html/mobile/; location ~ .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$ { expires 7d; } location ~ .*\.(?:js|css)$ { expires 7d; } location ~ .*\.(?:htm|html)$ { add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate"; } location ^~/mobile/ { alias /app/xxx/html/mobile/; # 将缓存策略用if语句写在location里面，生效了 if ($request_filename ~* .*\.(?:htm|html)$) { add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate"; } if ($request_filename ~* .*\.(?:js|css)$) { expires 7d; } if ($request_filename ~* .*\.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm)$) { expires 7d; } } }

 

4. 深化

项目一般就是静态资源与接口，接口通常都不多碰到缓存问题（由于不多有人去给接口配置缓存策略，不配置的话就不缓存），碰到缓存问题的一般都是静态资源。 
静态资源——html: 
html文件最容易碰到缓存问题，从新发版后，一旦客户端继续使用原来的缓存，那么在原来的缓存过时以前，没有任何办法去触使客户端更新，除非一个个通知android客户手动清除app缓存数据，通知IOS用户卸载重装。因此配置html缓存策略时要格外当心，咱们项目是不缓存html文件； 
静态资源——js/css/各类类型的图片: 
此类资源改动较少，为了提高用户体验，通常都须要配置缓存，但反而不容易碰到缓存问题。由于如今的前程工程也都须要build，在build时工具会自动在文件名上加时间戳，这样一发新版时，只要客户端请求了新版的html，里面引用的js/css/jpg等都已经换了路径，确定也就不会使用本地的缓存了。