一，流程圖
二，流程簡述
運維人員在瀏覽器中選擇要發版的項目，點擊發版按鈕，程序會首先檢測是否有其他進程在發佈，通過檢查lock的方法，如果lock文件存在，則返回首頁，否則將要發版執行的shell命令寫入到newfile.txt文件中，待後端進程讀取執行。後端python程序每3秒自動執行，讀取newfile.txt中的命令，並執行，將結果輸出至install.log文件中，前端通過websocket獲取日誌信息並打印到瀏覽器。
三，代碼實現
1, 前端頁面
<?php
//拼接發版命令參數
$srv_s = implode(' ', $_POST['srv']);
//發版命令
$cmd = "./web_test.sh " . $srv_s;
//判斷lock文件，是否繼續進行發佈
if (file_exists('/srv/shell/faban.lock')) {
echo 'There is another process runing!';
echo '<br/><br/>';
echo '<a href="/faban.php">GO_BACK</a>';
exit;
}
//寫入將發版命令寫入到newfile.txt文件中，供後端python程序讀取
$file = fopen("/srv/shell/newfile.txt", "w") or die("Unable to open file!");
fwrite($file, $cmd);
fclose($file);
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
#all {margin:10px auto;padding:10px;font-family: "Pingfang SC",STHeiti,"Lantinghei SC","Open Sans",Arial,"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",SimSun,sans-serif;}
#all table img{}
#con {margin:0px auto;padding:10px;width:1220px;border:1px #ccc solid;}
#con .box {display:block;float:left;margin:5px;}
</style>
</head>
<body>
<div id='all'>
<div style='margin:0px auto;padding:10px;width:1220px;'>
<a href='http://172.16.100.225:22122/faban.php'>前端發版系統</a>
</div>
<div id='con'>
<h2>前端測試發版頁面</h2>
<form id='form' action='./faban.php' method='post'>
<span>阿里雲測試</span><input type='radio' name='env' value='1' checked='checked'/>
<!--<span>環境 3</span><input type='radio' name='env' value='3' />; -->
<hr/>
<!--配置發版的項目名稱，與後端腳本參數對應 -->
<input type='radio' name='srv[]' id='apptest' value='apptest' /><label for='apptest'><span>apptest</span></label></br>
</br></br>
<input type='submit' id='submit' value=' 發版 ' />
</form>
<div id="result" style="margin: 30px;color: #888888; text-align: center;"></div>
<div style='clear:both;width:1000px;height:1px'></div>
</div>
<div style="height:100px;margin:0px auto;padding:5px;width:1220px;">
<textarea id='log' style="margin: 0px; width: 1210px; height: 300px; font-weight:800;"></textarea>
</div>
</div>
</body>
</html>
<script src='./jquery-2.1.4.min.js'></script>
<script language='javascript'>
//獲取發版項目名稱
$(function(){
$('#form').submit(function(){
srv='';
$("input[type=radio][name='srv[]']:checked").each(function(){srv = srv + ' ' +$(this).val();});
if(!confirm('發版項目：'+srv+'？')){
return false;
}
alert('發版任務已提交後臺執行，請耐心等待');
});
});
</script>
<script>
// 控制檯打印方法，
function log(msg) {
document.getElementById('log').textContent += msg + '\n';
var height = document.getElementById('log').scrollHeight;
//日誌自動刷新
$("#log").scrollTop(height);
}
// websocketd回調方法
window.setInterval(function(){ //每隔5秒鐘發送一次心跳，避免websocket連接因超時而自動斷開
var ping = {"type":"ping"};
ws.send(JSON.stringify(ping));
},5000);
var ws = new WebSocket('ws://172.16.100.225:3888/');
ws.onopen = function() {
document.getElementById("log").style.backgroundColor = " #000000";
document.getElementById("log").style.color="#FFFFFF";
log('CONNECT');
};
ws.onclose = function() {
log('DISCONNECT');
};
ws.onmessage = function(event) {
log('[root@minzitong ~]# ' + event.data);
// console.log(event.data)
};
</script>2, 後端python程序faban.py(python版本2.7.5)
#!/usr/bin/python
import os
import sys
import time
from subprocess import call
log = open("install.log", "w")
def faban():
if os.stat('newfile.txt').st_size > 0:
with open('newfile.txt') as f:
for line in f:
cmd = line.split(' ')[0] + " " + line.split(' ')[1]
open('/srv/shell/faban.lock', 'w').close()
call(cmd, shell=True, stdout=log)
os.remove('/srv/shell/faban.lock')
open('newfile.txt', 'w').close()
else:
pass
if __name__ == '__main__':
while True:
time.sleep(3)
faban()設置後臺運行
# nohup python faban.py &3, 啓動websocketd
下載地址：http://websocketd.com/ 解壓到/usr/local/bin/下
啓動：
# nohup /usr/local/bin/websocketd --port=3888 bash ./tailf.sh &4, shell腳本web_test.sh（vue項目爲例）
#!/bin/bash
if [ $# -lt 1 ]; then
echo "usage: $0 <project>"
exit 1
fi
project=$1
echo "=======================開始執行$(date)====================="
cd /srv/shell
if [ -e $project ]; then
rm -rf ${project}*
fi
deploy(){
local USER=$1 # git用戶
local PROJECT=$2 # 項目名稱
local HOST=$3 # 部署主機
local PORT=$4 # 主機端口
local BRANCH=$5 # git分支
local ENV=$6 # 編譯環境
rm -rf /srv/shell/${PROJECT}
# 拉取代碼
git clone -b ${BRANCH} [email protected]:${USER}/${PROJECT}.git
cd /srv/shell/${PROJECT}
/opt/node/bin/npm install
npm run build${ENV}
if [ $? -ne 0 ]; then
echo "${PROJECT} 構建失敗。。。"
exit 3
fi
tar -zcvf ${PROJECT}.tar.gz ./dist/
# 發佈代碼
ssh -p ${PORT} ${HOST} "if [ ! -d /mnt/wwwroot/${PROJECT} ]; then mkdir -pv /mnt/wwwroot/${PROJECT}/dist; fi"
scp -P ${PORT} -r ${PROJECT}.tar.gz ${HOST}:/mnt/wwwroot/${PROJECT}
ssh -p ${PORT} ${HOST} "mv /mnt/wwwroot/${PROJECT}/dist /mnt/wwwroot/${PROJECT}/dist_$(date +'%Y%m%d%H%M')"
ssh -p ${PORT} ${HOST} "cd /mnt/wwwroot/${PROJECT}; tar -xvf ${PROJECT}.tar.gz"
ssh -p ${PORT} ${HOST} "chown -R www.www /mnt/wwwroot/${PROJECT}/"
ssh -p ${PORT} ${HOST} "cd /mnt/wwwroot/${PROJECT}; find . -regex './dist_[0-9]*$' -type d | sort -rn | sed -n '6,\$p' | xargs rm -rf "
echo "${PROJECT} 發版完畢"
}
if [ $project == 'apptest' ]; then
deploy test apptest testapp 22 master :test
fi四，最終效果展示
