Linux(centos7.6)使用Jenkins部署vue項目學習

雙11剛買了一臺雲服務器,之前有搭建過Jenkins,走了好多彎路,這次寫篇文章記錄整個流程。

1.首先,得有自己的一臺服務器

 

2.永久關閉防火牆

systemctl disable firewalld   永久關閉防火牆,,系統重新啓動後,防火牆依然關閉
systemctl status firewalld	 查看防火牆狀態

 

3.nginx的源碼簡單安裝

(1)進入官網查找需要下載版本的鏈接地址,然後使用wget命令進行下載

wget http://nginx.org/download/nginx-1.16.1.tar.gz

(2)建議大家將下載的資源進行包管理

mkdir -p nginx/core
mv nginx-1.16.1.tar.gz nginx/core

(3)解壓縮

tar -xzf nginx-1.16.1.tar.gz

到這一步應該能看到

(4)進入nginx-1.16.1文件夾中,發現configure,執行以下代碼:(--with-http_ssl_module是爲了給配置https做準備,--prefix=/usr/local/nginx指定安裝到/usr/local/nginx目錄下

./configure --prefix=/usr/local/nginx --with-http_ssl_module

(5)編譯

make

(6)安裝

make install

都執行完成後,可以看到nginx已經安裝到了/usr/local/nginx下面

4.cd /usr/local/nginx/sbin/  到目錄下,可以看到nginx,執行 ./nginx

 

5.訪問ip地址可以看到,代表你的nginx安裝成功了。

 

6.安裝jdk1.8

這裏借鑑了https://blog.csdn.net/qq_41649001/article/details/105442407 這位大佬的步驟(內有百d盤鏈接),將jdk包放入/opt/software下。

 

執行  tar -zxvf jdk-8u151-linux-x64.tar.gz

 

重命名並刪除壓縮包:

執行:mv jdk1.8.0_151/ jdk

 

執行 rm -rf jdk-8u151-linux-x64.tar.gz

 

修改環境變量:

執行 pwd ,先把jdk的安裝目錄記錄下:/opt/software

執行:vim /etc/profile

按i進入insert模式:

將下方這段話添加在文末:

export JAVA_HOME=/opt/software/jdk (這裏的JDK路徑要填寫自己的存放位置!!)
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar
export PATH=$JAVA_HOME/bin:$PATH

然後按esc鍵,在執行:wq,保存成功。

然後使用source /etc/profile 命令讓剛剛修改的配置文件生效即可

執行 java -version 看到如下則安裝成功

 

7.安裝配置Jenkins

首先到這個網站下載Jenkins,訪問清華大學開源軟件鏡像站 https://mirrors.tuna.tsinghua.edu.cn/jenkins/redhat-stable/,其他下載方式很慢,要不就是上了Jenkins不知道怎麼點。很尷尬,在網上搜到了這麼一個網站。

我們來下載一個最新版嚐嚐鮮:

在 /opt/software/  拖進剛纔下載的rpm包。

 

安裝執行:

rpm -ivh jenkins-2.263.1-1.1.noarch.rpm

 

然後打開 /etc/rc.d/init.d/ 下的jenkins文件

將下面這行代碼配到文件裏面:

/opt/software/jdk/bin/java

重新加載配置文件
    systemctl daemon-reload
 

啓動
service jenkins start

重啓
service jenkins restart

停止
service jenkins stop

啓動完畢後訪問ip:8080可以看見:(期間弄完訪問不了是因爲服務器沒有開8080端口,要去騰訊雲的防火牆設置一下,在下載一個tcping.exe可以ping 端口)

 

 

執行 vim /var/lib/jenkins/secrets/initialAdminPassword 可以看到密碼複製進去點繼續

然後進去看到了一個登錄界面,讓輸入用戶名和密碼。我尼瑪,連個註冊按鈕都沒有,我醉了好久,最後通過以下三步完美解決

1、通過 find / -name jenkins 查找jenkins的安裝路徑爲  /var/lib/jenkins

2、在jenkins目錄下,找到config.xml文件,並進行編輯:$ sudo vim config.xml

     搜索到useSecurity 將useSecurity的屬性由 true 改爲 false、修改完成之後,點擊Esc鍵,:wq退出保存。

3、重新啓動Jenkins:$ sudo /etc/init.d/jenkins restart

4、再次訪問可以看到:
 
 
執行:find / -name "hudson.model.UpdateCenter.xml" 打印以下路徑
/var/lib/jenkins/hudson.model.UpdateCenter.xml
 
在執行
find / -name default.json
打印出:
/var/lib/jenkins/updates/default.json
 
執行下面兩句替換一些依賴源
sed -i 's/ www.google.com/www.baidu.com/g ' default.json
sed -i 's/ updates.jenkins-ci.org \/download/ mirrors.tuna.tsinghua.edu.cn \/jenkins/g' default.json

 

重啓jenkins,systemctl restart jenkins.service

上面這兩步可以讓我們下載jenkins插件下載的快一點 

重啓完成後點擊安裝插件:

可以看到正在一步步安裝,如果沒有執行上面幾步替換的操作,下載插件都是失敗,本人嘗試過。

 

安裝完成之後會看到:

 

點保存並完成:

 

點開始使用,就可以看到jenkins的主界面了:

 

 

點擊新建任務

 

 

輸入項目名稱點確定

點擊源碼管理,輸入我們的git地址

下方報了個錯

點擊添加憑據,輸入自己的gitte賬號密碼。

選擇了憑據還是報錯:

 

經查詢是因爲服務器沒有安裝git客戶端,所以執行:

yum -y install git

然後查看git版本:git --version

刷新一下jenkins的頁面,再重新輸入git倉庫地址,選擇憑據,發現報錯消失了。

 

制定分支默認選擇master。

點保存

然後點進工作區,說錯誤,讓先構建一次

 

點擊之後,刷新一下,就發現代碼已經被拉下來了

填寫jenkins構建時執行的shell

設置中點擊增加構建步驟,點擊執行shell

 

粘貼入文本框中保存

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

 

然後給jenkins安裝node插件

 

安裝好了 點 全局工具配置:

 

 

 

但是我們發現nodejs的版本是一個普通文本框,不能選擇。

 

經查詢了很多方法:

這裏下載一個hudson.plugins.nodejs.tools.NodeJSInstaller文件,裏面記錄着nodejs的版本信息

https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/updates/

 

 

但是我嫌麻煩,之前有個機器裝好了Jenkins,當時是一步到位,換一臺機器就有這樣的問題,很尷尬。所以直接將配置文件從那個好的服務器上copy下來,

放到  /var/lib/jenkins/updates/ 這個路徑下

 

刷新一下頁面,就能看到版本,我們選一個相對穩定的版本10.12.0,然後點保存。

 

 

回到構建工程裏面:點構建環境,勾選如下,點保存

 

但是npm構建的超級慢。所以換成cnpm,這裏拿vue-admin-template的源碼舉個例子:修改shell腳本(具體情況shell腳本有所不同)

npm i cnpm -g
cnpm install 
rm -rf ./dist/*
cnpm run build:prod
rm -rf /www/web/site/*
cp -rf ./dist/* /www/web/site

 

 

期間碰到無權限問題,給目錄賦權限:

chmod 777 /www/web/site

 

在訪問以下鏈接地址: ip,默認80端口,終於特麼好了。jenkins的功能需要研究的還很多,這裏知識舉個例子

 

 

 

記錄2021/11/22日:

項目中改用yarn作爲以來安裝工具

配置git憑據需要  把id_rsa下的內容粘貼進去

 

 

npm install -g yarn -registry=https://registry.npm.taobao.org
yarn install --pure-lockfile
cd /var/lib/jenkins/workspace/yichun-extracurricular-sports-pc
rm -rf ./dist
yarn run build
rm -rf /web/extracurricular/*
cp -rf ./dist /web/extracurricular

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章