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

【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: 前端框架，充分利用其组件的思想，可以加快页面的开发速度和开发团队的工作积累。
下图为开发时的代理逻辑图，不同的开发角色具有不同的选择：

文章图片

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

文章图片

注意：笔者在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实现前后端开发分离

文章图片

文章图片

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