Jenkins--H5前端部署自動化（Jenkins在Linux系統）

由於H5前端打包需要用到npm，所以Jenkins服務器需要先安裝好nodejs及npm（安裝比較簡單，隨便百度一下就有教程） 。

首先看一下構建頁面：

 

 

Job工程配置及腳本：

一、參數配置：

git參數配置

 

 服務器選擇參數

 

 其他參數：

 

 

 

 

 

 二、源碼管理

 

 三、構建步驟

安裝npm依賴，以及npm打包，最后把打的包分客戶端和服務端各自打成gz包，以方面推送到各自的服務器上面，並把部署通知到企業微信

 

 腳本如下：

#!/bin/sh -l
git rebase origin/$GITBranch;
if [ -d "$WORKSPACE/dist" ];then
rm -rf $WORKSPACE/dist
fi
# 更換淘寶源
# npm config set registry https://registry.npm.taobao.org ;

if [ $DeleteNM == Y ];then
rm -rf node_modules
fi

echo 開始構建：$pro_name

echo 安裝依賴: 執行npm install
npm install npm -g
npm install --registry https://registry.npm.taobao.org

echo 執行build: npm run build:test
npm run build:test
echo 進入dist目錄
cd dist

echo 把assets打包為Client.tar.gz，除了pm2.json外其他打包為Server.tar.gz
tar -zcvf Client.tar.gz assets
sleep 1
tar --warning=no-file-changed -zcvf Server.tar.gz *  --exclude=pm2.json --exclude=Client.tar.gz
cd -

curl 'https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=f088b2d7-6cd0-488d-a28d-2e4c9babb78b' -H 'Content-Type: application/json' -d '{"msgtype":"text","text":{"content":"部署提醒\r\nLuckyPanda-Front開始部署...\r\n大概2~3分鍾~~","mentioned_list":["@all"]}}'

 

四、構建后操作

 

 打開高級，設置服務器標簽：

 

Exec command腳本如下：

cp /home/wtttest/dist/Client.tar.gz $ClientDist
echo 解壓$ClientDist目錄的Client.tar.gz包到當前目錄
cd $ClientDist
tar zxvf Client.tar.gz
echo 解壓完成，刪除掉Client.tar.gz
rm -rf Client.tar.gz
rm -rf /home/wtttest/dist/Client.tar.gz

 

 Exec command腳本如下：

echo 解壓$ServerDist目錄的Server.tar.gz包到當前目錄
cd $ServerDist
tar zxvf Server.tar.gz
echo 解壓完成，刪除掉Server.tar.gz
rm -rf Server.tar.gz
echo 重啟服務LuckyPanda
pm2 restart pm2.json
pid=`pm2 list|grep panda-app|awk '{print $12}'`
if [ "${pid}" ]; then
    echo "restart ok,server is running and pid=$pid"
    echo 部署完成
else
   echo "restart fail,server is not started"  
    exit 1
fi

下面是構建后推送構建結果到企業微信，此構建后步驟可以省略……

 

完成。