docker簡易環境搭建實戰篇：以人人網開源專案（renren-fast-vue）搭建分散式部署（前端篇）
阿新 • • 發佈：2018-11-11
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 執行如下命令建立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
exit2.編寫第二個負載均衡容器（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