Nginx内容过滤器-subs_filter

最新推荐文章于 2024-03-05 16:39:35 发布

虚拟社群

最新推荐文章于 2024-03-05 16:39:35 发布

阅读量4.1k

点赞数 1

文章标签： php Powered by 金山文档

本文链接：https://blog.csdn.net/yangguang3004/article/details/129461489

版权

今天在工作中偶然发现一个有意思的现象，我们的开发环境和演练环境都是同样的代码，同样的环境。但是演练环境打开的网页在窗口外层都会包裹着一个红色的边框，右上角还有一个圆形的红底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>' '<divclass="test_box">Test</div><scriptsrc="js/jquery.min.js"></script><scriptsrc="js/test.js"></script></body>';

这一段的意思，相于是在body标签的后面加上一个class="test_box" 的<div> 然后再引入两个js,在test.js里面写上逻辑，代码如下：

$(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'                });})

这个就不用解释了吧，一段js的代码，主要是给body加个红色的边框，然后再给插入的<div>动态加上样式。

接下来我们写一个简单的静态文件，test.html，代码如下：

<!DOCTYPE html><htmllang="en"><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>hello world</title></head><body><h1>hello world</h1></body></html>

访问一下这个页面，看看效果：

没错，就是这个效果，和我在演练环境看到的一毛一样。折腾了一两个小时，终于搞明白了这个问题，还算是有所收获吧...

好了，今天的分享就此结束，有好的建议与想法欢迎留言。。。

虚拟社群

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
0
评论
Nginx内容过滤器-subs_filter

找到了线索，自己总想也实践一把，于是下班回家后，我登录到我的阿里云服务器，决定来折腾一把，毕竟搞技术的，不去真正实践一把那永远也只是停留在理论之上，我们要实论结合实践才能真的算是掌握，尽管折腾的过程也是有一点费时，但还是值得的。今天在工作中偶然发现一个有意思的现象，我们的开发环境和演练环境都是同样的代码，同样的环境。当时就想，这是怎么出来的呢，直觉告诉我这一定不是代码层追加上来的，因为两个环境的代码都是一毛一样的。ok,废话不说，我把实践的过程来一个从头到尾的回放，但愿对感兴趣的你有所帮助。
复制链接

扫一扫