碼上快樂

相關內容    簡體    繁體

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