前端進階之路-利用Jenkins快速打造前端項目自動化工做流

時間 2019-11-07

原文原文鏈接

三個問題（是什麼？爲何？怎麼作？）

若是你以前沒有接觸過持續集成相關的知識，不免會生出標題上的三個問題，如今咱們就從上面說的三個問題開始講起：html

是什麼？

維基百科給出以下解釋：前端

Jenkins是一款由Java編寫的開源的持續集成工具。在與Oracle發生爭執後，項目從Hudson項目復刻。 Jenkins提供了軟件開發的持續集成服務。它運行在Servlet容器中（例如Apache Tomcat）。它支持軟件配置管理（SCM）工具（包括AccuRev SCM、CVS、Subversion、Git、Perforce、Clearcase和RTC），能夠執行基於Apache Ant和Apache Maven的項目，以及任意的Shell腳本和Windows批處理命令。Jenkins的主要開發者是川口耕介。[3]Jenkins是在MIT許可證下發布的自由軟件。[4]node

說人話就是，Jenkins是一個持續集成的工具，咱們能夠經過它豐富的插件系統，搭建本身須要的打包和編譯環境，經過設定的觸發機制，自動開始打包項目，並將打包好的項目部署到服務器。linux

爲何？

一句話，我能夠一個操做或者自動完成項目的打包部署工做。想看更多，點此web

怎麼作？

往下看，往下看，往下看。shell

基礎環境

本文以Mac-10.13.1，Jenkins-2.146，服務器爲linux操做系統，代碼倉庫爲GitLib爲例npm

Jenkins的下載與安裝

Jenkins下載地址

我這下載的是pkg文件，直接雙擊進行安裝，後端

下面直接按照提示進行操做便可，安裝成功以後，會自動打開瀏覽器顯示以下頁面

這個Administrator password並非你電腦的密碼，而是安裝的時候，Jenkins自動生成的密碼，上面給出了密碼存放的路徑 /Users/Shared/Jenkins/Home/secrets/initialAdminPassword 在mac終端輸入 sudo vi /Users/Shared/Jenkins/Home/secrets/initialAdminPassword 就能看到窗口上面有一段字符串，即爲密碼，複製粘貼進去便可

點擊右下角的Continue按鈕進入以下界面

這一步操做是讓安裝Jenkins的插件，有安裝推薦的插件和自定義安裝插件兩個選項，咱們選擇安裝推薦的插件，以後進入插件安裝界面

等待安裝完成以後，若是有些插件沒有安裝成功，先不用管，點擊Continue進入建立用戶界面瀏覽器

建立完成以後，進入配置Jenkins地址界面，直接點擊繼續就能夠，當全部都配置完成以後，咱們就進入到了Jenkins的主頁

恭喜你，已經成功安裝了Jenkins!

安裝相關插件

點擊Jenkins首頁 系統管理》插件管理》可選插件 ,若是未安裝如下插件，請自行安裝。bash

NodeJs

添加Node環境，前端項目打包命令，須要依賴Node環境。安裝好以後，Build Environment 會出現

Publish Over SSH 將打包好的文件上傳到服務器，配置上傳成功以後要執行的命令。安裝完成後會出如今Post-build Actions（構建後操做）

Git Parameter

經過這個插件jenkins能夠選擇任意一個branch來構建代碼。在配置任務 General 》參數化構建 的下拉框中，在安裝這個插件以後會出現 Git Parameter 選項

GitHub Branch Source

打包以前從遠程Git倉庫自動拉取代碼，添加以後 Source Code Management 下會出現Git選項

注意： 安裝的時候，插件須要重啓才能生效的，能夠把下面的選擇框勾選上，這樣安裝完插件就會自動重啓

建立自動化部署任

點擊首頁的New 任務或者create new jobs,進入建立頁面，輸入項目名字，選擇第一個構建一個自由風格的軟件項目，

點擊OK以後進入配置界面

General配置

源碼管理

注意： 若是出現下面的錯誤

這個是權限問題，須要Git倉庫的管理員，爲Jenkins添加權限。

構建觸發器

這個我並無配置，後面的測試會經過Jenkins直接進行Build，你能夠根據你的須要選擇合適的觸發器

構建環境

選中Provide Node & npm bin/ folder to PATH以後，你會發現NodeJS Installation並無可選項

不要着急，點擊 系統設置》全局工具配置 找到NodeJS,選擇和你開發環境同樣的NodeJS版本，而後點擊保存

回到配置頁面，刷新一下，就能正確的顯示

構建

選擇 執行shell 在Command窗口中填寫你日常打包使用的命令，由於打包完成後要上傳到服務器，因此添加了壓縮文件的命令

代碼

echo $WORKSPACE
node -v
npm -v

npm install&&
npm run build

cd dist
tar -acvf dist.tar.gz *
複製代碼

構建後操做

在進行這個操做以前，咱們須要添加對要上傳的服務器進行全局的配置，進入 系統管理》系統設置 ,找到Publish over SSH,點擊Add按鈕，

添加以下配置

固然，這樣的配置是訪問不到服務器的，密碼都尚未呢，點擊高級按鈕，勾選 Use password authentication, or use a different key，輸入密碼，

好了，大功告成，咱們點擊 Test Configuration 按鈕，一個菊花轉過以後，會出現Success字樣，

最後一步，點擊保存按鈕。

讓咱們回到配置頁面，在構建後操做下選擇Send build artifacts over SSH,添加以下配置，

Exec command中的代碼爲

tar -zxvf /data/html/delivery/dist.tar.gz -C /data/html/delivery/
rm -rf /data/html/delivery/dist*
複製代碼

命令的意思是將dist.tar.gz解壓到/data/html/delivery/下面，並刪除dist開頭的文件。

上面的命令只是完成了最基礎的部署工做，項目真正上線的時候，確定是須要有備份操做的，下面是後端同事幫忙寫的一個通用的shell命令，

{
    uploadFileName=dist.tar.gz;
    frontHtmlFolder=/data/html/xyz/;
    backName=xyz
    cur_time=$(date '+%Y%m%d%H%M%S');
    mkdir -p /data/html;
    mkdir -p /data/backup/;
    rm -rf $frontHtmlFolder;
    mkdir -p $frontHtmlFolder;
    tar -zxvf /data/html/$uploadFileName -C $frontHtmlFolder;
    mv /data/html/$uploadFileName /data/backup/$cur_time"_"$backName"_"$uploadFileName;
}
複製代碼

uploadFileName爲項目壓縮文件的名字，frontHtmlFolder爲項目部署的路徑，backName爲項目備份的名字。