模块开发之nginx配置websocet支持多环境配置(十五)

骑猪看日落 2022-05-13 16:36 385阅读 0赞

# 模块开发之nginx配置websocet支持多环境配置(十五) #

### 文章目录 ###

*  前言
 *  配置webpack的多环境配置
 *  配置项目
 *   *  生产环境\`webpack.dev.config.js\`
     *  开发环境\`webpack.prod.config.js\`
     *  新建websocket配置文件\`wsConfig.js\`
     *  使用配置文件，连接服务器
 *  配置\`nginx\`,支持\`websocket\`反向代理
 *   *  \`ws协议\`（不安全协议）
 *  \`wss协议\`（安全协议）

# 前言 #

nginx配置websocket网上资料很多，不是本文重点。  
websocket语法

var Socket = new WebSocket(url, [protocol] );

由语法我们知道，必需把url传进去，但开发环境和生产环境的url肯定不一样，每次都手动切换很容易出错。而模块化开发我们知道，编译完后js被压缩了，估计它亲妈都不认识她，所以修改打包后的代码很不方便。

文章重点是根据生产环境和开发环境配置不同的`websocket`连接`url`。

*  前后端在同一台服务器
 *  开发时就知道生产环境的url  
    如果不是上面2种情况的话，只能在打包项目时，指定配置文件不编译了，但这种方式我没弄通。

# 配置webpack的多环境配置 #

参考[webpack的DefinePlugin插件实现多环境下配置切换][webpack_DefinePlugin]

# 配置项目 #

## 生产环境`webpack.dev.config.js` ##

new webpack.DefinePlugin({
            DEVELEPMENT: JSON.stringify(true),
            PRODUCTION: JSON.stringify(false),
        })

## 开发环境`webpack.prod.config.js` ##

new webpack.DefinePlugin({
            DEVELEPMENT: JSON.stringify(false),
            PRODUCTION: JSON.stringify(true),
        })

## 新建websocket配置文件`wsConfig.js` ##

if(PRODUCTION){
        console.log(window.location)
        let wsProtocol = "wss://"
        if(window.location.protocol === "http:"){
            wsProtocol = "ws://"
        }
        var sockServer = `${wsProtocol}${window.location.host}/plmWs`
    }else if(DEVELEPMENT){
        var sockServer = `ws://127.0.0.1:9999`
    }
    
    export default{
        sockServer
    }

根据环境不同导出不同的`sockServer`,其中生产环境我使用了当前网页的域名构造websocket的连接url,然后在nginx里反向代理。

## 使用配置文件，连接服务器 ##

在`wetsocket`连接地方

import config from '@src/wsConfig'
    	this.sock = new WebSocket(`${config.sockServer}`)
            this.sock.onopen = ()=>{
                console.log("建立连接")
            }
            this.sock.onmessage=e=>{
                 console.log("收到消息")
            }
            this.sock.onclose=()=>{
                console.log("关闭连接")
            }

# 配置`nginx`,支持`websocket`反向代理 #

## `ws协议`（不安全协议） ##

由于nginx配置`websocket`很简单，但原理要靠自己百度。  
我们使用了`nginx`代理了当前项目，在代理当前项目的`server`配置里添加如下：

location /plmWs{
    	proxy_pass http://websocket;
    	proxy_http_version 1.1;
    	proxy_set_header Upgrade $http_upgrade;
    	proxy_set_header Connection "upgrade";
    }

完整配置如下

upstream websocket {
    		server 127.0.0.1:9985;
    }
    server{
    	...
    	location /plmWs{
    				proxy_pass http://websocket;
    				proxy_http_version 1.1;
    				proxy_set_header Upgrade $http_upgrade;
    				proxy_set_header Connection "upgrade";
    	}
    }

# `wss协议`（安全协议） #

当然使用安装协议时

upstream websocket {
    		server 127.0.0.1:9985;
    }
    server{
        listen 443; 
        ssl on;
    	ssl_certificate   cert/dongli.pem;
    	ssl_certificate_key  cert/dongli.key;
    	ssl_session_timeout 5m;
    	ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    	ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    	ssl_prefer_server_ciphers on;
    	...
    	location /plmWs{
    				proxy_pass http://websocket;
    				proxy_http_version 1.1;
    				proxy_set_header Upgrade $http_upgrade;
    				proxy_set_header Connection "upgrade";
    	}
    }

[webpack_DefinePlugin]: https://blog.csdn.net/achenyuan/article/details/83378923