前些天,公司的一个项目需要重新在异地的服务器上部署。
说实话,因为一些特殊的原因,这个项目已经反复部署过很多遍了,说是得心应手也不过分了。
在我们经过一些列的忙活之后,本以为即将大功告成的时候,却发生了意外,在做最后一步外网映射的时候,出现了让大家都束手无措的局面。
在服务器所在的局域网内,直接通过内网 ip 地址访问的时候,网页是能够正常打开的。
但是,当我们想通过映射出来的网址,访问网站的时候,发现老是出现访问不了的情况。
一开始我们以为是服务器的网络状态太差。
这种情况在之前也出现过,所以出了问题,第一时间我们就习惯性的以为是这个原因。
但是后来等了几个小时,发现一直是这个状态,甚至有点愈演愈烈的感觉,于是没辙,我就开始研究问题到底出在哪儿了。
一开始, 用 chrome 浏览器测试的时候,发现几乎每次,都只加载了部分 js 文件。
开始,我习惯性的以为是因为网络状况太差,导致后面的 js 文件没加载完成。
后来细看,才发现,原来每次都成功加载的这几个 js 文件,是通过 link 标签预加载的。
如果感兴趣,又不了解相关技术细节的童鞋,可以阅读下 MDN 的这个页面,页面里有详细介绍:Link types: preload - HTML: HyperText Markup Language | MDN。
这个时候,我内心一惊,难道是,html 页面内容缺失了,否则怎么会就只加载这几个 js 脚本文件,其他 js 文件都不加载了。
看了下请求到的数据,发现 index.html
文件内部,script 脚本有关的内容都没了。
为了验证我没有看错,我打开 firefox 再次确认了一下:
文件内容一致,但是内容稍有区别,从 firefox 的开发者工具中可以看到,该文件里多了很多空白部分,而这些空白部分在 chrome 的 devtool 显示的时候,却被自动删除掉了。
这里不得不说,chrome devtool 在这里做的优化,直接就是反向优化,反而会让人很迷惑。但是 firefox 开发者工具就做的很好,原封不动的将原内容呈现出来了。
我相信,看到 index.html
文件中多了很多空白的字符,很多童鞋就应该明白了,页面加载异常的原因所在了。
因为 html 文件内容被修改过了,文件内部的 script 脚本内容都被删掉了,所以页面当然就不能正常加载出来了。
为了进一步验证我的猜测,我用内网地址和外网地址分别通过 curl 请求了一下网站首页的内容:
可以看到,通过外网地址获取到的首页文件内,缺失了 script 脚本代码。
至此,终于找到了问题所在了。
之后,将这个问题反馈给其他同事,经核查以后,发现是因为防火墙的策略引起的问题。
防火墙的入侵检测模块,之前配置为,会自动删除掉了 html 文件中的 script 脚本内容。
最终,修改一下防火墙的相关配置以后,发现系统能正常访问了。
很多时候,出现问题,总会有原因的。如果不深究,不细查,一点点的抽丝剥茧,很难定位出问题究竟出现在什么地方。
我想,要想成长为一枚“大牛”级别的程序员,就是需要有不断探索的精神吧。
不断地发现问题,再解决问题。
在这个过程中,不断地迎难而上,一点点的积累,我相信,终会有那个“水到渠成”的一天吧。