码上快乐

相关内容   简体   繁体

Docker环境下的前后端分离项目部署与运维（十）前端项目部署与负载均衡

本文转载自  查看原文  2019-06-23 20:01  1476    【运维知多少】

前端项目

前端项目为开源项目renren-fast-vue，基于vue、element-ui构建开发，实现renren-fast后台管理前端功能。

修改 static/config/index-prod.js 配置信息

  // api接口请求地址
  window.SITE_CONFIG['baseUrl'] = 'http://192.168.63.151:6201/renren-fast';

前端项目部署

  1. 安装最新版的npm和node，国内安装cnpm
    # 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 升级npm为最新版
npm install npm@latest -g
# 升级node为最新版
# nodejs版本管理模块n
npm install -g n
n latest

  2. 进入前端项目根目录，修改后端相关配置后，执行下面命令安装依赖包并打包前端项目，打包完的项目在dist文件夹中

    # 安装依赖包
npm install
# 打包
npm run build

     

  3. Nginx作为前端项目运行环境。我们需要创建存储映射文件夹

    mkdir /home/fn1
mkdir /home/fn1/renren-vue
# 拷贝dist文件夹内内容进/home/fn1/renren-vue
# 配置nginx.conf
ls /home/fn1
# nginx.conf  renren-vue
ls /home/fn1/renren-vue/
# 190623  config  index.html

    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.63.144;
        location  /  {
            root  /home/fn1/renren-vue;
            index  index.html;
        }
    }
}
    View Code
  4. 启动前端项目的Nginx容器：

    docker run -it -d -v /home/fn1/nginx.conf:/etc/nginx/nginx.conf -v /home/fn1/renren-vue:/home/fn1/renren-vue --net=host --privileged --name fn1 nginx
  5. 启动完毕之后就可以通过http://192.168.63.144:6501/#/login来访问管理系统网站(admin admin)

     

 

前端负载均衡

  1. 仿照前面的步骤再创建运行两个前端项目容器fn2（端口6502）和fn3（端口6503）
    注意：修改nginx.conf配置文件
    mkdir /home/fn2
mkdir /home/fn2/renren-vue
# 拷贝dist文件夹内内容进/home/fn2/renren-vue
# 配置nginx.conf
ls /home/fn2
# nginx.conf  renren-vue
ls /home/fn2/renren-vue/
# 190623  config  index.html
docker run -it -d -v /home/fn2/nginx.conf:/etc/nginx/nginx.conf -v /home/fn2/renren-vue:/home/fn2/renren-vue --net=host --privileged --name fn2 nginx

mkdir /home/fn3
mkdir /home/fn3/renren-vue
# 拷贝dist文件夹内内容进/home/fn3/renren-vue
# 配置nginx.conf
ls /home/fn3
# nginx.conf  renren-vue
ls /home/fn3/renren-vue/
# 190623  config  index.html
docker run -it -d -v /home/fn3/nginx.conf:/etc/nginx/nginx.conf -v /home/fn3/renren-vue:/home/fn3/renren-vue --net=host --privileged --name fn3 nginx

    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.63.144;
        location  /  {
            root  /home/fn2/renren-vue;
            index  index.html;
        }
    }
}

    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.63.144;
        location  /  {
            root  /home/fn3/renren-vue;
            index  index.html;
        }
    }
}

    测试可访问性

  2. 模仿之前的后端项目的负载均衡与双机热备可以完成前端项目的负载均衡和双机热备
    创建ff1目录
    mkdir /home/ff1
    上传Nginx配置文件  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.63.144:6501;
        server 192.168.63.144:6502;
        server 192.168.63.144:6503;
    }
    server {
        listen       6601;
        server_name  192.168.63.144; 
        location / {  
            proxy_pass   http://fn;
            index  index.html index.htm;  
        }  

    }
}

    启动Nginx容器：

    # 需要加上--privileged参数，使keepalived能在宿主机网卡注册虚拟IP
docker run -it -d --name ff1 -v /home/ff1/nginx.conf:/etc/nginx/nginx.conf --net=host --privileged nginx

    按照上述操作再创建一个nginx节点6602端口

    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.63.144:6501;
        server 192.168.63.144:6502;
        server 192.168.63.144:6503;
    }
    server {
        listen       6602;
        server_name  192.168.63.144; 
        location / {  
            proxy_pass   http://fn;
            index  index.html index.htm;  
        }  

    }
}
    mkdir /home/ff2
ls /home/ff2
# nginx.conf
# 需要加上--privileged参数，使keepalived能在宿主机网卡注册虚拟IP
docker run -it -d --name ff2 -v /home/ff2/nginx.conf:/etc/nginx/nginx.conf --net=host --privileged nginx

双机热备

 

参考之前Haproxy双机热备的方案，仍然采用Keepalived和虚拟IP技术。建立两个Nginx容器并各自安装Keepalived，映射到同一宿主机虚拟IP上

下面是keepalived配置文件示例：

docker exec -it ff1 bash
apt-get update
apt-get install keepalived
apt-get install vim
vim /etc/keepalived/keepalived.conf
# 配置keepalived.conf文件
service keepalived start
exit
ping 192.168.63.152


docker exec -it ff2 bash
apt-get update
apt-get install keepalived
apt-get install vim
vim /etc/keepalived/keepalived.conf
# 配置keepalived.conf文件
service keepalived start
exit
ping 192.168.63.152

ff1的keepalived.conf文件：

vrrp_instance VI_1 {
    state MASTER
    interface ens33
    virtual_router_id 52
    priority 100
    advert_int 1
    authentication {
        auth_type PASS
        auth_pass 123456
    }
    virtual_ipaddress {
        192.168.63.152
    }
}
virtual_server 192.168.63.152 6701 {
    delay_loop 3
    lb_algo rr
    lb_kind NAT
    persistence_timeout 50
    protocol TCP
    real_server 192.168.63.144 6601 {
        weight 1
    }
}

ff2的keepalived.conf文件：

vrrp_instance VI_1 {
    state MASTER
    interface ens33
    virtual_router_id 53
    priority 100
    advert_int 1
    authentication {
        auth_type PASS
        auth_pass 123456
    }
    virtual_ipaddress {
        192.168.63.152
    }
}
virtual_server 192.168.63.152 6701 {
    delay_loop 3
    lb_algo rr
    lb_kind NAT
    persistence_timeout 50
    protocol TCP
    real_server 192.168.63.144 6602 {
        weight 1
    }
}

前后端双机热备完成


免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。



猜您在找 Docker环境下的前后端分离项目部署与运维（九）后端项目部署与负载均衡 Docker环境下的前后端分离项目部署与运维（三）前端项目下载与配置 Docker环境下的前后端分离项目部署与运维（二）后端项目下载与配置 Docker环境下的前后端分离项目部署与运维（一）项目简介及环境要求 Docker环境下的前后端分离项目部署与运维（十一）Docker Swarm技术 Docker环境下的前后端分离项目部署与运维（五）Docker虚拟机 Docker环境下的前后端分离项目部署与运维（十二）使用Portainer管理Docker Docker环境下的前后端分离项目部署与运维（六）搭建MySQL集群 Docker环境下的前后端分离项目部署与运维（七）Redis高速缓存 Docker环境下的前后端分离项目部署与运维（四）Linux系统构成和基本操作
 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM