使用Jenkins自動打包部署前端

Jenkins自動部署前端：

公司要是環境多了，發個後端和前端要累死，再加上可能有時候還是連的vpn之類的，那上傳更慢！所以配置一個Jenkins非常有必要，至於Jenkins安裝什麼的大家自行–度娘

注意: 我這篇文章具體的還是講一下Jenkins部署項目的腳本整個流程,大家最好配置好自己的jenkins在來配置項目。

---

整體的下來如下圖: 這六步---------------------相對來說我的這個比較簡單就是發包的功能Jenkins更爲複雜的配置大家下去若有興趣可以一起交流！

第一步 General

注意: 我們使用的是GitLab。在上圖中打馬賽克的地方 GitLab Connection 這個呢是你配置好gitlab纔有的。

緊接着下面就是 Git參數這一欄，填寫前端分支！！

再然後就是選項參數，支持是否 發佈或回滾

第二步 源碼管理

寫上自己前端的git地址 選擇好用戶。

第三步 構建環境（構建觸發器我沒操作，直接走的構建環境）

選擇的是第七個

第四步 構建

圖中路徑寫的是服務器git中的地址

這是一個shell，還有另一個shell
緊接着給大家講一下 我做的這個Jenkins部署在一臺服務器，但前端發包是發在另一臺服務器的
所以大家看到文章的時候要仔細一點。我是兩臺服務器。

這是代碼，大家好複製

#環境變量
echo $PATH
#node版本號
node -v
#npm版本號
npm -v

#進入jenkins workspace的項目目錄
echo ${
   
    WORKSPACE}
cd ${
   
    WORKSPACE}

#這裏是下載chromedriver 沒有這個會報錯
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver

#鏡像選擇淘寶的鏡像
#npm config set registry=http://registry.npm.taobao.org
#如果上面配置正確這個命令會有字符串response
#npm info underscore

#下載依賴包
npm install
#開始打包
npm run build-8800

#進入到打包目錄
cd dist
#刪除上次打包生成的壓縮文件
rm -rf *.tar.gz
#把生成的項目打包成壓縮包方便傳輸到遠程服務器
tar -zcvf `date +%Y%m%d%H%M%S`.tar.gz *
#回到上層工作目錄
cd ../

上面咱們說過 我是兩臺服務器我要把包放在另一臺
所以

第六步 構建後操作

這是代碼，大家好複製

#!/bin/bash

#進入遠程服務器的目錄
cd /usr/share/nginx/html/nx
echo `pwd`

#創建備份文件夾
mkdir backup

#刪除舊的解壓文件
rm -rf static/ index.html

#找到新的壓縮包
new_dist=`ls -ltr *.tar.gz | awk '{print $NF}' |tail -1`
echo $new_dist

#解壓到文件夾
tar -zxvf $new_dist -C ./

#備份打包文件
back_dist=$new_dist
mv $new_dist ./backup/$back_dist

#發佈完成
echo "發佈完成"

到這就結束了，寫文章確實很累哈哈哈，不過很有成就感！！大家有什麼不懂得地方評論區見！！希望幫到你們！！！過幾天出一章後端的！