今天在工作中偶然发现一个有意思的现象,我们的开发环境和演练环境都是同样的代码,同样的环境。但是演练环境打开的网页在窗口外层都会包裹着一个红色的边框,右上角还有一个圆形的红底Test标识。大概是这样的一个效果:
今天在工作中偶然发现一个有意思的现象,我们的开发环境和演练环境都是同样的代码,同样的环境。但是演练环境打开的网页在窗口外层都会包裹着一个红色的边框,右上角还有一个圆形的红底Test标识。大概是这样的一个效果:
当时就想,这是怎么出来的呢,直觉告诉我这一定不是代码层追加上来的,因为两个环境的代码都是一毛一样的。应该是服务器层强加上去的,于是报着这种对技术的好奇,终于让在百度上找到了结果。
说实话,这种都不知道如何提问的问题,在百度上去搜索也是费了我一番心思,我直接搜索:Nginx 内容替换
这样多搜索了几次,我终于知道原来nginx有一个扩展模块叫做subs_filter,专门就是用来内容过滤用的,看了一个它的介绍功能还挺强大的。
找到了线索,自己总想也实践一把,于是下班回家后,我登录到我的阿里云服务器,决定来折腾一把,毕竟搞技术的,不去真正实践一把那永远也只是停留在理论之上,我们要实论结合实践才能真的算是掌握,尽管折腾的过程也是有一点费时,但还是值得的。
ok,废话不说,我把实践的过程来一个从头到尾的回放,但愿对感兴趣的你有所帮助。
首先我看一下我的nginx 的安装情况:
这是我未安装之前的nginx信息
安装subs_filter扩展,需要先下载这个扩展,链接如下:
https://github.com/yaoweibin/ngx_http_substitutions_filter_module
直接Download ZIP 包下来,或者用git命令也行,我是先把zip下载下来,然后在服务器上用rz命令上传上去(其它有点傻,如果服务器上装了git的话,直接用git命令更省事)再unzip解压即可。
接下来是进入nginx源码安装时的目录,我的是usr/local/src下,如图:
直接使用命令:./configure --user=nginx --group=nginx --with-Http_ssl_module --add-module=/usr/local/src/ngx_http_substitutions_filter_module-master
加粗标红的就是这次的重点,即添加的扩展模块
使用make 命令编译一下,注意:只需要make一下,不需要再执行 make install 命令
此时,会在objs目录下更新nginx执行 文件,如图:
接下来我们先备份好原有的nginx执行文件,命令:
cd /usr/local/nginx/sbin/
mv nginx nginx.bak.20210303
如图:
然后复制刚才objs目录下的nginx执行文件到 nginx /usr/local/nginx/sbin目录中,
cd -
cp nginx /usr/local/nginx/sbin/
复制好以后,我们先停掉正在运行的nginx服务,使用pkill -9 nginx
再次启动 nginx服务 /usr/local/nginx/sbin/nginx
此时就已经安装好subs_filter这个模块了,如图:
OK,此时模块已经装好,我们需要做的是在nginx配置文件中,配置好过滤与替换内容即可,打开我的88端口的nginx配置文件:
subs_filter 这里解释一下:
subs_filter '
' ' 这一段的意思,相于是在body标签的后面加上一个class="test_box" 的 这个就不用解释了吧,一段js的代码,主要是给body加个红色的边框,然后再给插入的
$(function(){var h = $(window).height();var w = $('body').width();console.log(w,h); $('body').CSS({'margin':0,'padding':0,'border':'5px solid red','width':w-10,'height':h-10}); $('.test_box').css( {'background':'red','width':'50px','height':'50px','border-radius':'100%','position':'absolute','top':'10px','right':'25px','text-align':'center','line-height':'50px','color':'#fff' });})
0