前端发布静态资源自动增加版本号

前端服务发布,一些css,js文件的响应头会进行强缓存的设置,比如响应头:Cache-Control, Etag, Last-Modified等。结果就是浏览器会缓存这些静态资源文件,如果前端服务迭代发布了,即使静态资源进行了更新,但是你的浏览器可能使用强缓存,访问缓存在本地的旧的静态资源文件,造成一系列的问题。本文基于openresty解决该问题。

访问流程:

①浏览器地址栏输入: http://10.1.1.3:80/abc/dashboard/@last/index.html

②nginx将uri中的/abc/dashboard/@last/index.html 替换为:/abc/dashboard/"发布版本号"/index.html,替换逻辑来源于目录的扩展属性

③代理到前端服务地址,此时uri已经带上"发布版本号"

**前提是:**发布时需要设置指定目录的扩展属性为:版本号(一般发布平台会自动生成发布版本号)。下面提供一些设置方式

在发布时执行以下命令,$(Build.BuildNumber)为发布版本号,
/apps/abc_new为服务指定目录,即设置扩展属性的文件目录

setfattr -n user.last_version -v $(Build.BuildNumber) /apps/abc_new



或者执行以下shell脚本,获取指定目录下修改时间最新的文件夹
(静态资源的目录可能是以发布的版本号命名的文件夹)

#!/bin/bash
cd /apps/abc_new
latest_folder=$(ls -td -- */ | head -n 1 | cut -d/ -f1)
setfattr -n user.last_version -v $latest_folder /apps/abc_new
1.nginx配置
location /abc/dashboard {
	access_by_lua_block {
		local last_version = require "resty.last_version"
		last_version.replace_uri("/apps/abc_new")
	}
    #反向代理到前端服务
	proxy_pass http://abc_dashboard;
	proxy_redirect    off;
	proxy_set_header  Host $host;
	proxy_set_header  X-real-ip $remote_addr;
	proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;

}

#前端服务,docker容器部署
upstream abc_dashboard {
    server 10.1.1.3:8081;
    server 10.1.1.4:8081;
    check interval=3000 rise=2 fall=5 timeout=2000 type=http;
    check_http_send "HEAD /  HTTP/1.0\r\n\r\n";
    check_http_expect_alive http_2xx http_3xx http_4xx;
}
2.lua脚本(替换uri中的"@last"为发布版本号)
local shell = require "resty.shell"

local _M = {}

--获取指定目录的扩展属性,即版本号
local function get_last_version(parent_path)
        local ok, stdout, stderr, reason, status  = shell.run("getfattr -n user.last_version  --absolute-names " .. parent_path .." --only-values")
        if ok then
                return stdout
        else
                return "404"
        end
end

--将uri中的@last替换为版本号
function _M.replace_uri(parent_path)
        local req_uri = ngx.var.request_uri
        local last_start ,last_end = ngx.re.find(req_uri, '/@last/', 'jo')
        if last_start and last_end then
                local last_version = get_last_version(parent_path)
                local new_url = string.sub(req_uri, 1, last_start) .. last_version .. string.sub(req_uri, last_end)
                ngx.log(ngx.ERR, "new_url = " .. new_url)
                ngx.req.set_uri(new_url)
                return new_url
        end
end

return _M
相关推荐
m0_zj1 小时前
8.[前端开发-CSS]Day08-图形-字体-字体图标-元素定位
前端·css
还是鼠鼠1 小时前
图书管理系统 Axios 源码__编辑图书
前端·javascript·vscode·ajax·前端框架
北极象1 小时前
vue3中el-input无法获得焦点的问题
前端·javascript·vue.js
百度网站快速收录1 小时前
网站快速收录:如何优化网站头部与底部信息?
前端·html·百度快速收录·网站快速收录
Loong_DQX2 小时前
【react+redux】 react使用redux相关内容
前端·react.js·前端框架
GISer_Jing2 小时前
react redux监测值的变化
前端·javascript·react.js
engchina2 小时前
CSS 样式化表格:从基础到高级技巧
前端·css
m0_528723812 小时前
react中useEffect的使用
前端·javascript·react.js
大模型铲屎官3 小时前
HTML从入门到精通:链接与图像标签全解析
开发语言·前端·javascript·html·编程·链接标签·图像标签
大模型铲屎官3 小时前
HTML 列表标签全解析:无序与有序列表的深度应用
前端·javascript·html·有序列表·列表标签·无序列表