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

╰+哭是因爲堅強的太久メ 2022-07-11 18:26 483阅读 0赞

**目标：**  
本文依赖自己的个人经验，简要介绍一下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*: 前端框架，充分利用其组件的思想，可以加快页面的开发速度和开发团队的工作积累。  
下图为开发时的代理逻辑图，不同的开发角色具有不同的选择：  
![代理逻辑图][SouthEast]  
通过上面逻辑图的方式有利于实现前后端分离的开发模式，升级和部署也比较方便。  
在开发团队内部，建立一个测试服务器，把后端代码部署在服务器上，后台团队升级时部署升级测试服务器的tomcat代码，同时部署代理服务器和前端代码，测试人员可以对测试服务器的程序进行测试。前端开发人员和手机App开发人员通过访问测试服务器上的代理（Aapache/Nginx）端口，这样前端/App开发人员就不需要关心后端的运行环境。  
![前后端开发分离示意图][SouthEast 1]  
**注意**：笔者在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使用别名，把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_8080_xxx.css]访问的，所以需要把[http://localhost/JFGJ/static/xxx.css][http_localhost_JFGJ_static_xxx.css]替换为[http://localhost:8080/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"
    <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

--------------------

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

[SouthEast]: /images/20220711/5154b3cdeb604cd4b361ddd85e56ae75.png
[SouthEast 1]: /images/20220711/295aee16de4e4767bd72f3f1f5e3d85d.png
[http_localhost_8080_xxx.css]: http://localhost:8080/xxx.css
[http_localhost_JFGJ_static_xxx.css]: http://localhost/JFGJ/static/xxx.css
[Nginx_1]: /images/20220711/df4fde8c48604c4f8366d6690b695acb.png
[Nginx_2]: /images/20220711/5ef5b47b60e34c339675d08e12506662.png
[AcceptEx]: http://www.youranshare.com/push/topics/softuse/211.html