今天在发布项目时遇到了一个大坑,在这记录下来,如果以后有人遇到可以参考解决一下,避免绕弯路耽误时间

简单介绍整个项目配置:用nginx(nginx版本号为1.12.2)做https转发,转发到另一个服务器上的nginx(这个nginx用于部署react共工程)

在成功部署好react工程以后问题来了,大部分人通过https访问是显示空白页的,只有我的chrome浏览器可以持续访问,其他人的浏览器访问都是时好时坏。于是开始分析问题出现的原因,起初是怀疑反向代理nginx的缓存问题,于是尝试修改转发nginx的配置文件,在配置文件中添加不进行缓存的配置,然后使用浏览器访问,试了几次发现还是不行。几次尝试失败后,开始重新分析问题,利用chrome的开发者工具查看报错和网络请求,这时chrome控制台报的错是出在请求react项目打包结束后里面的main.xxx.js无法顺利读取到,而在react部署的nginx上却没有问题,这时锁定问题,可能是这个js文件有问题,于是让同事又重新部署了一遍,发现还是没有解决,这时考虑从网络请求方面查找问题,切换到chrome的network选项中,发现在请求这个js文件时只读了400多ms就失败了,而react部署的nginx读取完这个js文件需要4s左右,由此推测可能是反向代理nginx是不是需要配置一下超时时间,但是查了一下nginx代理的默认读取超时默认时间是60s,这样就明显不是这个问题了。于是又返回来看chrome中的网络请求,这次又发现请求这个js文件每次都是读取了64KB后就断开了,由此感觉可能是代理nginx对文件的大小有限制,开始查资料,查资料发现nginx有个配置项是proxy_buffers是配置代理缓冲区大小的(proxy_buffers由缓冲区数量和缓冲区大小组成的。总的大小为numbersize。linux一般配置是8 * 8K正好是64kb ),于是开始配置,重启代理nginx,发现生效了,成功解决这个问题。 总结,其实之所以会出现这个问题还是因为页面大小没有优化好造成的,根本还是要去优化页面大小才对