前后端分离（二）之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或者端口产生的跨域问题。