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

Whitess0072025-09-06 6:04

前端页面部署在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;
        }