jenkins介紹

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

1. 環(huán)境準備

centos 7.* 服務器，寶塔遠程連接工具V3.2

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

yun update

3. 安裝Java和git

yum install javayum install git

4. 安裝nginx

yum install nginx //安裝 
service nginx start //啟動

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

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

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  //啟動 jenkins

jenkins啟動成功后默認的是8080端口，瀏覽器輸入你的服務器 ip 地址加8080 端口就可以訪問了。

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

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

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

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

這個時候安裝的的插件會比較多，耗時有點久。耐心等待。

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

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

點擊開始使用 jenkins 這個時候 jenkins就已經(jīng)配置成功了。

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

這里我代碼倉庫用的是碼云(github也是一樣的)
輸入倉庫地址。因為倉庫是私有的所以會有報錯提示 這里要添加Credentials。就是你碼云或者github賬號。

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

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

點擊名稱 進入當前任務配置頁面，點擊工作區(qū)

在點擊工作空間==>

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

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

輸入shell命令==>

node -v
npm install 
npm install 
rm -rf ./dist/*  移除工作區(qū)dist文件
npm run build  打包項目
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工程。

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

點擊錯誤的構(gòu)建歷史，進去再點擊控制臺輸出

查看報錯問題

npm: command not found

jenkins默認是沒有安裝node插件的,所有沒有npm命令
安裝node插件 ====>

8. 安裝nodeJs

安裝成功

點擊全局工具配置===>

選擇安裝nodeJS

保存，回到配置

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

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

當我們在服務器上安裝jenkins時,會在服務器上創(chuàng)建一個jenkins的用戶。但是這個jenkins沒有操作/www/web/site文件夾的權(quán)限

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

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

再次點擊構(gòu)建

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

9.打開服務器

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

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

10.利用docker部署nginx訪問項目

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文件復制到conf目錄下
docker cp nginx01:/etc/nginx/conf.d/default.conf /www/web/conf  #把容器中的default.conf文件復制到conf目錄下
docker rm -f nginx01 #刪除鏡像

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

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

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   # 掛載默認配置文件，反向代理就是從這個配置文件中配置
-v /www/web/logs:/var/log/nginx nginx # 掛載日志文件

http://ip:3000成功訪問

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

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

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

配置方法

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

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

測試請求成功

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

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

最新評論