nginx vue django websocket简易配置

NGINX配置

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;
    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    gzip  on;
    map $http_upgrade $connection_upgrade {
        default upgrade;
        ''   close;
      }
    server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   C:/chip/front/dist;
            try_files $uri $uri/ @router;
            index  index.html index.htm;
        }
        location ~ ^/prod-api {
            rewrite ^/prod-api/(.*)$ /$1 break;
            proxy_pass http://127.0.0.1:8000;
        }   
        location /socket/ {
            rewrite ^/socket/(.*)$     /$1 break;
            proxy_pass http://127.0.0.1:8000;

            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 Upgrade websocket;
            proxy_set_header Connection Upgrade;

            proxy_http_version 1.1;
            proxy_connect_timeout 4s;                #配置点1
            proxy_read_timeout 300s;                  #配置点2，如果没效，可以考虑这个时间配置长一点
            proxy_send_timeout 12s;                  #配置点3
            #add_header Content-Security-Policy upgrade-insecure-requests;
        }
        location @router {
            rewrite ^.*$ /index.html last;
        }
    }
}

VUE 配置信息：
.env.development

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = '/api'
VUE_APP_SOCKET_API = '/socket'

.env.production

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = '/prod-api'
VUE_APP_SOCKET_API = '/socket'

vue.config.js

    proxy: {
      '/api': {
        // target: process.env.BACKGROUND_APPLICATION_URL,
        target: 'http://127.0.0.1:8000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        },
        // ws: true
      },
      [process.env.VUE_APP_SOCKET_API]: {
        target: "ws://127.0.0.1:8000", //socket 后台接口，连接本地服务
        ws: true, //是否跨域
        changeOrigin: true,
        pathRewrite: {
          ["^" + process.env.VUE_APP_SOCKET_API]: ""
        }
      }
    }

vue中使用websocket

initWebSocket() {//初始化weosocket
      const url = `${location.protocol === "https:" ? "wss" : "ws"}://${location.host}${process.env.VUE_APP_SOCKET_API}`;
      this.websock = new WebSocket(`${url}/ws/remind/?${getToken()}`)
      this.websock.onmessage = this.websocketonmessage
      this.websock.onopen = this.websocketonopen
      this.websock.onerror = this.websocketonerror
      this.websock.onclose = this.websocketclose
    },