nginx更新静态页面客户端缓存不刷新问题

问题描述：

频繁部署静态资源，nginx自带缓存未刷新

通过ftp/sftp上传到nginx的静态页（尤其是打包好的单页应用），有可能遇到客户端缓存不刷新的问题，即使重启nginx都无效

客户端浏览器也有缓存，一般关闭进程（手机清理，注意某些app光按返回键退回桌面是不会结束进程的），强制刷新网页等方法可以刷新

解决措施：

html本身可以通过meta设置禁止缓存
而html内引用的js如果内容有变化，则链接也应更新（添加类似?v=xxx的版本号），避免客户端从自己本地取js缓存

服务端nginx本身有缓存，可以用nginx -s reload刷新

nginx配置

location ~ .*\.(gif|html|jpg|jpeg|png|bmp|swf|js|css)$ {
root /project/jd/static/;
#禁止缓存，每次都从服务器请求
add_header Cache-Control no-store;
}

因为这里使用的是正则做匹配，优先级高于 ‘/’ ,所以静态资源就都走下面的location中去找资源了。

实测：未解决

另一个

Nginx配置nginx.conf 设置sendfile为off（默认为on）

且清楚浏览器缓存

实测：解决

前端页面设置

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

实测：未解决

js、css加上版本号

<link rel="stylesheet" href="style.css?v=1.0.0">
<script src="main,js?v=1.0.0"></script>

问号后面的不起实际作用，仅当作后缀，让浏览器自动检测更新最新的css，js等静态文件。如果用问号加参数的方法，可以添加版本号等信息，同时可以刷新一下浏览器端的缓存。这样在使用静态文件的时候会方便很多，当然也可以修改资源的名称这里就不再说了。

问题延伸

但是JS文件或CSS过多的情况下需要一个一个的去修改版本号，会花费大量的时间，此时就需要版本号是动态获取的了

更换为从messages.properties中读取
<script type="text/javascript" th:src="@{/js/test/index.js(v=#{js.version})}"></script>