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查看项目