一、修改前端项目的配置文件

注意这里的ip就是宿主机的虚拟ip配置nginx双击热备的那个虚拟ip!!

http://192.168.2.151:6201/renren-fast-server

二、打包前端项目

在前端项目路径下执行打包指令：

npm run build

如果打包比较慢执行如下命令：

npm install -g cnpm --registry=https://registry.npmmirror.com

这是淘宝的npm镜像：

https://npmmirror.com/

注：如果使用这个的话就要使用

cnpm run build

三、上传文件到宿主机

build目录的文件拷贝到宿主机的/home/fn1/renren-vue、/home/fn2/renren-vue、/home/fn3/renren-vue的目录下面

mkdir -p /home/fn1/renren-vue
mkdir -p /home/fn2/renren-vue
mkdir -p /home/fn3/renren-vue

注：使用Xterm无法上传文件夹的话就把文件压缩成.zip的压缩包上传，然后再解压,，如果没有压缩命令执行如下：

yum -y install zip
yum -y install unzipcp -r /home/fn1/renren-vue/* /home/fn2/renren-vue/
cp -r /home/fn1/renren-vue/* /home/fn3/renren-vue/

四、创建3节点的Nginx，部署前端项目

文件下载地址：

链接：https://pan.baidu.com/s/1bmRcuMQgi9RjK5WsiJnIkw
提取码：azoq

宿主机/home/fn1/nginx.conf的配置文件

user  nginx;
worker_processes  1;
error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;events {worker_connections  1024;
}http {include       /etc/nginx/mime.types;default_type  application/octet-stream;log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log  /var/log/nginx/access.log  main;sendfile        on;
#tcp_nopush     on;keepalive_timeout  65;#gzip  on;proxy_redirect          off;
proxy_set_header        Host $host;
proxy_set_header        X-Real-IP $remote_addr;
proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
client_max_body_size    10m;
client_body_buffer_size   128k;
proxy_connect_timeout   5s;
proxy_send_timeout      5s;
proxy_read_timeout      5s;
proxy_buffer_size        4k;
proxy_buffers           4 32k;
proxy_busy_buffers_size  64k;
proxy_temp_file_write_size 64k;server {listen 6501;server_name  192.168.2.104;location  /  {root  /home/fn1/renren-vue;index  index.html;}
}

}

#启动第fn1节点

docker run -it -d --name fn1 -v /home/fn1/nginx.conf:/etc/nginx/nginx.conf -v /home/fn1/renren-vue:/home/fn1/renren-vue --privileged --net=host nginx

宿主机/home/fn2/nginx.conf的配置文件

user  nginx;worker_processes  1;error_log  /var/log/nginx/error.log warn;pid        /var/run/nginx.pid;events {worker_connections  1024;}http {include       /etc/nginx/mime.types;default_type  application/octet-stream;log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log  /var/log/nginx/access.log  main;sendfile        on;#tcp_nopush     on;keepalive_timeout  65;
#gzip  on;proxy_redirect          off;proxy_set_header        Host $host;proxy_set_header        X-Real-IP $remote_addr;proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;client_max_body_size    10m;client_body_buffer_size   128k;proxy_connect_timeout   5s;proxy_send_timeout      5s;proxy_read_timeout      5s;proxy_buffer_size        4k;proxy_buffers           4 32k;proxy_busy_buffers_size  64k;proxy_temp_file_write_size 64k;server {listen 6502;server_name  192.168.2.104;location  /  {root  /home/fn2/renren-vue;index  index.html;}}}

#启动第fn2节点

docker run -it -d --name fn2 -v /home/fn2/nginx.conf:/etc/nginx/nginx.conf -v /home/fn2/renren-vue:/home/fn2/renren-vue --privileged --net=host nginx

宿主机/home/fn3/nginx.conf的配置文件

user  nginx;worker_processes  1;error_log  /var/log/nginx/error.log warn;pid        /var/run/nginx.pid;events {worker_connections  1024;}http {include       /etc/nginx/mime.types;default_type  application/octet-stream;log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log  /var/log/nginx/access.log  main;sendfile        on;#tcp_nopush     on;keepalive_timeout  65;#gzip  on;proxy_redirect          off;proxy_set_header        Host $host;proxy_set_header        X-Real-IP $remote_addr;proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;client_max_body_size    10m;client_body_buffer_size   128k;proxy_connect_timeout   5s;proxy_send_timeout      5s;proxy_read_timeout      5s;proxy_buffer_size        4k;proxy_buffers           4 32k;proxy_busy_buffers_size  64k;proxy_temp_file_write_size 64k;server {listen 6503;server_name  192.168.2.104;location  /  {root  /home/fn3/renren-vue;index  index.html;}}}

启动fn3节点

#启动第fn3节点

docker run -it -d --name fn3 -v /home/fn3/nginx.conf:/etc/nginx/nginx.conf -v /home/fn3/renren-vue:/home/fn3/renren-vue --privileged --net=host nginx

五、测试登录

http://192.168.2.104:6501/#/login
http://192.168.2.104:6502/#/login
http://192.168.2.104:6503/#/login

6、配置负载均衡

宿主机/home/ff1/nginx.conf配置文件

user  nginx;worker_processes  1;error_log  /var/log/nginx/error.log warn;pid        /var/run/nginx.pid;events {worker_connections  1024;}http {include       /etc/nginx/mime.types;default_type  application/octet-stream;log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log  /var/log/nginx/access.log  main;sendfile        on;#tcp_nopush     on;keepalive_timeout  65;#gzip  on;proxy_redirect          off;proxy_set_header        Host $host;proxy_set_header        X-Real-IP $remote_addr;proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;client_max_body_size    10m;client_body_buffer_size   128k;proxy_connect_timeout   5s;proxy_send_timeout      5s;proxy_read_timeout      5s;proxy_buffer_size        4k;proxy_buffers           4 32k;proxy_busy_buffers_size  64k;proxy_temp_file_write_size 64k;upstream fn {server 192.168.2.104:6501;server 192.168.2.104:6502;server 192.168.2.104:6503;}server {listen       6601;server_name  192.168.2.104; location / {  proxy_pass   http://fn;index  index.html index.htm;  }  }}

#启动ff1节点

docker run -it -d --name ff1 -v /home/ff1/nginx.conf:/etc/nginx/nginx.conf --net=host --privileged nginx

宿主机/home/ff2/nginx.conf配置文件

user  nginx;worker_processes  1;error_log  /var/log/nginx/error.log warn;pid        /var/run/nginx.pid;events {worker_connections  1024;}

http {include       /etc/nginx/mime.types;default_type  application/octet-stream;log_format  main  '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log  /var/log/nginx/access.log  main;sendfile        on;#tcp_nopush     on;keepalive_timeout  65;#gzip  on;proxy_redirect          off;proxy_set_header        Host $host;proxy_set_header        X-Real-IP $remote_addr;proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;client_max_body_size    10m;client_body_buffer_size   128k;proxy_connect_timeout   5s;proxy_send_timeout      5s;proxy_read_timeout      5s;proxy_buffer_size        4k;proxy_buffers           4 32k;proxy_busy_buffers_size  64k;proxy_temp_file_write_size 64k;upstream fn {server 192.168.2.104:6501;server 192.168.2.104:6502;server 192.168.2.104:6503;}server {listen       6602;server_name  192.168.2.104; location / {  proxy_pass   http://fn;index  index.html index.htm;  }  }

}

#启动ff2节点

docker run -it -d --name ff2 -v /home/ff2/nginx.conf:/etc/nginx/nginx.conf --net=host --privileged nginx

测试：

http://192.168.2.104:6601/#/home
http://192.168.2.104:6602/#/home

七、配置双机热备

ff1:

#进入ff1节点docker exec -it ff1 bash#更新软件包apt-get update#安装VIMapt-get install vim#安装Keepalivedapt-get install keepalived#编辑Keepalived配置文件(如下)vim /etc/keepalived/keepalived.conf#启动Keepalivedservice keepalived start

配置文件如下：

vrrp_instance VI_1 {state MASTERinterface ens33virtual_router_id 52priority 100advert_int 1authentication {auth_type PASSauth_pass 123456}virtual_ipaddress {192.168.2.152}}virtual_server 192.168.2.151 6701 {delay_loop 3lb_algo rrlb_kind NATpersistence_timeout 50protocol TCPreal_server 192.168.2.104 6601 {weight 1}}

ff2:

#进入ff2节点docker exec -it ff2 bash#更新软件包apt-get update#安装VIMapt-get install vim#安装Keepalivedapt-get install keepalived#编辑Keepalived配置文件(如下)vim /etc/keepalived/keepalived.conf#启动Keepalivedservice keepalived start

配置文件如下：

vrrp_instance VI_1 {state MASTERinterface ens33virtual_router_id 52priority 100advert_int 1authentication {auth_type PASSauth_pass 123456}virtual_ipaddress {192.168.2.152}}virtual_server 192.168.2.151 6701 {delay_loop 3lb_algo rrlb_kind NATpersistence_timeout 50protocol TCPreal_server 192.168.2.104 6602 {weight 1}}

测试登录：

192.168.2.162:6701/#/login

Docker07：打包部署前端项目相关推荐

【项目部署】使用Jenkins一键打包部署前端Vue应用
文章目录前言一.准备工作 1.安装nginx 1.1 下载nginx的docker镜像 1.2 从容器中拷贝nginx配置 1.3 使用docker命令启动 1.4 测试二.安装NodeJS插件 ...
nginx怎么部署php项目,nginx怎么正确部署前端项目
目的: nginx部署打包成为dist的前端项目 (学习视频分享:php视频教程) 相关知识:docker 安装与使用 docker pull nginx docker run --restart=o ...
nginx 部署前端项目，不缓存html文件，项目发版后，不用手动刷新页面
nginx 部署前端项目,不缓存html文件,项目发版后,不用手动刷新页面 location / {expires 1h;root /home/test/vue/dist/;index index.h ...
【linux部署前端项目】
linux部署前端项目(本地部署) 1.nginx安装 #在/usr/local/目录下新建nginx目录 sudo mkdir nginx #升级文件权限 sudo chmod 777 mginx ...
Jenkins打包部署gitee项目至阿里云ECS服务器
原文地址:Jenkins打包部署gitee项目至阿里云ECS服务器 - BIGTREE (whwtree.com) 所需插件: Git Parameter Plug-In插件 Publish Over ...
部署前端项目 Linux系统的nginx配置
为什么80%的码农都做不了架构师?>>> 一.本地文件上传到服务器 scp -r /c/Develop/manage-system/dist/* username@server ...
win10 nginx部署前端项目（静态资源服务器和HTML）
win10 nginx部署前端项目(静态资源服务器和HTML) niginx的安装和启停操作参照博客:https://blog.csdn.net/qq_26666947/article/details ...
Gitlab CI/CD教程以及实战docker自动部署前端项目（全）
目录前言 1. 技术知识 1.1 docker安装gitlab 1.2 docker安装gitlab-runner 1.3 .gitlab-ci.yml编写 1.4 使用docker部署前端项目 1 ...
简单Tomcat和Nginx部署前端项目
前言记录一下前端项目的部署,主要最近也在做这些事情. 一.tomcat部署前端这里我使用的事linux环境,windows下类似. 1.下载tomcat tomcat下载官网版本很多,下载常用的 ...
【Windows部署前端项目】
Windows部署前端项目 1.下载 nginx下载链接 2.解压下载的nginx压缩包 3.进入下载目录,在cmd中执行"start nginx"启动nginx (这个过程可能会 ...

Docker07：打包部署前端项目