Webpack + Tomcat + Nginx/Apache实现前后端开发分离

【Webpack + Tomcat + Nginx/Apache实现前后端开发分离】目标:
本文依赖自己的个人经验,简要介绍一下ReactJS+Tomcat的开发方式,经过团队试用,觉得比较好。主要得益于ReactJS的开发方式和webpack工具的使用,结合强大的代理,实现了一个较为方便的小团队开发环境。由于我是零基础开始实验这个方案,并得到了友人的帮助,其中遇到了不少坑,希望可以帮助到大家。
工具介绍:
Webpack: Webpack可以使用webpack dev server实现热替换和刷新,极大解放了前端开发人员的工作。通过前后端分离的开发方式,可以在年轻团队中快速使用(所需要学习的成本较低)。
Ngnix/Aapache: 使用Ngnix/Aapache实现静态文件和动态文件分流,可是较为方便的解耦前后端的关系,并可以协同迭代开发,实现小步快跑的开发模式。
Tomcat: Tomcat容器运行J2EE代码,主要关注业务逻辑,我目前采用的时SpringMVC+Spring+MyBatis+Shiro实现,由于部分使用了Shiro+JSP的权限访问,因此页面还是由JSP先加载,然后加载图片,css和js等资源。
ReactJS: 前端框架,充分利用其组件的思想,可以加快页面的开发速度和开发团队的工作积累。
下图为开发时的代理逻辑图,不同的开发角色具有不同的选择:
Webpack + Tomcat + Nginx/Apache实现前后端开发分离
文章图片

通过上面逻辑图的方式有利于实现前后端分离的开发模式,升级和部署也比较方便。
在开发团队内部,建立一个测试服务器,把后端代码部署在服务器上,后台团队升级时部署升级测试服务器的tomcat代码,同时部署代理服务器和前端代码,测试人员可以对测试服务器的程序进行测试。前端开发人员和手机App开发人员通过访问测试服务器上的代理(Aapache/Nginx)端口,这样前端/App开发人员就不需要关心后端的运行环境。
Webpack + Tomcat + Nginx/Apache实现前后端开发分离
文章图片

注意:笔者在Windows10上面测试发现,Nginx+webpack-dev-server在Windows存在请求阻塞1分钟的问题,而采用文件代理不存在问题,如果Windows运行webpack-dev-server, Ubuntu运行Nginx,就没有这个问题。经过好几天的折腾没有找到原因,而采用Apache解决了Windows上这个代理问题。建议配置为:Windows采用Apache + Tomcat+Webpack,苹果或者Linux系统采用Nginx,或者都用Apache. Windows服务器部署建议采用2.4版本以上。

  • Apache的代理配置说明
    Apache的配置文件主要包含两个部分:
    Windows下是:conf/httpd.conf和extra/httpd-vhosts.conf
    Linux下是:conf/httpd.conf, conf.d/xxx.conf, conf.modules.d/00-proxy.conf
    为达到上述目的的代理功能,需要加载Apache的模块,主要有:
    proxy_module, proxy_connect_module, proxy_express_module, proxy_ftp_module, proxy_html_module, proxy_http_module, proxy_wstunnel_module, rewrite_module, xml2enc_module
    在httpd.conf文件或者00-base.conf文件中取消前面的“#”注释符。
本文采用的目录结构如下:
项目虚拟路径是:/JFGJ
图片虚拟路径:/JFGJ/images/
css, js静态文件虚拟路径:/JFGJ/static
webpack编译后的目录为 :[前端目录]/build
1. 代理本地文件
Apache本地文件的代理需要3个指令才可以(采用代理时引入的复杂性)
Alias "/JFGJ/images" "D:/Intelligence Monitoring/JFGJ/web/images" Options Indexes FollowSymLinks AllowOverride None Require all granted ProxyPass "/JFGJ/images" "!"

指令说明:
Alias使用别名,把URL映射到一个目录
Directory定义了一个目录,以及权限,2.4以上版本采用Require all granted获得访问权限。
ProxyPass 为代理配置,把远程服务器的服务映射到本地,由于采用了前后端分离,后端文件和前端文件在不同服务器上,需要使用代理。同时,由于使用了多个代理后,代理的路径存在优先级。Apache采用配置文件的顺序,因此,需要对本地文件的代理时,需要使用感叹号“!”实现对子目录的代理访问(排除从远程服务器代理)。
2. 代理webpack-dev-server
ProxyPass /JFGJ/static/ http://localhost:8080/ ProxyPassReverse /JFGJ/static/ http://localhost:8080/

代理webpack-dev-server较为容易,使用ProxyPass和ProxyPassReverse两个指令,第一个参数为需要代理的虚拟目录前缀,后面为后端服务器的URL。需要注意是最后的“/”结束符,第一个参数有,那么第二个参数也需要有。同时,由于采用了“/”结束符,那么URL替换时是把匹配部分给替换掉。由于webpack-dev-server访问文件时是直接使用http://localhost:8080/xxx.css访问的,所以需要把http://localhost/JFGJ/static/xxx.css替换为http://localhost:8080/xxx.css.
3. 代理tomcat
ProxyPass /JFGJ http://192.168.1.50:8080/JFGJ ProxyPassReverse /JFGJ http://192.168.1.50:8080/JFGJ

代理tomcat服务也类似,采用webpack的代理方法相同。这里主要说明一下配置的顺序。
/JFGJ虚拟目录需要代理到后端服务器的/JFGJ目录
/JFGJ/images需要代理到本地文件
/JFGJ/static需要代理到webpack服务器
例如下发配置为前端开发人员的代理配置:
Alias "/JFGJ/images" "D:/Intelligence Monitoring/JFGJ/web/images" Options Indexes FollowSymLinks AllowOverride None Require all granted ProxyPass /JFGJ/static/ http://localhost:8080/ ProxyPassReverse /JFGJ/static/ http://localhost:8080/ProxyPass "/JFGJ/images" "!"ProxyPass /JFGJ http://192.168.1.50:8080/JFGJ ProxyPassReverse /JFGJ http://192.168.1.50:8080/JFGJ

  • Nginx的代理配置说明
    Nginx配置文件是nginx.conf
    1. 代理本地文件
location ^~ /JFGJ/images/ { alias "D:/Intelligence Monitoring/JFGJ/web/images/"; }

采用location + alias指令
2. 代理webpack-dev-server
location ^~ /JFGJ/static/ { proxy_pass http://localhost:8080/; }

采用location + proxy_pass指令
3. 代理tomcat
与代理webpack服务器类似:
location /JFGJ/ { proxy_pass http://192.168.1.50:8080; }

所有配置项如下:
location /JFGJ/ { proxy_pass http://192.168.1.50:8080; }location ^~ /JFGJ/static/ { proxy_pass http://localhost:8080/; }location ^~ /JFGJ/images/ { alias "D:/Intelligence Monitoring/JFGJ/web/images/"; }

需要说明的是Nginx的location对正则表达式是较为容易支持的,location直接支持,使用“~”表明后面的URL是一个正则表达式匹配。而Apache需要使用ProxyMatch指令实现匹配,并通过ReWrite实现URL重写,从学习角度而言,Nginx配置相对而言简单一些。可是Windows下的问题,让我不得不使用Apache,而且Apache新版本也是很好用的,包括在Linux系统中。
发现的问题:
1. Windows环境下,Webpack + Ngnix + Tomcat出现超时1分钟的问题?
Webpack + Tomcat + Nginx/Apache实现前后端开发分离
文章图片

Webpack + Tomcat + Nginx/Apache实现前后端开发分离
文章图片

没有找到解决方案,并希望有高手帮到我。
2. Apache在某些Windows机器上存在代理失败的问题?
关闭杀毒软件,问题解决。网上说是Apache用了一些API,杀毒软件实施了拦截,导致代理失败。
3. Apache运行一段时间后出现无法访问的问题,重启Apache服务后正常?
该问题是由于AcceptEx API访问拒绝导致的问题,日志中由相关错误信息,可以添加一下配置行解决。
AcceptFilter http none
AcceptFilter https none
AcceptEx参考连接

    推荐阅读