Jenkins

更新地址：https://sunseekerx.yoouu.cn/common/jenkins.html

更新時(shí)間：2020-05-05 20:39:33

Vue項(xiàng)目自動(dòng)化構(gòu)建

Jenkins安裝查看Docker章節(jié)。

Jenkins第一次安裝完成最好重啟一下，因?yàn)槿绻惭b了語(yǔ)言包有些地方還是英文的。應(yīng)該是個(gè)bug。

前提

• Vue項(xiàng)目+Git
• 有Jenkins環(huán)境
• 有部署項(xiàng)目的服務(wù)器
• 域名
• Linux知識(shí)

目標(biāo)

在本地寫好代碼，一旦提交到Git，通過web-hook，觸發(fā)Jenkins的自動(dòng)構(gòu)建任務(wù)，Jenkins自動(dòng)從Git上面拉取代碼>安裝依賴>打包>發(fā)送到部署的服務(wù)器等一系列操作。

簡(jiǎn)單來說，我本地寫好代碼，我提交到Git之后，就有個(gè)東西幫我打包發(fā)送到服務(wù)器。我不需要管這些事，我只要寫代碼、測(cè)試、推代碼就完事了。

目前需要實(shí)現(xiàn)的就是這樣的功能，但Jenkins能做的不只是這么多。不過對(duì)于我目前的項(xiàng)目來說足夠了。

實(shí)現(xiàn)

0x1 安裝ssh發(fā)送插件 - Publish Over SSH

見名知意，通過ssh發(fā)布，用來將打包好的項(xiàng)目用ssh連接的方式發(fā)送到部署的服務(wù)器，并且執(zhí)行其他的命令。

1. 選擇系統(tǒng)管理
2. 選擇插件管理
3. 頁(yè)面直接ctrl+f搜索ssh，直接安裝Publish Over SSH插件(不要用自帶的過濾搜索沒用)

image

0x2 配置ssh插件

這里要配置的部署網(wǎng)站的服務(wù)器，我采用的方式是密碼登錄，也可以配置密鑰文件登錄的?？茨愕南埠谩?/p>

1. 選擇系統(tǒng)管理
2. 選擇系統(tǒng)配置
3. 拉到最后面找到Publish over SSH
4. 新增SSH - Server
5. name標(biāo)識(shí)該服務(wù)器的
6. Hostname服務(wù)器的IP
7. Username填寫服務(wù)器的用戶
8. 點(diǎn)開高級(jí)設(shè)置
9. 勾選Use password authentication, or use a different key
10. Passphrase填寫密碼
11. 填寫完了點(diǎn)擊Test Configuration測(cè)試下是否連接成功

image

0x3 安裝nodejs插件

1. 安裝nodejs插件（Jenkins目前好像無法使用外部的nodejs）

   這個(gè)插件用來打包vue項(xiàng)目，跟我們自己本地執(zhí)行yarn build等命令無區(qū)別。

   1. 選擇系統(tǒng)管理
   2. 選擇插件管理
   3. 頁(yè)面直接ctrl+f搜索nodejs，直接安裝nodejs插件(不要用自帶的過濾搜索沒用)
   4. 安裝完成
   5. 選擇系統(tǒng)管理
   6. 選擇全局工具配置
   7. 選擇新增 NodeJS
      1. 別名node 12.16.3
      2. 勾選自動(dòng)安裝
      3. 版本選擇12.16.3，這是目前穩(wěn)定的長(zhǎng)期支持版本
      4. 保存

image

新建項(xiàng)目配置

0x1 新建項(xiàng)目 - 選擇自由風(fēng)格項(xiàng)目

0x2 輸入名稱

image

0x3 源碼管理選擇你的項(xiàng)目的Git

我的文檔項(xiàng)目訪問是公開的，可以直接訪問，如果是私有項(xiàng)目還需要配置一個(gè)可訪問的賬號(hào)才可以。就是下面Credentials選項(xiàng)。

image

0x4 構(gòu)建觸發(fā)器

勾選GitHub hook trigger for GITScm polling，這是一旦我們推送代碼就會(huì)觸發(fā)構(gòu)建。

0x5 構(gòu)建環(huán)境

勾選Provide Node & npm bin/ folder to PATH，這是提供Node命令給我們使用。

image

0x6 增加構(gòu)建步驟 - 執(zhí)行shell

image

執(zhí)行shell內(nèi)容

由于內(nèi)部的node環(huán)境和外部隔離，所以我們第一次使用的時(shí)候需要安裝yarn和設(shè)置一些國(guó)內(nèi)源。

這一步我們進(jìn)行安裝依賴和打包項(xiàng)目，并且將打包的項(xiàng)目壓縮等待后續(xù)發(fā)送到部署的服務(wù)器上。

# 進(jìn)入Jenkins工作空間下hxkj項(xiàng)目目錄
cd /var/jenkins_home/workspace/sunseekerx

# 下面的命令只需要執(zhí)行一次，后續(xù)可以刪除
###
# npm切換為淘寶源
npm config set registry http://registry.npm.taobao.org/
# 安裝yarn
npm i yarn -g
# yarn切換為淘寶源
yarn config set registry https://registry.npm.taobao.org
###

# 安裝項(xiàng)目中的依賴
yarn
# 打包
yarn build
# 進(jìn)入生成打包文件的目錄
cd docs/.vuepress/dist
# 把生成的項(xiàng)目打包成壓縮包，方便移動(dòng)到項(xiàng)目部署目錄
tar -zcvf sunseekerx.tar.gz * 

執(zhí)行完成之后會(huì)在服務(wù)器生成sunseekerx.tar.gz，下一步就是把這個(gè)文件發(fā)送到指定部署的服務(wù)器。進(jìn)行解壓。

image

0x7 增加構(gòu)建后的步驟

這一步將上一步打包好的文件發(fā)送到服務(wù)器，并且解壓。

cd /www/wwwroot/sunseekerx.yoouu.cn
\echo ">>>當(dāng)前工作路徑："`pwd`
\shopt -s extglob
\echo ">>>刪除：(.htaccess|.user.ini|sunseekerx.tar.gz)之外的文件"
\rm -rf !(.htaccess|.user.ini|sunseekerx.tar.gz)
\echo ">>>解壓：sunseekerx.tar.gz"
\tar -zxvf sunseekerx.tar.gz -C ./
\echo ">>>移除：sunseekerx.tar.gz"
\rm -rf sunseekerx.tar.gz
\echo ">>>執(zhí)行成功"

image

0x8 測(cè)試構(gòu)建

可以看到服務(wù)器有了構(gòu)建之后的文件

image

0x9 訪問下網(wǎng)站試試，nice??

image

0x10 Git設(shè)置Webhooks

前提是Git需要能訪問到你的Jenkins，一旦有代碼提交上來，Git就會(huì)去請(qǐng)求你這個(gè)地址，然后Jenkins觸發(fā)構(gòu)建動(dòng)作。

簡(jiǎn)單來說就是我提交代碼告訴Git，Git告訴Jenkins你該構(gòu)建了，完了Jenkins去構(gòu)建。Git就像倉(cāng)庫(kù)管理員，Jenkins就是干苦力的。??

image

0x10 測(cè)試下提交構(gòu)建

在本地修改一些文件，提交上去，稍等一會(huì)兒查看Jenkins，這個(gè)處于等待中的任務(wù)就是提交的任務(wù)

image

訪問https://sunseekerx.yoouu.cn/試試，更新成功??

image