前端nginx如何配置ws(websocket)代理服务？

 最近有个需求是WebSocket代理配置，ws配置跟http配置不太一样，所以记录一下需要配置的nginx和使用方法。

发起websocket请求的路径

// 原本写死的路径是
const url = `ws://ip:port/umc/ws/connect/...` // 后面就是具体的请求地址，根据实际情况填写

// 写成动态的路径
const url = `ws://${window.location.host}/wsPrefix/umc/ws/connect/...` // 注意：/wsPrefix是拦截代理的标志，根据自己项目的拦截代理进行替换即可。在前端是用于标识ws请求，在设置代理的过程中主要用于请求拦截标识，实际请求会截掉它。

这里的拦截标识是必要的，没有拦截标识，前端就不会去请求正确的地址。

后台实际访问的地址是 ws://ip:port/umc/ws/connect/...

所以在代理和nginx配置的时候都要把拦截标识截掉，发出正确的请求给后台才能连通。

React项目内配置ws代理设置

在proxy.ts文件中添加如下代理配置：

export default {
    dev: {
        '/wsPrefix/umc/ws': {
            target: 'http://ip:port/', //这里是后台ws访问地址
            changeOrigin: true,  //允许跨域设置
            ws: true, //websocket代理设置
            pathRewrite: { '^/wsPrefix' : '/' } //拦截路径去除
        }
    }
}

在项目中配置nginx方法

一般容器部署的nginx是在项目中会创建一个docker文件存放nginx配置，所以找到nignx文件夹进行配置即可。但是有些虚机部署的是在机器上配置nginx，也就是Linux服务，文件位置在/usr/local/nginx/conf/文件夹中，具体位置不同系统镜像文件位置可能略有差异，可以通过命令去查找nginx文件夹的位置放在哪（ps -afx | grep nginx）。

upstream websocketServer {
    server ip:port
}

# 如果没有Upgrade头，则$connection_upgrade为close，否则为upgrade
map $http_upgrade $connection_upgrade {
    default upgrade;
    ''      close;
}

server {
    listen 80;
    ...;
    
    # webSocket代理
    location ^~ /wsPrefix/umc/ws/ {
      proxy_pass http://websocketServer/umc/ws/; #这里是http不是ws，代理的ip和port写ws访问的实际地址
      proxy_http_version 1.1; #这里必须使用http 1.1
      #下面两个必须设置，请求头设置为ws请求方式
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection $connection_upgrade;
    }
}

编写完成配置文件保存后，需要重启nginx服务，重启后使用上述前端访问地址发起ws请求即可成功连接到代理服务。