如何在内网通过FRP代理WebSocket连接，与Nginx协同工作指南

A主机，带有公网ip，安装有nginx，ip解析到域名www.a.com
B主机是局域网内的一台主机，部署有一套前后端分离的项目，vue+springboot，安装有nginx

A主机中frps.ini配置参数如下：

[common]
bind_addr = 0.0.0.0
bind_port = 7000
vhost_http_port = 6099
authentication_method = token
token = 12345678
heartbeat_timeout = 90
user_conn_timeout = 10
tcp_mux = true

B主机中frpc.ini配置参数如下：

[common]
server_addr = x.x.x.x # A主机IP
server_port = 7000
authentication_method = token
token = 12345678
protocol = tcp
tcp_mux = true

[web]
type = http
local_port = 80 # 这个端口是B主机上安装的nginx端口
custom_domains = www.a.com # A主机IP对应的解析域名
locations = /

A主机上nginx配置如下:
牵涉到80端口问题，所以配置的是nginx和frp共享80端口

server {
    listen 80;
    server_name www.a.com;
    location / {
        proxy_pass http://127.0.0.1:6099; # 监听的是frps中vhost_http_port配置的端口
        proxy_redirect http://$host/ http://$http_host/;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
    }
}

B主机上nginx代理配置如下：

http { 
    ....
    map $http_upgrade $connection_upgrade {
        default upgrade;
        ''   close;
    }

    server {
        listen       80;
        server_name  x.x.x.1; # B主机ip
        # 前端项目
        location / { 
            root   /usr/local/nginx/html/;
            index  index.html index.htm;
            if (!-e \$request_filename) {
               rewrite ^(.*)\$ /index.html?s=\$1 last;
               break;
            }
        }
        # 代理websocket
        location /websocket/ {
            proxy_pass http://127.0.0.1:8094/websocket/;
            proxy_read_timeout 300s;
                
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection $connection_upgrade;

        }
        #  代理后端项目
        location /single {
            proxy_pass              http://127.0.0.1:8094/;
            proxy_set_header        Host single-system;
            proxy_set_header        X-Real-IP \$remote_addr;
            proxy_set_header        X-Forwarded-For \$proxy_add_x_forwarded_for;
        }
}

目前遇到的问题：
在B主机上不开启frpc服务，通过浏览器访问B主机ip进而访问项目，一切正常，websocket也能正常通信使用
在B主机上开启frpc后，通过浏览器访问A主机ip解析的域名www.a.com进而访问项目，其他功能都正常，但是websocket无法跟服务端通信。
单独使用websocket客户端软件进行连接测试，
当地址是B主机IP的时候可以连接成功并进行通信。比如：ws://x.x.x.1/websocket/1111111
但是当把地址换成A主机IP解析的域名后进行通信，比如：ws://www.a.com/websocket/1111111，报错如下：

错误：	Unexpected response code:404
错误：	Failed to execute "send/sendData"
错误：	The connection was aborted due to timeout or other failure.
连接被关闭。

我的理解是在A主机的nginx上收到websocket的有关请求后，不知道如何处理才报错的。但是我这边不知道要咋配置这个请求处理。

如果在A主机的nginx上配置websocket有关的，就像B主机那样的，那B主机上的frpc是否还得再增加有关配置，增加啥样的配置？

实践操作：
上述理解是正确的，确实需要在A主机的nginx中配置websocket有关的。
配置后的结果如下：

# 跟原有相比，多个这个
map $http_upgrade $connection_upgrade {
    default upgrade;
    ''   close;
} 

server {
    listen 80;
    server_name jdd.frptest.com;
    location / {
        proxy_pass http://127.0.0.1:6099;
        proxy_redirect http://$host/ http://$http_host/;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;
    }
    # 跟原有相比，多了这个，注意还是监听的vhost_http_port 6099端口，后面有路径
    location /park-single/websocket/ {
        proxy_pass http://127.0.0.1:6099/park-single/websocket/;
        proxy_read_timeout 300s;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
    }
}

B主机的frpc中配置修改如下：

[web]
type = http
local_port = 80 # 这个端口是B主机上安装的nginx端口
custom_domains = www.a.com # A主机IP对应的解析域名
locations = /,/park-single/websocket/ # 多了这个路径

然后使用客户端测试，(实际跟上述说明的地址有些变动)

原文地址：https://www.cnblogs.com/sanduzxcvbnm/p/14755694.html