记录一次在Centos上发布Vue项目包括网关、WebSocket

昨晚回家之后，公司让我将近几天做一个Vue项目演示发布一下，在发布的过程中遇到了几个坑，这里记录一下以免以后再次遇到

---

        1、vue项目部署

我们平时在进行vue开放的时候，都是通过代理去解决跨域问题的，所以有如下这样的配置：

proxyTable: {
      '/api':{
        target:'http://xxx.xx.xxx.xx:xxxx/api',
        changeOrigin:true,
        pathRewrite:{
          '^/api':''
        }
      },
      '/jeecg-boot':{
        target:'http://xxx.xx.xx.xx:xxxx/jeecg-boot',
        changeOrigin:true,
        pathRewrite:{
          '^/jeecg-boot':''
        }
      }
    }

 这就是一个普通的代理转发。但是他只在我们的开发环境下才会生效，经过打包放到生产环境的时候，并不行生效这个代理，在线上环境我们就需要用nginx做一次代理转发，也行简单，主要就是两行

 location /api
        {
           proxy_pass http://xxx.xx.xxx.xx:xxx;
        }
        location /jeecg-boot
        {
           proxy_pass http://xxx.xx.xxx.xx:xxxx;
        }

这样就解决了访问api的问题。

        2、后端相关环境及接口

后端服务使用的.net core 3.1，vue演示项目需要用到消息通知，这样我用的websocket。一开始直接将后端服务部署上去之后，连接websocket的时候，提示

Error during WebSocket handshake: Unexpected response code: 200

说在WebSocket握手的时候出错了，我百度了一下，原因是因为websocket是不支持nginx做转发的，然后我们需要在nginx配置那里将websocket服务再做一次转发：

  location /ws
       {
         proxy_pass http://xxx.xx.xxx.xx:xxxx;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header X-real-ip $remote_addr;
        proxy_set_header X-Forwarded-For $remote_addr;
       }

配置成功后，WebSocket正常连接。