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"
<Directory "D:/Intelligence Monitoring/JFGJ/web/images">
Options Indexes FollowSymLinks
AllowOverride None
Require all granted
</Directory>
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/[/code] 
代理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[/code] 
代理tomcat服务也类似，采用webpack的代理方法相同。这里主要说明一下配置的顺序。

/JFGJ虚拟目录需要代理到后端服务器的/JFGJ目录

/JFGJ/images需要代理到本地文件

/JFGJ/static需要代理到webpack服务器

例如下发配置为前端开发人员的代理配置：

Alias "/JFGJ/images" "D:/Intelligence Monitoring/JFGJ/web/images"
<Directory "D:/Intelligence Monitoring/JFGJ/web/images">
Options Indexes FollowSymLinks
AllowOverride None
Require all granted
</Directory>

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[/code] 
Nginx的代理配置说明

Nginx配置文件是nginx.conf

代理本地文件

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分钟的问题？





没有找到解决方案，并希望有高手帮到我。

2.  Apache在某些Windows机器上存在代理失败的问题？

关闭杀毒软件，问题解决。网上说是Apache用了一些API，杀毒软件实施了拦截，导致代理失败。

3.  Apache运行一段时间后出现无法访问的问题，重启Apache服务后正常？

该问题是由于AcceptEx API访问拒绝导致的问题，日志中由相关错误信息，可以添加一下配置行解决。

AcceptFilter http none

AcceptFilter https none

AcceptEx参考连接