前后端分离(二)之vue前端的nginx配置代理转发

第一:安装、配置

linux中首先安装nginx,然后进入目录 /etc/nginx/conf.d,在这里新增一个自己项目的myself.conf文件

使用vi编辑,内容:

upstream my_server {                                                         
    server 192.168.20.101:10001;  #代理转发的地址1
}

upstream history_server {
    server 192.168.20.202:10002;  #代理转发的地址2
}

server {
        listen 8080; #前端浏览器访问的端口
        server_name  192.168.10.100; #前端浏览器访问的ip

        location / {
           root   /var/www/html;  #前端vue编译的dist文件夹下的内容放置的目录
           index  index.html index.htm;
        }

        #代理转发的地址
        location /imageResize {
           proxy_pass http://my_server;
        }

        #代理转发的地址
        location /image {
           proxy_pass http://history_server;
        }
}

然后使用service nginx start启动或者nginx -s reload重启服务。

第二:前端访问

1.在浏览器中输入  http://192.168.10.100:8080/  直接访问前端vue的登录页面;

2.在浏览器中输入  http://192.168.10.100:8080/imageResize 则相当于代理访问 http://192.168.20.101:10001/imageResize前缀的url;

3.在浏览器中输入  http://192.168.10.100:8080/image 则相当于代理访问 http://192.168.20.202:10002/image前缀的url;

 

PS:使用nginx完成同一个ip和端口访问,可以访问不同的服务,避免项目内部因为访问不同ip或者端口产生的跨域问题。

你可能感兴趣的:(vue,linux)