jenkins介紹

Jenkins是開源的,使用Java編寫的持續(xù)集成的工具，在Centos上可以通過yum命令行直接安裝。Jenkins只是一個(gè)平臺(tái)，真正運(yùn)作的都是插件。這就是jenkins流行的原因，因?yàn)閖enkins什么插件都有。

1. 環(huán)境準(zhǔn)備

centos 7.* 服務(wù)器，寶塔遠(yuǎn)程連接工具V3.2

2. 首先登錄服務(wù)器更新系統(tǒng)軟件

yun update

3. 安裝Java和git

yum install javayum install git

4. 安裝nginx

yum install nginx //安裝 
service nginx start //啟動(dòng)

出現(xiàn)Redirecting to /bin/systemctl start nginx.service

說明nginx已經(jīng)啟動(dòng)成功了，訪問http://你的ip/，如果成功安裝會(huì)出來nginx默認(rèn)的歡迎界面

5. 安裝Jenkins

wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key 

 yum install jenkins //完成之后直接使用 yum 命令安裝 Jenkins

service jenkins restart  //啟動(dòng) jenkins

jenkins啟動(dòng)成功后默認(rèn)的是8080端口，瀏覽器輸入你的服務(wù)器 ip 地址加8080 端口就可以訪問了。

等待一會(huì)之后 提示你輸入管理員密碼

//服務(wù)器
[root@VM_0_2_centos ~]# cat /var/lib/jenkins/secrets/initialAdminPassword //cat 查看文件 

進(jìn)入系統(tǒng) 安裝插件，直接點(diǎn)擊安裝推薦插件

點(diǎn)擊推薦安裝,稍等片刻，會(huì)出現(xiàn)

這個(gè)時(shí)候安裝的的插件會(huì)比較多，耗時(shí)有點(diǎn)久。耐心等待。

安裝完插件之后 創(chuàng)建第一個(gè)管理員用戶

繼續(xù)點(diǎn)擊保存并完成

點(diǎn)擊開始使用 jenkins 這個(gè)時(shí)候 jenkins就已經(jīng)配置成功了。

6. 用jenkins創(chuàng)建一個(gè)構(gòu)建任務(wù)

這里我代碼倉庫用的是碼云(github也是一樣的)
輸入倉庫地址。因?yàn)閭}庫是私有的所以會(huì)有報(bào)錯(cuò)提示 這里要添加Credentials。就是你碼云或者github賬號(hào)。

選擇一下要構(gòu)建的代碼分支

這個(gè)時(shí)候就創(chuàng)建了一個(gè)構(gòu)建任務(wù)
回到首頁==>就會(huì)看到一個(gè)llgtfoo的構(gòu)建任務(wù)

點(diǎn)擊名稱 進(jìn)入當(dāng)前任務(wù)配置頁面，點(diǎn)擊工作區(qū)

在點(diǎn)擊工作空間==>

jenkins構(gòu)建任務(wù)已經(jīng)完成

7. 填寫jenkins構(gòu)建時(shí)執(zhí)行的shell腳本

輸入shell命令==>

node -v
npm install 
npm install 
rm -rf ./dist/*  移除工作區(qū)dist文件
npm run build  打包項(xiàng)目
rm -rf /www/web/site/*  刪除/www/web/site上一次構(gòu)建文件
cp -rf ./dist/* /www/web/site   將打包后的dist文件拷貝到/www/web/site ，/www/web/site為nginx文件目錄

再次回到my_test工程。

點(diǎn)擊立即構(gòu)建==>發(fā)現(xiàn)構(gòu)建報(bào)錯(cuò)了(紅色圓點(diǎn)即為構(gòu)建失敗,藍(lán)色成功)

點(diǎn)擊錯(cuò)誤的構(gòu)建歷史，進(jìn)去再點(diǎn)擊控制臺(tái)輸出

查看報(bào)錯(cuò)問題

npm: command not found

jenkins默認(rèn)是沒有安裝node插件的,所有沒有npm命令
安裝node插件 ====>

8. 安裝nodeJs

安裝成功

點(diǎn)擊全局工具配置===>

選擇安裝nodeJS

保存，回到配置

保存再次點(diǎn)擊立即構(gòu)建 ，構(gòu)建過程中可以點(diǎn)擊控制臺(tái)輸出，查看構(gòu)建過程

shell腳本執(zhí)行執(zhí)行了,但是沒有全部執(zhí)行成功。

當(dāng)我們?cè)诜?wù)器上安裝jenkins時(shí),會(huì)在服務(wù)器上創(chuàng)建一個(gè)jenkins的用戶。但是這個(gè)jenkins沒有操作/www/web/site文件夾的權(quán)限

給jenkins用戶添加 /www/web/site文件夾的所有權(quán)限===>

[root@VM_0_2_centos /]# chown -R jenkins:jenkins /www/web/site

再次點(diǎn)擊構(gòu)建

Finished: SUCCESS 表示構(gòu)建成功啦

9.打開服務(wù)器

查看服務(wù)器 /www/web/site/ 文件夾里面的內(nèi)容

/www/web/site/ 里面已經(jīng)有了打包后的內(nèi)容

10.利用docker部署nginx訪問項(xiàng)目

centos 安裝docker 環(huán)境

centos 官網(wǎng)安裝步驟

docker pull nginx # 拉取鏡像

mkdir -p /www/web/conf # 創(chuàng)建配置文件目錄

在/www/web/conf 中拷貝nginx.conf 和default.conf

# 拷貝配置文件
docker run --name nginx01 -d nginx:latest
docker cp nginx01:/etc/nginx/nginx.conf /www/web/conf  #把容器中的nginx.conf文件復(fù)制到conf目錄下
docker cp nginx01:/etc/nginx/conf.d/default.conf /www/web/conf  #把容器中的default.conf文件復(fù)制到conf目錄下
docker rm -f nginx01 #刪除鏡像

/www/web/site為Jenkins構(gòu)建dist文件輸出目錄

創(chuàng)建web項(xiàng)目容器

docker run -it -d --name mynginx -p 8888:80 -v /www/web/site:/usr/share/nginx/html -v /www/web/conf/nginx.conf:/etc/nginx/nginx.conf -v /www/web/conf/default.conf:/etc/nginx/conf.d/default.conf  -v /www/web/logs:/var/log/nginx nginx

命令說明：
docker run -it -d --name mynginx  #名稱
-p 8888:80  # 端口映射
-v /www/web/site:/usr/share/nginx/html  # 掛載資源路徑
-v /www/web/conf/nginx.conf:/etc/nginx/nginx.conf  #掛載主配置文件
-v /www/web/conf/default.conf:/etc/nginx/conf.d/default.conf   # 掛載默認(rèn)配置文件，反向代理就是從這個(gè)配置文件中配置
-v /www/web/logs:/var/log/nginx nginx # 掛載日志文件

http://ip:3000成功訪問

11.實(shí)現(xiàn)代碼提交自動(dòng)觸發(fā)Jenkins構(gòu)建

實(shí)現(xiàn)開發(fā)本地push代碼到gitee上后，觸發(fā)Webhook，jenkins自動(dòng)執(zhí)行構(gòu)建。

• jenkins安裝Generic Webhook Trigger 插件
• github添加觸發(fā)器

配置方法

1.在剛才的llgtfoo工程中點(diǎn)擊構(gòu)建觸發(fā)器中選擇Generic Webhook Trigger，填寫token

2.gitee配置Webhook
選擇gitee項(xiàng)目中的Settings->Webhooks>add webhook
配置方式按上圖紅框中的格式，選擇在push代碼時(shí)觸發(fā)webhook，成功后會(huì)在下方出現(xiàn)一個(gè)綠色的小勾勾

測試請(qǐng)求成功

修改代碼推送到gitee上面，Jenkin成功自動(dòng)新增一條構(gòu)建記錄。

到此這篇關(guān)于Jenkins自動(dòng)化部署Vue項(xiàng)目的方法實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)Jenkins自動(dòng)化部署Vue內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論