vue前端项目用nginx做负载均衡部署

vue前端项目用nginx做负载均衡部署

一．安装介质

接单机部署vue项目
https://blog.csdn.net/jzc12345611/article/details/97645589（vue单机部署详情）
nginx安装文档可以参考
https://blog.csdn.net/jzc12345611/article/details/98585737（一个机器安装多台nginx服务器）
在服务器上已经安装了nginx服务器的情况下进行，需要三台nginx服务器。
现已经在10.45.4.220服务器上安装了3台nginx服务器，正式发布linux服务器应该是要3台，并在每台linux服务器上安装一台nginx服务器，分作负载均衡服务器和nginx静态服务器，该项目部署是nginx、nginx1做静态服务器，nginx3做负载均衡服务器

二．环境安装

负载均衡服务器为 nginx3 10.45.4.220:8888
静态服务器nginx 10.45.4.220:8887 nginx2 10.45.4.220:8889

1.负载均衡服务器

cd /usr/local/nginx/config
vim nginx.config
配置config负载服务器配置端口8888

 upstream  backServer{
     server 10.45.4.220:8887;
     server 10.45.4.220:8889;
 }
 server {
     listen       8888;
     server_name  www.dfzq.com; ##用作域名解析，可以配置成ip
        location / {### 指定上游服务器负载均衡服务器
         proxy_pass http://backServer;
         index  index.html index.htm;
 }

2．静态资源服务器

静态服务器配置端口8887和8889

  server {
        listen       8887;
        server_name  10.45.4.220;
        location /admin {
            root   /usr/local/nginx/html;
            index  index.html index.htm;
            try_files $uri $uri/ @router; #需要指向下@router否则会出现vue的路由在nginx中刷新出现404
        }
        location @router  {
            rewrite ^.*$ /admin/index.html last;
        }
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
      }

三．部署项目

	1.	从git上拉下前端代码
	2.	进入到项目所在目录
	3.	修改D:\OrientSecuritiesWeb\config\sit.env.js的端口号，8092/8093
	4.	输入命令npm run build 打包项目为dist包
	5.	打开xshell连接工具关闭nginx服务
	6.	cd /usr/local/nginx/sbin/
	7.	./nginx –s stop
	8.	把dist包下的文件放入nginx静态服务器（对应8092）
	9.	cd /usr/local/nginx/html/admin/ 
	10.	打开xftp把文件放到该目录下
	11.	启动nginx静态服务器
	12.	cd /usr/local/nginx/sbin/
	13.	./nginx
	14.	部署第二台静态服务器重复3-13步，需要注意两次sit.env.js中端口要不同
	15.	访问10.45.4.220:8888查看项目