apache配置反向代理+websocket

需求场景：

有一个需求，在web端已开发完成，现在要在app上重新开发一套，接口仍然使用原有的接口，不再额外开发，app上的部分功能不再额外开发，而是直接跳转到web页面。

我们的后台服务支持可配置。app登陆时需要配置可访问的后台服务地址，同时要配置前端服务的访问地址，因为我们采用了前后端分离部署，前后端服务的ip端口号都不一样，此时，app登陆时需要配置两个接口地址，操作太麻烦。

解决方案就是，app配置的接口地址，是前端的ip+端口号，不再配置后端地址。前端服务apache需要提供反向代理的功能，将app发来的访问后台接口的请求，转发到后台服务，同时将后台的响应返回给app。

前端服务地址：http://172.21.38.1:6060
后台服务地址：http://172.21.38.2:8080

本来app加载前端页面时，直接访问http://172.21.38.1:6060/main/home；访问后台接口时，直接访问http://172.21.38.2:8080/api/getRoleList。

apache提供反向代理后，app访问前端页面的方式不变，访问后端变成http://172.21.38.1:6060/proxyA/api/getRoleList。因为前端服务apache配置了proxyA的代理方式，所以会将该请求直接分发给后台地址。

实现步骤：

1. Apache24\conf\httpd.conf中，将下面代码前的#去掉：

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_ajp_module modules/mod_proxy_ajp.so
LoadModule proxy_balancer_module modules/mod_proxy_balancer.so
LoadModule proxy_connect_module modules/mod_proxy_connect.so
LoadModule proxy_http_module modules/mod_proxy_http.so
Include conf/extra/httpd-vhosts.conf

2. Apache24\conf\extra\httpd-vhosts.conf，整个文件内容如下，其中apiServer需要在前端请求地址中加上，用于此处的路由匹配和拦截。

DocumentRoot "${SRVROOT}/htdocs"
ProxyRequests Off

# 反向代理websocket请求
RewriteEngine On
RewriteCond %{HTTP:Connection} Upgrade [NC]     
RewriteCond %{HTTP:Upgrade} websocket  [NC]
RewriteRule /apiServer/(.*) ws://172.21.72.24:8080/$1 [P]

# 反向代理http请求
ProxyPass /apiServer/ http://172.21.72.24:8080/
ProxyPassReverse /apiServer/  http://172.21.72.24:8080/

3. 接口地址配置文件ip_config.js

const url = document.location.href;
const urlList = url.split('//');
const IP_CONFIG = urlList[0] + "//" + urlList[1].split("/")[0] + "/apiServer" // 地址从浏览器地址栏获取
// const IP_CONFIG = "http://172.21.72.13:6010/apiServer";// 配置反向代理时
// const IP_CONFIG = "http://172.21.72.82:8080"; // 不配置反向代理时