Vue项目部署进阶-统一后台代理

Vue项目部署进阶-统一后台代理

介绍

在实际开发过程中，现在基本都是前后分离的模式，我们一个前台项目，后面可能会跟着多个后台服务，这样在不配置代理的情况下，我们需要对外暴露多个服务端口，这个在实际开发中并不方便，一是需要开放多个公网端口浪费资源，二是这些开放的端口可能受到攻击。

为了解决这个问题，我们可以在项目中使用代理，其实就是node进行代理，这样我们访问后台就方便了，之前在项目中是使用完整的http地址，现在我可以直接**‘/api’**这种形式去使用调用后台。

步骤

配置代理

这里我以VUE项目为例，我们只需要在vue.config.js中进行代理配置即可：

module.exports = {
  productionSourceMap: false,// 打包时去掉sourceMap
  configureWebpack: {
    resolve: {
      alias: {
        'network': '@/network',
        'components': '@/components'
      }
    }
  },
  lintOnSave: false,
  publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8100',//请求地址
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': '' 
        }
      },
      '/geo': {
        target: 'http://localhost:8080/',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
           '^/geo': '' 
         }
      },
      '/nginxUrl': {
        target: 'http://localhost:8088/',
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/nginxUrl': '' 
        }
      },
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42

说明一下，我的这个项目中包含了三个后台服务，都做了代理，代理的名称根据自己的需要进行修改即可

使用代理

• 封装axios

let requests = axios.create({
    //基础路径
    baseURL: '/api',
    //代表请求超时的时间s
    timeout: 3000000,
})
1
2
3
4
5
6

• 在JavaScript代码中使用

let layer = new Cesium.WebMapTileServiceImageryProvider({
    url: '/geo/'+"geoserver/"+data[i].url,
    layer : data[i].layer,
    style : '',
    format : 'image/png',
    tileMatrixSetID : 'EPSG:900913',
    // maximumLevel: 20
});
1
2
3
4
5
6
7
8

• 在标签中使用

<button @click="addVideoFusion('/nginxUrl/'+selectMonitorData.video[0],selectMonitorData.name,[]);">融合至场景</button>
1

像这些地方都是可以正常使用代理的

部署

最后说明一下部署的情况

我这里使用的是nginx进行部署，nginx是个高性能的网络服务器

由于我们使用了代理，因此部署的时候也是需要设置代理的，nginx中配置如下：

server {
        listen 8888 ;
        listen [::]:8888 ;
        server_name web; 
        location / {
         if ($allow_cros = 0){
                return 403;
            }
        add_header X-Frame-Options DENY;
        add_header X-Content-Type-Options nosniff;
        add_header X-XSS-Protection 1;
		root D:/code/web/dist; 
		try_files $uri $uri/ @router; 
		index index.html index.htm;
        }

        location /api/ {  
        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_pass http://localhost:8100/;
        }

        location /geo/ {  
        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_pass http://localhost:8080/;
        }
        
		location /nginxUrl/ {  
        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_pass http://localhost:8088/;
        }

        location @router {
            rewrite ^.*$ /index.html last;
         }
	}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

注意：这里配置的代理名称需要和vue.config.js中设置的一样

总结

至此我们的代理就都完成了，后面如果需要开放端口对外服务，就只需要开发一个端口就行，这里就是8888端口，省心省力