目标： 本文依赖自己的个人经验，简要介绍一下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版本以上。
本文采用的目录结构如下： 项目虚拟路径是：/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/代理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/JFGJProxyPassReverse /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"<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/JFGJProxyPassReverse /JFGJ http://192.168.1.50:8080/JFGJ采用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参考连接
新闻热点
疑难解答
