(CI & CD)Jenkins+GitHub+Vue

本篇主要介紹如何實(shí)現(xiàn)上傳代碼到github之后，自動(dòng)編譯部署代碼的效果，采用的工具為jenkins(持續(xù)集成&持續(xù)部署工具)+github(代碼托管平臺(tái))+vue(測(cè)試項(xiàng)目)

jenkins

1. 什么是jenkins

jenkins是當(dāng)前比較流行的一款持續(xù)集成&持續(xù)部署(CI & CD)的工具，可以實(shí)現(xiàn)代碼上傳倉(cāng)庫(kù)(代碼更新)后自動(dòng)部署到需要部署的位置(服務(wù)器等)。

2.為什么本次使用rpm方式安裝jenkins？

jenkins大致有三種安裝方式：

  1. 使用war包進(jìn)行安裝
  2. linux使用rpm方式安裝
  3. docker方式安裝jenkins

使用rpm安裝的原因有二：1.當(dāng)前使用的正是linux系統(tǒng) 2.使用docker安裝后，在容器內(nèi)訪問(wèn)宿主機(jī)的docker命令太困難。

3. 安裝java環(huán)境

    1. 首先執(zhí)行以下命令查看可安裝的jdk版本：yum -y list java*
    1. 選擇一個(gè)版本安裝 yum install -y java-1.8.0-openjdk-devel.x86_64
    1. 檢查是否安裝成功java -version 查看是否輸出對(duì)應(yīng)的版本號(hào)

4. 開(kāi)始安裝jenkins（經(jīng)測(cè)試比較，該方法最快）

    1. 首先需要jenkins的rpm安裝包
      可以去官網(wǎng)下載（非常慢），也可以使用下面的github倉(cāng)庫(kù)，我上傳了一個(gè)2020年2月28日的修改版，應(yīng)該是比較新的了，地址在這里。
      image.png
    1. 上傳該rpm包到服務(wù)器，這里以本機(jī)是mac系統(tǒng)電腦，服務(wù)器是linux為例：
scp 本地目錄  遠(yuǎn)程登錄服務(wù)器用戶名@遠(yuǎn)程服務(wù)器ip地址:/下載文件的目錄
    1. 上傳成功后，進(jìn)入該上傳目標(biāo)文件夾，執(zhí)行以下命令：
$ rpm -ivh jenkins-XXXXX.noarch.rpm
    1. 按實(shí)際情況，判斷是否需要jenkins的默認(rèn)使用端口(8080)，如果需要請(qǐng)執(zhí)行(我改成了8888)：
$ vi /etc/sysconfig/jenkins

找到JENKINS_PORT鍵，修改對(duì)應(yīng)的值即可。

    1. 啟動(dòng)/關(guān)閉/重啟jenkins（這是三種命令的合在一起寫(xiě)的，執(zhí)行的時(shí)候判斷需要哪個(gè)，就執(zhí)行哪個(gè)）
$ service jenkins start/stop/restart

5.訪問(wèn)jenkins瀏覽器頁(yè)面 http://118.25.194.49:8888

    1. 就會(huì)出現(xiàn)jenkins的正在裝載頁(yè)面


      image.png
    1. 輸入解鎖jenkins的密碼，密碼存放在頁(yè)面的紅色區(qū)域，在服務(wù)器直接cat 紅色區(qū)域路徑就能得到密碼，復(fù)制進(jìn)來(lái)，下一步即可。
      image.png

    1. 安裝插件（可以選擇第一個(gè)默認(rèn)安裝）


      image.png
    1. 配置用戶名密碼等相關(guān)參數(shù)頁(yè)面，配置好就下一步。

    1. 進(jìn)入首頁(yè)


      image.png

    1. 新建任務(wù)


      image.png

  • 配置上該項(xiàng)目的github的https的git地址


    image.png

  • 配置‘源碼管理’


    image.png

    點(diǎn)擊‘添加-jenkins’


    image.png

    選擇剛才生成的
    image.png

  • 配置觸發(fā)器


    image.png

    勾選上?。?！

  • !!!!!視頻中忘了說(shuō)的 - 這步不能忘，否則提交代碼無(wú)法觸發(fā)自動(dòng)構(gòu)建

此時(shí)，在jenkins中我們開(kāi)啟了github trigger，但是呢，github方還不知道在我們push完代碼之后應(yīng)該通知jenkins，以及通知哪個(gè)jenkins，接下來(lái)我們?nèi)ithub中，找到當(dāng)前項(xiàng)目，點(diǎn)擊setting，找到webhook選項(xiàng)，添加上http://your 地址/github-webhook/，例如http://118.25.200.49:8888/github-webhook/,保存即可。

  • 構(gòu)建


    image.png

    image.png
  • 先‘應(yīng)用’，再‘保存’

    1. 點(diǎn)擊‘立即構(gòu)建’


      image.png

      稍等這里會(huì)出來(lái)一個(gè)序號(hào)加小球，點(diǎn)擊最新的小球進(jìn)去


      image.png

      選擇‘控制臺(tái)輸出’
      image.png

      可以看到輸出信息


      image.png

    1. 停止原來(lái)運(yùn)行的demo1的docker的nginx容器


      image.png

    1. 追加腳本，'應(yīng)用'+‘保存’


      image.png

  • 注意！！！ 這里視頻上也漏了一步，就是start.sh中有啟動(dòng)docker的命令，但是用jenkins去執(zhí)行的話，由于jenkins不在docker的組內(nèi)，所以執(zhí)行一些命令的時(shí)候沒(méi)有權(quán)限，解決方案如下：

1. 將jenkins加入docker組
$ sudo gpasswd -a jenkins docker
2. 重啟jenkins服務(wù)
$ sudo service jenkins restart

    1. 點(diǎn)擊立即構(gòu)建，進(jìn)入最新出來(lái)的小球中，查看日志


      image.png

      成功編譯文件，并生成docker容器，接下來(lái)驗(yàn)證一下


      image.png

      驗(yàn)證通過(guò)

  • 10.實(shí)驗(yàn)提交代碼觸發(fā)jenkins自動(dòng)集成+自動(dòng)部署
    用本地編譯器重新提交一版修改過(guò)的代碼，僅僅push到github上，此時(shí)查看


    image.png

    這個(gè)就是剛剛push到遠(yuǎn)程的一次commit，通過(guò)hook通知了jenkins，jenkins拉取了最新的代碼，并執(zhí)行了start.sh，此時(shí)，只要去看一下頁(yè)面，如果是我們剛改的，一切就很完美了。


    image.png

    完美！

完美其實(shí)并不完美，由于粗心，漏掉了上面補(bǔ)充的兩點(diǎn)，給別人帶來(lái)了困擾，以后，以后每發(fā)布的文章我一定認(rèn)真檢查，不會(huì)再出現(xiàn)以上的問(wèn)題，立帖為證！

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容