Websocket链接如何配置nginx转发规则?

前端页面部署在localhost:8088端口上,后端websocket服务部署在localhost:8082端口上,下面介绍两种环境的转发规则。

前端接口:ws://localhost:8088/api/ws/runs/16?token=null

1、开发环境(vue3框架)

复制代码
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
  publicPath: process.env.VUE_APP_BASE_URL,
  outputDir: `./dist/${process.env.VUE_APP_BASE_URL}`,
  transpileDependencies: true,
  productionSourceMap: false,
  css: {
    sourceMap: true,
  },
  chainWebpack: config => {
    config.devtool('eval-source-map')
  },
  chainWebpack: (config) => {
    config.plugin('define').tap((definitions) => {
      Object.assign(definitions[0], {
        __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: JSON.stringify(false),
        __VUE_OPTIONS_API__: JSON.stringify(true),
        __VUE_PROD_DEVTOOLS__: JSON.stringify(false),
      });
      return definitions;
    });
  },
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        ws: true,
        changeOrigin: true
      },
    }
  }
});

2、生产环境

复制代码
        location ^~ /api/ws/ {
                proxy_pass http://127.0.0.1:8082;
                
                 proxy_http_version 1.1;
                 proxy_set_header Upgrade $http_upgrade;
                 proxy_set_header Connection "upgrade";
                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_set_header X-Forwarded-Proto $scheme;
                 
                proxy_read_timeout 3600s;
                proxy_send_timeout 3600s;
        }
相关推荐
卓码软件测评3 小时前
第三方web测评机构:【WEB安全测试中HTTP方法(GET/POST/PUT)的安全风险检测】
前端·网络协议·安全·web安全·http·xss
zz-zjx6 小时前
进程与线程详解, IPC通信与RPC通信对比,Linux前台与后台作业
linux·网络协议·rpc
迈威通信11 小时前
迈威通信从送快递角度教你分清网络二层和三层
网络·网络协议·智能路由器·信息与通信
郝亚军12 小时前
根据Sec-WebSocket-Key计算Sec-WebSocket-Accept
网络·websocket·网络协议
Kaede612 小时前
深入探索 WebSocket:构建实时应用的核心技术
网络·websocket·网络协议
if时光重来12 小时前
springboot项目使用websocket功能,使用了nginx反向代理后连接失败问题解决
spring boot·websocket·nginx
xiaozhenghahaha13 小时前
Web相关知识(草稿)
运维·nginx
柯南二号15 小时前
【后端】Docker 常用命令详解
服务器·nginx·docker·容器
工会代表16 小时前
nginx配置,将前端项目配置到子路径下踩过的坑。
前端·nginx