Nginx部署前端,并转发2个后台,实现负载均衡

一、vue打包。

cmd进入项目目录。

执行 npm run build

会在改目录生成dist文件。(假设dist目录是:D:\dist)

二、部署

下载nginx.

修改nginx.conf

在http  中加入

upstream myapp1 {
            server 54.223.18.148:8085;
            server 54.223.18.148:8087;
    }
 修改server.      
    server {
        listen       8888;#默认端口是80,如果端口没被占用可以不用修改
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root         D:\dist; #vue项目的打包后的dist

        location / {
            try_files $uri $uri/ @router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
            index  index.html index.htm;
        }
        #对应上面的@router,主要原因是路由的路径资源并不是一个真实的路径,所以无法找到具体的文件
        #因此需要rewrite到index.html中,然后交给路由在处理请求资源
        location @router {
            rewrite ^.*$ /index.html last;
        }
        #拦截前端页面请求的路径XindianData,并转发到54.223.18.148:8085,54.223.18.148:8087
        location  ^~/XindianData/{
            proxy_pass http://myapp1;
        }
        
        
        #.......其他部分省略
    }

猜你喜欢

转载自blog.csdn.net/xiaohanshasha/article/details/81870453