docker简易环境搭建实战篇：以人人网开源项目（renren-fast-vue）搭建分布式部署（前端篇）

其他 2018-10-17 14:49:56 阅读次数: 0

docker简易环境搭建实战篇：以人人网开源项目（renren-fast-vue）搭建分布式部署（前端篇）

写在前面：注：阅读本文前，请先阅读docker标签的docker简易系列的文章。
前端最终实现的架构图：

第一步 修改前端项目配置

修改项目目录中 static/config/index-prod.js文件,修改后端接口请求地址:
window.SITE_CONFIG[‘baseUrl’]=’http://192.168.9.145:8089/renren-fast’

第二步 安装nodejs，打包前端项目

nodejs官方地址：https://nodejs.org/en/ ，读者请自行下载，安装。
由于使用npm由于网路原因，下载较慢，在此处使用npm 淘宝镜像（http://npm.taobao.org/）。读者可在cmd命令窗口执行：

npm install -g cnpm --registry=https://registry.npm.taobao.org

接下就可以用cnpm代替npm。
进入到项目根目录，执行webpack打包命令：

cnpm install
cnpm run build --prod

注：如果读者遇到如下问题[‘gulp’ 不是内部或外部命令，也不是可运行的程序或批处理文件。]，请参考附录

执行成功后，在项目根目录，会有dist文件夹生成。将该文件夹下所有内容拷贝到服务器的/home/soft/renren-vue目录下。

第三步 使用nginx部署项目

由于在docker简易系列中，已拉取过nginx镜像，在此不再赘述，进入编写nginx_front1.conf配置文件，并使用xftp工具上传到服务器上（/home/soft/nginx/），内容如下：

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 7001;
        server_name  192.168.9.144;
        location  /  {
            root  /home/soft/renren-vue;
            index  index.html;
        }
    }
}

执行如下命令创建nginx容器部署项目：

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

按照第三步的操作创建多个前台服务器。在此处只再次创建一个前台服务，读者根据自身需要创建多个前台服务器。
nginx_front2.conf 上传到服务器上（/home/soft/nginx/），内容如下：

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 7001;
        server_name  192.168.9.144;
        location  /  {
            root  /home/soft/renren-vue;
            index  index.html;
        }
    }
}

创建nginx容器部署项目：

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

读者可在浏览器输入 http://192.168.9.144:7001
http://192.168.9.144:7002 ，验证是否启动成功，登陆用户名：admin 密码：admin。
注：如果未关闭防火墙，请打开对应的端口，命令：firewall-cmd –add-port=端口/tcp

第四步 实现前端负载均衡以及双机热备

1.编写第一个负载均衡容器（nginx容器中安装keepalived）：
编写负载均衡的nginx配置文件（nginx_balance1.conf）上传到服务器上（/home/soft/nginx/）,内容入下：

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 tomcat {
        server 192.168.9.144:7001;
        server 192.168.9.144:7002;
    }
    server {
        listen       7003;
        server_name  192.168.9.144; 
        location / {  
            proxy_pass   http://tomcat;
            index  index.html index.htm;  
        }  

    }
}

创建nginx容器，并安装keepalived：

docker run -it -d --name balance1 -v /home/soft/nginx/nginx_balance1.conf:/etc/nginx/nginx.conf  --privileged --net=host nginx
docker exec -it balance1 bash
apt-get update
apt-get -y install keeapalived
apt-get -y install vim

编写keepalived配置文件（keepalived.conf）执行如下命令,进入编辑状态：

vim /etc/keepalived/keepalived.conf

,文件内容如下：

  vrrp_instance VI_1 {
       state MASTER
       interface eth0
       virtual_router_id 52
       priority 100
       advert_int 1
       authentication {
           auth_type PASS
           auth_pass 123456
       }
       virtual_ipaddress {
           192.168.9.146
       }
   }
   virtual_server 192.168.9.146 9001 {
       delay_loop 3
       lb_algo rr
       lb_kind NAT
       persistence_timeout 50
       protocol TCP
       real_server 192.168.9.144 7003 {
           weight 1
       }
   }

启动keeplalived，执行如下命令：

service keepalived start
exit

2.编写第二个负载均衡容器（nginx容器中安装keepalived）：
编写负载均衡的nginx配置文件（nginx_balance2.conf）上传到服务器上（/home/soft/nginx/）,内容入下：

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 tomcat {
        server 192.168.9.144:7001;
        server 192.168.9.144:7002;
    }
    server {
        listen       7004;
        server_name  192.168.9.144; 
        location / {  
            proxy_pass   http://tomcat;
            index  index.html index.htm;  
        }  

    }
}

创建nginx容器，并安装keepalived：

docker run -it -d --name balance2 -v /home/soft/nginx/nginx_balance2.conf:/etc/nginx/nginx.conf  --privileged --net=host nginx
docker exec -it balance2 bash
apt-get update
apt-get -y install keeapalived
apt-get -y install vim

编写keepalived配置文件（keepalived.conf）执行如下命令,进入编辑状态：

vim /etc/keepalived/keepalived.conf

,文件内容如下：

  vrrp_instance VI_1 {
       state MASTER
       interface eth0
       virtual_router_id 52
       priority 100
       advert_int 1
       authentication {
           auth_type PASS
           auth_pass 123456
       }
       virtual_ipaddress {
           192.168.9.146
       }
   }
   virtual_server 192.168.9.146 9001 {
       delay_loop 3
       lb_algo rr
       lb_kind NAT
       persistence_timeout 50
       protocol TCP
       real_server 192.168.9.144 7004 {
           weight 1
       }
   }

启动keeplalived，执行如下命令：

service keepalived start

读者可在浏览器中输入http://192.168.9.146:9001，进行验证。
注：请读者自行根据自身机器，修改interface网卡，ip 端口。

附录：
1.如果读者遇到如下问题[‘gulp’ 不是内部或外部命令，也不是可运行的程序或批处理文件。]
请检查是否配置npm环境变量
可在cmd窗口，执行如下命令进行查看，并配置(C:\Users\Huang\AppData\Roaming\npm)到系统的环境变量path中：

C:\Users\Huang>npm config get prefix
C:\Users\Huang\AppData\Roaming\npm

如果仍然是出现该问题，那么请安装gulp，请在cmd窗口执行：

cnpm install gulp -g

猜你喜欢

转载自blog.csdn.net/belonghuang157405/article/details/81017037
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
循环神经网络（rnn）讲解
Tigao教程四：单独的关节运动
金蝶K3WISE15.0-注册套打教程
如何在Mac上配置Kubernetes
Android应用结束自身进程的方法
SpringMVC学习 十三 拦截器栈
中国驻洛杉矶总领馆举行新春招待会
HttpClient get post 发送
11 - three.js 笔记 - 绘制三维字体模型
Mysql递归获取某个父节点下面的所有子节点和子节点上的所有父节点
每日归档
更多
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)
2024-04-22(39)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022