Vue3+TS Day44 - 自動(dòng)化部署、Jenkins、CI

一、基礎(chǔ)認(rèn)知

1、在沒有自動(dòng)化部署方案時(shí),程序員、測試人員、運(yùn)維人員之間是如何協(xié)調(diào)工作的?

  • 【程序員】編寫和修改代碼,并進(jìn)行打包

  • 【測試人員】依賴于程序員打包,然后對包進(jìn)行測試

  • 【運(yùn)維人員】依賴于程序員打包,然后對合格包進(jìn)行發(fā)布

  • 【最大痛點(diǎn)】當(dāng)測試人員或運(yùn)維人員想做下一步之前,都依賴于程序員進(jìn)行打包,①會(huì)導(dǎo)致程序員開發(fā)思路時(shí)不時(shí)被打斷 ②測試和運(yùn)維自主性太弱,對開發(fā)依賴性太強(qiáng)

2、CI的全稱是什么?

  • 【CI,Continuous Integration】持續(xù)集成
image.png

3、CD的全稱是什么?

  • 【CD,Continuous Deployment】持續(xù)部署
image.png

4、自動(dòng)化部署流程圖(后續(xù)要能手繪出來)?

image.png

二、購買阿里云服務(wù)器實(shí)例

1、如何選擇付費(fèi)方式和鏡像系統(tǒng)?

  • 我們屬于學(xué)習(xí),所以選擇按流量付費(fèi),使用完后即使釋放實(shí)例。
  • 鏡像的話選擇 Linux 下的 Center OS 7.9 64 位(8版本以上已經(jīng)不維護(hù)了)

2、安全組配置?

  • 因?yàn)镴enkins默認(rèn)端口號是 8080,所以我們要把這個(gè)端口對外開放

3、最好給服務(wù)器實(shí)例配置一個(gè)root自定義密碼,方便后續(xù)遠(yuǎn)程登陸

image.png

4、完成實(shí)例購買與創(chuàng)建后,可以在本地terminal(命令行)中遠(yuǎn)程連接,出現(xiàn)下面提示即可。

image.png

三、為實(shí)例配置Nginx,并能展示自定義index.html

1、為了后續(xù)更加方便,我們安裝第三方包管理工具 dnf

  • yum install dnf

2、安裝nginx

  • dnf install nginx

3、啟動(dòng)nginx,并配置nginx服務(wù)開機(jī)啟動(dòng)

systemctl start nginx
systemctl status nginx
systemctl enable nginx

4、通過公網(wǎng)ip訪問服務(wù)器,如果看到如下圖即代表nginx安裝并運(yùn)行成功

image.png

5、修改nginx的默認(rèn)index.html文件以及所在目錄(修改配置,推薦使用vscode插件remote shh)

image.png
  • 創(chuàng)建mall_cms目錄,以及自定義的index.html
mkdir /root/mall_cms
cd /root/mall_cms
touch index.html

vi index.html
  • 打開 /etc/nginx/nginx.conf 文件
image.png
image.png
  • 重啟nginx
  • systemctl restart nginx

6、通過公網(wǎng)ip訪問服務(wù)器,如果看到如下圖即修改配置成功

image.png
  • 至此,我們已經(jīng)有一臺(tái)可以展示web的服務(wù)器了。
  • 【所謂持續(xù)集成】就是我們只需要讓Jenkins①git clone指定分支 ②執(zhí)行腳本,讓代碼生成build文件 ③將build目錄下的內(nèi)容,拷貝到 /root/mall_cms 目錄下

四、我們需要一個(gè)git倉庫

1、找一個(gè)git倉庫,比如GitHub、gitlab、coding.net

  • 這里我使用 coding.net
  • 自行注冊賬號密碼

2、將代碼進(jìn)行上傳到遠(yuǎn)程git倉庫

  • 建議先使用公開倉庫


    image.png
  • 按照提示,初始化倉庫即可(上傳已經(jīng)寫好的vue項(xiàng)目代碼)

image.png

3、阿里云實(shí)例需要執(zhí)行g(shù)it clone,所以需要安裝git

dnf install git

五、為阿里云服務(wù)器實(shí)例安裝Jenkins以及java環(huán)境

1、安裝java環(huán)境

-因?yàn)?Jenkins 是一款由Java編寫的開源的持續(xù)集成工具,所以需要Java環(huán)境。

dnf search java-1.8
dnf install java-1.8.0-openjdk.x86_64

2、安裝 Jenkins

  • 因?yàn)镴enkins本身沒有在dnf的軟件倉庫包中,所以我們需要連接Jenkins倉庫:
  • 【wget】是Linux中下載文件的一個(gè)工具,-O 表示輸出到某個(gè)文件夾并且命名文件;
  • 【rmp】全稱是 The RPM Package Manager,是Linux下的一個(gè)軟件包管理器;
wget –O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat-stable/jenkins.repo

#有時(shí)候會(huì)下載到 ~ 目錄下,要進(jìn)行手動(dòng)移動(dòng)
mv jenkins.repo /etc/yum.repos.d/

# 導(dǎo)入GPG密鑰以確保您的軟件合法
rpm --import https://pkg.jenkins.io/redhat/jenkins.io.key
# 或者
rpm --import http://pkg.jenkins-ci.org/redhat/jenkins-ci.org.key
  • 編輯一下文件/etc/yum.repos.d/jenkins.repo
[jenkins]

name=Jenkins-stable

baseurl=http://pkg.jenkins.io/redhat

gpgcheck=1
  • 安裝Jenkins
dnf install jenkins # --nogpgcheck(可以不加)
  • 啟動(dòng)Jenkins服務(wù)
systemctl start jenkins
systemctl status jenkins
systemctl enable jenkins
  • Jenkins默認(rèn)使用8080端口提供服務(wù),所以需要加入到安全組中:
image.png

3、Jenkins 用戶

  • 我們后面會(huì)訪問centos中的某些文件夾,默認(rèn)Jenkins使用的用戶是 jenkins,可能會(huì)沒有訪問權(quán)限,所以我們需要修改一下它的用戶:
  • 修改文件的路徑:/etc/sysconfig/jenkins
image.png
  • 之后需要重啟一下Jenkins
systemctl restart jenkins

4、Jenkins 配置

  • 打開瀏覽器,輸入:http://8.134.60.235:8080/ 【注意:你輸入自己的IP地址,并且安全組有打開8080端口】
  • 【獲取輸入管理員密碼:】在下面的地址中 cat /var/lib/jenkins/secrets/initialAdminPassword
image.png

5、由于vue項(xiàng)目依賴于node環(huán)境,所以需要為Jenkins配置nodejs環(huán)境

image.png
image.png
  • 這時(shí)需要重啟一下Jenkins
systemctl restart jenkins
image.png
image.png

6、Jenkins 任務(wù)【核心步驟】

image.png
image.png
  • 配置git倉庫信息
image.png
  • 配置觸發(fā)器
  • 這里的觸發(fā)器規(guī)則是這樣的:【定時(shí)字符串從左往右分別是:分 時(shí) 日 月 周】
#每半小時(shí)構(gòu)建一次OR每半小時(shí)檢查一次遠(yuǎn)程代碼分支,有更新則構(gòu)建
H/30 * * * *

#每兩小時(shí)構(gòu)建一次OR每兩小時(shí)檢查一次遠(yuǎn)程代碼分支,有更新則構(gòu)建
H H/2 * * *

#每天凌晨兩點(diǎn)定時(shí)構(gòu)建
H 2 * * *

#每月15號執(zhí)行構(gòu)建
H H 15 * *

#工作日,上午9點(diǎn)整執(zhí)行
H 9 * * 1-5

#每周1,3,5,從8:30開始,截止19:30,每4小時(shí)30分構(gòu)建一次
H/30 8-20/4 * * 1,3,5
image.png
  • 配置nodejs
image.png
  • 配置shell腳本
image.png
# 打印一下當(dāng)前執(zhí)行shell腳本的用戶信息
id
pwd
node -v
npm -v

npm install 
npm run build

pwd

echo '構(gòu)建成功'

ls

# 刪除/root/mall_cms文件夾里所有的內(nèi)容
rm -rf /root/mall_cms/* 

cp -rf ./build/* /root/mall_cms/
  • 最后保存配置,回到Jenkins任務(wù)也,執(zhí)行任務(wù)
image.png
image.png
  • 再次訪問 http://8.210.70.143/ ,這時(shí)就訪問到我們部署的具體vue項(xiàng)目了,大功告成。
image.png

六、補(bǔ)充特別重要的關(guān)于Linux權(quán)限的知識(shí)【超級重要】

1、分別說【rwx】對【文件】或【目錄】的意義?【超級重要】

image.png
image.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容