使用jenkins自動化打包部署Vue項目。詳細教程。

此教程 jenkins是直接部署到linux服務器上。服務器系統：CentOS 7.3 64位。

流程：jenkins關聯碼雲倉庫,點擊當即構建,執行shell進行構建,打包,把打包後的dist目錄文件放到服務器上,完成自動化打包部署。

一.服務器安裝 Java

jenkins是運行在java環境中的,因此要先安裝java,配置java環境變量後才能使用。

一、卸載系統自帶的jdk

//查找系統jdk 
[root@VM_0_2_centos ~]# rpm -qa|grep java 
java-1.6.0-openjdk-1.6.0.37-1.13.9.4.el5_11
tzdata-java-2015g-1.el5
//若是查找到了 先所有卸載了在從新安裝

//卸載
[root@VM_0_2_centos ~]# rpm -e --allmatches --nodeps python-javapackages-3.4.1-11.el7.noarch
[root@VM_0_2_centos ~]# rpm -e --allmatches --nodeps tzdata-java-2019a-1.el7.noarch
[root@VM_0_2_centos ~]# rpm -e --allmatches --nodeps java-1.8.0-openjdk-1.8.0.212.b04-0.el7_6.x86_64
[root@VM_0_2_centos ~]# rpm -e --allmatches --nodeps java-1.8.0-openjdk-headless-1.8.0.212.b04-0.el7_6.x86_64

//檢查是否卸載乾淨
[root@VM_0_2_centos ~]# rpm -qa|grep java 
複製代碼

二、查找yum下可更新的Java列表

yum -y list java*
//或者
yum search jdk
複製代碼

三、安裝java

yum install -y java-1.8.0-openjdk.x86_64
//驗證完成安裝
java -version
複製代碼

四、配置環境變量

用文本編輯器打開/etc/profile

[root@VM_0_2_centos ~]# vi /etc/profile
複製代碼

在profile文件末尾加入：

export JAVA_HOME=/usr/lib/jvm/jre-1.8.0-openjdk
export PATH=$JAVA_HOME/bin:$PATH
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
複製代碼

//使配置文件生效
source /etc/profile 
source ~/.bash_profile
//或重啓機器配置生效
reboot
複製代碼

二.服務器安裝 jenkins

[root@VM_0_2_centos ~]# wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo 
[root@VM_0_2_centos ~]# yum install jenkins
//會詢問你
Total download size: 74 M
Installed size: 74 M
Is this ok [y/d/N]: y
複製代碼

安裝成功：

三.啓動 jenkins

瀏覽器輸入 http://ip:8080，ip:服務器外網ip地址 例：118.24.211.xxx:8080

等待一會以後 提示你輸入管理員密碼

//服務器
[root@VM_0_2_centos ~]# vi /var/lib/jenkins/secrets/initialAdminPassword

複製代碼

複製內容輸入到界面。

若是出現 該Jenkins實例彷佛已離線。

瀏覽器進入 118.24.211.xxx:8080/pluginManag…
修改

https改成http。

我運行的時候有的時候會出現 該Jenkins實例彷佛已離線，有的時候不會出現。不知道是否是網絡的問題。 若是出現 就將https改成http

安裝插件

點擊推薦安裝,稍等片刻，會出現

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

安裝完插件以後 建立第一個管理員用戶

填好表單以後 點擊保存並完成

繼續點擊保存並完成

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

四.用jenkins建立一個構建任務

這裏我代碼倉庫用的是碼雲(github也是同樣的)
輸入倉庫地址。由於倉庫是私有的因此會有報錯提示 這裏要添加Credentials。就是你碼雲或者github帳號。

選中帳號報錯就消失了

這裏能夠填一下要構建的分支

這個時候就建立了一個構建任務
回到首頁==>就會看到一個 my_test的構建任務

點進去==>

再點擊工做區==>什麼都沒有，提示你須要構建一次纔會有工做空間。

點擊當即構建==>

在點擊工做空間==>

jenkins構建任務已經完成

五.填寫jenkins構建時執行的shell腳本

點擊配置==>

點擊增長構建步驟==>

點擊執行shell==>

輸入shell命令==>

npm install 
rm -rf ./dist/*
npm run build
rm -rf /www/web/site/*
cp -rf ./dist/* /www/web/site
複製代碼

npm install :下載工做區npm包
rm -rf ./dist/* :刪除dist目錄下的全部文件,dist目錄即爲當前jenkins工做區打包後的文件。
npm run build :執行打包命令
rm -rf /www/web/site/* :刪除服務器上/www/web/site/ 目錄下的全部文件/www/web/site/ 爲服務器項目放置位置。
cp -rf ./dist/* /www/web/site :把當前構建工做區dist目錄裏的文件 copy 到服務器/www/web/site 文件夾下。

再次回到my_test工程。

點擊當即構建==>發現構建報錯了(紅色圓點即爲構建失敗,藍色成功)

點擊 #5 進入這次構建詳情==>

點擊控制檯輸出==>

看看報什麼錯誤==>

npm: command not found
複製代碼

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

找到NodeJS 選中安裝===>

安裝成功===>

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

新增nodeJs ===>

保存===>
回到 my_test 配置空間 點擊構建環境===>

保存===>

回到 my_test 空間 點擊當即構建 第一次構建 會執行 npm install 下載不少包 會很慢

此次構建依然失敗了 查看 #8 的控制檯輸出===>

shell腳本執行執行了,可是沒有所有執行成功。

當咱們在服務器上安裝jenkins時,會在服務器上建立一個jenkins的用戶。可是這個jenkins沒有操做/www/web/site文件夾的權限

給jenkins用戶添加 /www/web/site文件夾的全部權限===>

[root@VM_0_2_centos /]# chown -R jenkins:jenkins /www/web/site
複製代碼

回到jenkins my_test 空間 點擊當即構建===>

此次就成功了 打開 #9 的控制檯輸出===>

Finished: SUCCESS

六.打開服務器

查看服務器 /www/web/site/ 文件夾裏面的內容

/www/web/site/ 裏面已經有了打包後的內容。

建立站點=>選擇/www/web/site/目錄 即完成了項目的部署。