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查看项目
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值