目录
前言
为什么要代理 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 { listen81; # http 代理 location /app-api/ { proxy_pass :18455/; } # websocket 代理 location / { proxy_pass :18455/; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection "Upgrade"; } }最后
本文主要记录我在遇到这个问题时，实施的解决方案，但不具备通用性。不过也希望为有遇到类似场景问题的同学提供一个方向的解决思路。