本文介绍了nginx前端资源部署的最佳方案,前端资源缓存问题解决方案,nginx配置,nginx 配置
场景
实际项目部署过程中,运维小伙伴,做线上环境的部署的时候,前端更新资源后,总是需要清缓存才能看到个更新后的结果。客户那边也反馈更新了功能,看不到。
方案
前端小伙伴应该都知道浏览器的缓存策略,协商缓存和强缓存,现在比较流行的是单页应用。了解了浏览器的缓存之后,在常见的web开发中我们应该怎么设置呢。现在大多数的应用是通过webpack打包的,打包生成的资源名称会带上hash值。下面是打包后的文件
我们可以遵循之下规则
- index.html入口文件不加强制缓存,设置成协商缓存
- js 资源在线上环境可以设置成强缓存。
因为我们每次打包之后,入口文件会有变化,所以协商缓存会失效,会重新从服务器获取新的资源。而对应的js资源有hash的变化,所以有变化,会从服务器中获取。
nginx配置
要设置html,htm类型的文件走协商缓存,其它js文件走强缓存,我们可以这样配置。
#设置某个类型的文件走协商缓存
if ($request_filename ~* .*\.(?:htm|html)$) {
add_header Cache-Control 'no-cache';
}
整体配置
location /page/appAnalyze {
try_files $uri $uri/ /index.html last;
alias /usr/*******/dist;
index index.html index.htm;
#设置某个文件不缓存读取本地,永远走200,拿到最新的
if ($request_filename ~* .*\.(?:htm|html)$) {
add_header Access-Control-Allow-Credentials false;
add_header Access-Control-Allow-Origin $http_origin;
# header上添加协商缓存
add_header Cache-Control 'no-cache';
# 表示请求头的字段 动态获取
add_header Access-Control-Allow-Headers
$http_access_control_request_headers;
}
发表评论
取消回复