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;
        }
相关推荐
岚天start几秒前
Nginx配置中location和proxy_pass指令尾部是否带斜杠的区别
运维·nginx·centos·proxy_pass·location·uri·斜杠
xx.ii4 分钟前
54.Nginx部署与lnmp的部署
运维·nginx·负载均衡
shylyly_2 小时前
Linux-> UDP 编程3
linux·运维·网络协议·udp·bind·cs·聊天室程序
歪歪1002 小时前
什么是TCP/UDP/HTTP?
开发语言·网络·网络协议·tcp/ip·http·udp
luckys.one2 小时前
第12篇|[特殊字符] Freqtrade 交易所接入全解:API、WebSocket、限频配置详解
网络·ide·python·websocket·网络协议·flask·流量运营
踏过山河,踏过海3 小时前
在SSL证书是有效的前提下,依旧显示“资源不安全
网络协议·安全·ssl
用户51681661458413 小时前
使用[DeepSeek]快速定位nginx前端部署后报错:500 Internal Server Error nginx/1.29.1
nginx·deepseek
小红4 小时前
网络通信基石:从IP地址到子网划分的完整指南
前端·网络协议
火车叼位4 小时前
TLS证书验证绕过的陷阱:从Node.js警告到跨平台安全实践
网络协议
宁雨桥4 小时前
Nginx反向代理配置全流程实战:从环境搭建到HTTPS部署
运维·nginx·https