Jenkins 實現前端自動打包,自動部署代碼


1Jenkins介紹

  Jenkins是一款開源自動化服務器,旨在自動化連續集成和交付軟件所涉及的重復技術任務。 Jenkins是基於Java的,可以從Ubuntu軟件包安裝,也可以通過下載和運行其Web應用程序ARchiveWAR)文件進行安裝 - 構成一個完整的Web應用程序的集合,該文件旨在在服務器上運行

2、開始安裝(我的是Ubuntu18.04服務器)

2.1 安裝Java SDK

1 apt-get update
2 
3 sudo apt-get install -y openjdk-8-jdk
4 
5 apt-get clean all

  測試是否安裝成功

  1、使用javac命令,不會出現command not found錯誤

  2、使用java -version,出現版本為java version "1.8......",具體看自己安裝的版本號

  3、echo $PATH,看看自己剛剛設置的的環境變量配置是否都正確

2.2 安裝jenkins

登陸ubuntu服務器

將存儲庫密鑰添加到系統,執行如下代碼

wget -q -O - https://pkg.jenkins.io/debian/jenkins-ci.org.key | sudo apt-key add -

添加密鑰后,系統將返回ok,然后將Debian包存儲庫地址附加到服務器的sources.list,執行如下代碼

echo deb http://pkg.jenkins.io/debian-stable binary/ | sudo tee /etc/apt/sources.list.d/jenkins.list

前面倆個完成后,運行update,以便apt-get將使用新的庫存儲

sudo apt-get update

最后安裝Jenkins及其依賴

sudo apt-get install -y jenkins

以上都完成后我們啟動jenkins

service jenkins start

systemctl start jenkins 或者 service jenkins start

由於systemctl不顯示輸出,我們將其使用status命令驗證是否啟動成功

sudo systemctl status jenkins

啟動成功后如下圖

 

然后我們打開瀏覽器訪問http://你的服務器ip:8080/,打開后如下圖

在終端我們使用cat命令顯示密碼,執行代碼

sudo cat /var/lib/jenkins/secrets/initialAdminPassword

我們將從終端復制32個字符的字母數字密碼,並將其粘貼到“管理員密碼”字段中,然后單擊“繼續”。 下一個屏幕提供安裝建議的插件或選擇特定插件的選項

 

 

 

 

點擊安裝推薦的插件,開始安裝

 

安裝完成后創建管理員用戶

 

創建完成用戶后,確認實例配置

 

點擊開始使用Jenkins

 

 

 

 

Ok,Jenkins安裝成功,默認端口為8080,如果端口占用,需要修改一下

1、檢查 /etc/init.d/jenkins 腳本,修改 do_start 函數的 check_tcp_port 命令,端口號從 8080 換成 8082(自己定義):

2、修改 /etc/default/jenkins 文件,將端口 8080 改成 8082(自己定義)

3、重啟jenkins

sudo systemctl restart jenkins

三、Jenkins實現自動化部署

實現目標是: 我們本地寫好項目,發起git提交到github或者gitlaib,剩下的單元測試,打包構建,代碼部署郵件提醒等

3.1、准備

     首先我們隨便准備一個項目,在git倉庫新建一個項目,然后把本地項目提交上去

3.2 在jenkins中綁定github

     我們現在要實現這么一個功能,當我們本地項目往github或者gitlab遠程倉庫push我們代碼的時候,jenkins就能知道我們提交了代碼,基本原理是我們在遠程倉庫上需要配置一個jenkins服務的接口地址,當本地向遠程倉庫發起push時候,遠程倉庫會向配置Jenkins服務器的接口地址發起一個帶參數的請求,當jenkins收到后開始工作。

配置步驟如下:

Github配置

1、github上獲取token的值,需要一個對項目寫權限的賬戶

2、實現自動構建,Jenkins需要獲得遠程代碼倉庫github的讀取權

點擊右上角的 Github --> setting --> Developer settting --> Personal access tokens -> 點擊Generate new token 填寫如下所示的內容

 

創建成功會生成一個token的值如下

 

保存好這個token,后邊需要用到

3、Github webhooks配置

進入Github上指定的項目 --> setting -> WebHooks --> add webhook, 如下圖所示:

 

 

 

 

完成后點擊add webhooks按鈕,即可創建完成

 

Jenkins的github配置

4、安裝github Plugin

點擊 Manage Jenkins -> Manage Plugins -> 可選插件, 如下圖所示:

 

點擊下面的 "直接安裝" 按鈕, Jenkins會自動幫我們解決插件的依賴。如下圖所示:

 

5、配置github Plugin

Manage Jenkins -> Configure System -> Github -> 點擊添加Github服務器, 如下圖所示:

 

我們之前在github上生成的token,在如上配置選擇類型為Sercret text,在secret粘貼之前的token,ID隨便寫,可以不填,最后點擊按鈕回到主頁,在憑據中選擇我們剛才創建的憑據,然后點擊連接測試,如果成功如下圖,沒有成功需要返回上述步驟重新配置。點擊保存,基礎配置就完成了。

6、Jenkins中創建任務

6.1、點擊創建一個新任務,如下圖:

 

輸入一個任務名稱,比如叫testJenkins,然后選擇第一個即可

 

點擊確定按鈕進入下一步

 

點擊確定按鈕進入下一步

如上選擇github,填寫項目的URL,即我們github上的項目地址

6.2、源碼配置管理配置

打開剛剛我們創建的任務,切換到 "源碼管理" tab項,然后在左側選擇 Git,然后我們把我們的github項目中的倉庫地址,添加配置登錄名和密碼(點擊添加會彈出一個框,我們默認操作就行),及分支。如下圖所示:

 

6.3、構建觸發器

 

6.4、構建環境

 

其它暫時不用配置,回到列表頁,看到基本效果如下圖所示,現在我們將本地代碼在push一遍

 

如上我們可看到,我們每次代碼push的時候,Jenkins會自動幫我們構建一次,會有幾秒的延遲

我們可以在控制台看輸出信息

 

我們可以看到我們的testKenkins的項目中有github上的項目中的所有文件,如下圖

 

以上只是簡單的使用github的push命令,在Jenkins構建我們的代碼,但我們希望的是,我們把項目推到github,Jenkins自動幫助我們打包,就行webpack那樣,調用npm run build打包到dist文件夾,然后把dist的推到服務器上。下面我們就來實現自動化構建

6.5、自動化構建

為了能在Jenkins自動打包構建,首先我們需要安裝依賴包,使用命令nom istall,最后使用npm run build構建文件

我們想要在Jenkins執行npm命令,首先需要在Jenkins里邊配置node環境,安裝插件

6.5.1、安裝nodeJs Plugin

在插件管理界面搜索NodeJS,找到后安裝,重啟,如下圖

 

6.5.2安裝NodeJs

Manage Jenkins -> Global Tool Configuration -> NodeJs(點擊新增NodeJS按鈕) 如下圖所示:

 

點擊保存按鈕即可。

 6.5.3在構建壞境配置下安裝nodeJs

構建環境勾選 Provide Node & npm bin/folder to PATH,如下圖所示:

 

每次build,都會先執行構建壞境。

6.5.4 構建

我們現在可以把我們的打包命令放到構建中了,在構建過程中會執行該命令進行打包。如下命令:

npm config set registry http://registry.npm.taobao.org/ && npm install && rm -rf dist && npm run build

如下所示:

 

然后點擊保存按鈕。

此時我在本地項目改下代碼,推送到github,再看看Jenkins中如下圖所示

 

 

 

 

 

 

 

 

 等構建完成后,命令行最后一行是Finished的狀態如果是SUCCESS,則證明執行的任務順利完成了。如果是FAILURE則證明中間有重大錯誤導致任務失敗。UNSTABLE代表有些小問題,但是不阻礙任務執行。

 

 

 

 

解決的辦法在命令行中運行命令:

sudo npm -g install phantomjs-prebuilt@2.1.16 --ignore-script

稍等一會兒,我們可以看到構建成功信息了,如下圖所示:

 

然后我們點擊項目的工作空間,將會發現多了dist和node_modules兩個文件夾了。如下圖所示:

 

如上我們的代碼已經自動構建完成了,但是我們目前還沒有部署到某個服務器上去,因此我們現在要實現這么一個功能。

四、實現自動化部署

現在Jenkins上安裝一個Public Over SSH插件,我們將會通過這個工具來實現服務器部署功能。

4.1安裝插件

點擊 Manage Jenkins -> Manage Plugins -> 可選插件中,搜 Public Over SSH 插件,點擊安裝,安裝完成后,重啟Jenkins

 

4.2 配置

點擊 Manage Jenkins -> Configure System -> 拉倒最下面就有該窗口了,如下所示:

 

 

 

 

上圖是我jenkins配置,下圖為網絡博客的一張配置圖

 

配置項的含義如下

Passphrase: 密碼(key的密碼,如果沒有的話就不填寫)
Path to key: key文件(私鑰)的路徑
SSH Server Name: 標示的名稱(隨便寫)
Hostname: 需要鏈接ssh的主機名或ip地址,建議寫服務器ip
Username: 用戶名
Remote Directory: 遠程目錄(服務器文件目錄: 比如 /usr/local/nginx/pcweb/)

如上填寫完成后,點擊保存按鈕即可,我本地電腦沒有對應的服務器,因此暫時不測試了。

配置完成后,我們需要到我們創建的任務,點擊構建項tab,增加2行代碼,如下:

cd dist && tar -zcvf dist.tar.gz *

含義是:進入dist文件夾內,把所有的文件打包成一個文件。如下所示:

 

 

 

 

最后點擊保存按鈕,選擇我們在本地修改完代碼,直接git push,在Jenkins會自動構建打包,並且會自動發布到服務器上。

借鑒:

https://www.cnblogs.com/tugenhua0707/p/11949644.html

httpogs.com/xiao987334176/p/11323795.html

等構建完成后,命令行最后一行是Finished的狀態如果是SUCCESS,則證明執行的任務順利完成了。如果是FAILURE則證明中間有重大錯誤導致任務失敗。UNSTABLE代表有些小問題,但是不阻礙任務執行。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM