如何实现 WebSocket 反向代理?
前言
为什么要代理 WebSocket？
是这样的，因为我们有个基于 electron 的桌面应用，他在本地提供 http 和 websocket 两个服务，客户端（浏览器）可以使用这些服务来完成一些核心业务需要。
问题是，目前该应用只支持 windows 平台，虽然生产环境对环境有所要求，但部分开发却是 mac 电脑，无法安装该客户端，总不能要求开发者安装个虚拟机，或者尽快开发个 mac 版，无论硬件还是软件，搭建开发环境的成本都太高。
于是设想在一台 windows 电脑上共享桌面应用服务，在测试环境做请求代理，以便持有 mac 或者安装应用有问题的同学进行无障碍快速接入。
这篇就讲下如何配置 webpack 和 nginx 来完成这样的“小工程”。
架构设计
下图主要示意了如下几个方面：
- 桌面服务被安装在可用的 windows 机器上
- 开发环境通过配置 webpack 进行请求转发
- 对于 mac 平台及不适配的情况，统一通过 nginx 进行请求转发
跨平台 socket 代理策略
webpack-dev-server
项目基于 vue-cli，首先需要对 vue.config.js 中 webpack 的代理部分进行修改。
先设置 VUE_APP_PROXY_URL，定义目标转发环境的（IP）地址，再添加 VUE_APP_PROXY_PLATFORM 决定是否开启转发功能。
# env.local
VUE_APP_PROXY_PLATFORM = mac
VUE_APP_PROXY_URL = 192.168.1.x:81// vue.config.js
var proxy = {
// 后端服务
['/api']: {
target: process.env.VUE_PROXY_API,
},
};
if (VUE_APP_PROXY_PLATFORM == 'mac') {
proxy = Object.assign(proxy, {
// 桌面应用 http 服务
['/app-api']: {
target: 'http://' + process.env.VUE_APP_PROXY_URL,
},
// 桌面应用 websocket 服务
['/app-ws']: {
target: 'ws://' + process.env.VUE_APP_PROXY_URL,
ws: true, //开启 websocket 支持
pathRewrite: {
'^/app-ws': '/',
},
},
});
}
module.exports = {
// ...
devServer: {
host: '0.0.0.0',
port: port,
open: true,
proxy: proxy,
},
};
接下来只要在业务代码中，添加对应 /app** 前缀来匹配代理规则即可。
nginx
nginx 端配置简单，只需要对协议进行升级即可：
server {
listen 81;
# http 代理
location /app-api/ {
proxy_pass http://192.168.1.y:18455/;
}
# websocket 代理
location / {
proxy_pass http://192.168.1.y:18455/;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "Upgrade";
}
}
最后
本文主要记录我在遇到这个问题时，实施的解决方案，但不具备通用性。不过也希望为有遇到类似场景问题的同学提供一个方向的解决思路。