docker+Jenkins+nginx實(shí)現(xiàn)前端自動(dòng)部署詳細(xì)教程
點(diǎn)擊上方?前端Q,關(guān)注公眾號(hào)
回復(fù)加群,加入前端Q技術(shù)交流群
本文來自交流群的管理員,亞北大佬的投稿,感謝亞北~
本次部署大概步驟如下:
準(zhǔn)備環(huán)境 安裝docker 安裝docker-compose 安裝Jenkins和Nginx 編寫配置文件 配置Jenkins 配置Jenkins構(gòu)建任務(wù)
背景
阿里云雙11大促買了個(gè)服務(wù)器玩一玩,買之前很激動(dòng),買了之后,emmmm我用它能干嘛
找我干運(yùn)維的好兄弟問一問,好兄弟也對(duì)我想做的事情很疑惑

所以我稀里糊涂買了服務(wù)器但是并沒有想好用它來做什么
如果像我一樣買了之后不知道干嘛,實(shí)在不行還可以部署一下自己的網(wǎng)站嘛,博客是用hexo寫的,hexo這個(gè)東西適合想擁有自己的博客但是又沒什么想法的同學(xué)
它提供了非常多的精美的模板,可以選擇自己喜歡的模板,一鍵生成自己的博客
hexo生成的靜態(tài)的html頁面,所以我只需要在服務(wù)器配置一個(gè)Nginx服務(wù),然后再把我的資源文件扔上去就行
但是,但是,如果僅僅是這樣來部署,那也太簡單了,不如讓它更加的自動(dòng)化
所以我想要每次我對(duì)文件更改完成后讓服務(wù)器自動(dòng)幫我完成部署的事情,
而不是每次手動(dòng)打包,上傳,解壓,等等......這一系列的操作時(shí)間長了那可真是受不了
所以我的需求也漸漸的清晰明了起來,要有Nginx,要能自動(dòng)部署,公司用的Jenkins我比較熟悉,這一次仍然選擇它作為我自動(dòng)部署的工具
上帝說要有光,于是便有了光,我想做上帝,需要有個(gè)沙箱
Docker是一個(gè)開源的應(yīng)用容器引擎,基于 Go 語言 并遵從 Apache2.0 協(xié)議開源。Docker 可以讓開發(fā)者打包他們的應(yīng)用以及依賴包到一個(gè)輕量級(jí)、可移植的容器中,然后發(fā)布到任何流行的 Linux 機(jī)器上,也可以實(shí)現(xiàn)虛擬化。容器是完全使用沙箱機(jī)制,相互之間不會(huì)有任何接口(類似 iPhone 的 app),更重要的是容器性能開銷極低。
有了沙箱之后就可以愉快的在里面進(jìn)行創(chuàng)造了。
環(huán)境準(zhǔn)備
服務(wù)器:CentOS 8 docker docker-compose nginx 鏡像 jenkins 鏡像 gitee
安裝docker環(huán)境
鏈接服務(wù)器
[email protected]?#@你自己的公網(wǎng)IP
安裝必要的一些系統(tǒng)工具
yum?install?-y?yum-utils?device-mapper-persistent-data?lvm2
添加Docker CE的軟件源信息。
sudo?yum-config-manager?--add-repo?\?https://download.docker.com/linux/centos/docker-ce.repo?#容易失敗,可以嘗試下面這個(gè)
sudo?yum-config-manager?--add-repo?https://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
更新并安裝Docker CE
sudo?yum?makecache?fast
sudo?yum?-y?install?docker-ce
復(fù)制代碼
啟動(dòng)Docker服務(wù)
sudo?systemctl?enable?docker?#設(shè)置開機(jī)自啟
sudo?systemctl?start?docker??#啟動(dòng)docker
安裝校驗(yàn)
docker?version???????#顯示docker版本信息
docker?info???????#顯示docker系統(tǒng)信息
docker?命令?--help?????#查看命令幫助

安裝docker-compose
docker-compose 是用于定義和運(yùn)行多容器 Docker 應(yīng)用程序的工具。通過 Compose,您可以使用 YML 文件來配置應(yīng)用程序需要的所有服務(wù)。然后,使用一個(gè)命令,就可以從 YML 文件配置中創(chuàng)建并啟動(dòng)所有服務(wù)。
下載docker-compose:
sudo?curl?-L?"https://github.com/docker/compose/releases/download/1.24.0/docker-compose-$(uname?-s)-$(uname?-m)"?-o?/usr/local/bin/docker-compose
提升權(quán)限:
sudo?chmod?+x?/usr/local/bin/docker-compose
查看是否安裝成功
docker-compose?-v

安裝Nginx和Jenkins鏡像
docker 拉取Nginx和Jenkins鏡像命令如下:
docker?pull?nginx??#安裝Nginx
docker?pull?jenkins/jenkins:lts???#安裝Jenkins
安裝完成后執(zhí)行docker images可以查看docker下存在的鏡像:

編寫配置目錄
接下來創(chuàng)建配置目錄,結(jié)構(gòu)如下:
├──?compose
│???└──?docker-compose.yml??#docker-compose配置文件
├──?jenkins
│???└──?jenkins_home??#Jenkins掛載卷
├──?nginxcfg
????└──?default.conf??#Nginx配置
以上目錄我是放在根目錄之下的,同學(xué)們也可以放在自己喜歡的位置
文件配置
docker-compose.yml配置文件內(nèi)容:
version:?'3'
services:??????????????????????????????????????
??docker_jenkins:
????user:?root????????????????????????????????
????restart:?always????????????????????????????
????image:?jenkins/jenkins:lts?????????????????#?指定服務(wù)所使用的鏡像?
????container_name:?jenkins????????????????????#?容器名稱
????ports:?????????????????????????????????????#?對(duì)外暴露的端口定義
??????-?8080:8080
??????-?50000:50000
????volumes:???????????????????????????????????#?卷掛載路徑
??????-?/root/jenkins/jenkins_home/:/var/jenkins_home??#冒號(hào)前為剛剛創(chuàng)建的路徑,這里要寫絕對(duì)路徑
??????-?/var/run/docker.sock:/var/run/docker.sock
??????-?/usr/bin/docker:/usr/bin/docker????????????????
??????-?/usr/local/bin/docker-compose:/usr/local/bin/docker-compose
??docker_nginx:
????restart:?always
????image:?nginx
????container_name:?nginx
????ports:
??????-?8090:80
??????-?80:80
??????-?433:433
????volumes:
??????-?/root/nginxcfg:/etc/nginx/conf.d??#用我們創(chuàng)建的Nginx配置去替換容器中的默認(rèn)配置,冒號(hào)前為我們創(chuàng)建的目錄的路徑
??????-?/root/nginxcfg/logs:/var/log/nginx??#nginx日志位置
??????-?/root/xxx/xxx/xxx:/usr/share/nginx/html
default.conf文件配置
error_log??/var/log/nginx/error.log?notice;
server{?#?簡單的監(jiān)聽80端口,指定index位置
??listen??80;
??root?/usr/share/nginx/html;
??index?index.html?index.htm;
}
在這里我踩了一個(gè)坑,就是不懂docker-compose.yml這個(gè)配置文件該去怎么寫,里面的每個(gè)參數(shù)都是什么意思,也是查了很多資料才弄明白,關(guān)鍵的是哪個(gè)掛載卷,volumes這個(gè)參數(shù),我的理解是用我們的一個(gè)配置去替換掉容器的默認(rèn)配置,這里我請教過一些同學(xué),他們說要在啟動(dòng)docker容器的時(shí)候,用docker命令決定以哪一個(gè)配置來啟動(dòng),就使我很不理解,這個(gè)docker-compose.yml文件不就是用來做這個(gè)事情的嗎?
最終嘗試了很多次之后,終于弄明白了,問題在volumes之下,冒號(hào)前面寫的是我的配置路徑,冒號(hào)之后的路徑是docker容器內(nèi)各個(gè)鏡像默認(rèn)的配置路徑
這個(gè)volumes就是用自己的配置去替換掉默認(rèn)配置
上述兩個(gè)文件配置完成之后,需要進(jìn)入compose目錄下面輸入以下命令啟動(dòng):
docker-compose?up?-d
停止:
docker-compose?stop
Jenkins配置
輸入docker ps -a查看容器的運(yùn)行情況:

狀態(tài)顯示為up,此時(shí)在瀏覽器地址欄輸入服務(wù)器公網(wǎng)IP:8080端口可顯示Jenkins管理頁面:

如果是第一次進(jìn)入,需要做一些初始化工作,因?yàn)槲乙呀?jīng)安裝過了,就不重新展示初始化的過程了,大概需要以下步驟:
根據(jù)提示找到密碼復(fù)制粘貼
通過這個(gè)命令可以獲取,/root/jenkins/jenkins_home為掛載目錄
cat /root/jenkins/jenkins_home/secrets/initialAdminPassword
安裝推薦的插件
設(shè)置管理員賬號(hào)
然后就可以愉快的使用Jenkins了
接著點(diǎn)擊系統(tǒng)管理->插件管理,需要在Jenkins安裝兩個(gè)插件:
安裝 Publish Over SSH 作用: 將構(gòu)建后的編譯產(chǎn)出發(fā)布到服務(wù)器 安裝Generic Webhook Trigger Plugin作用:通用 Webhook 觸發(fā)器構(gòu)建
點(diǎn)擊系統(tǒng)管理->系統(tǒng)配置,全局配置ssh:

然后到系統(tǒng)管理->全局工具配置,安裝nodejs:

注意node版本,有的項(xiàng)目對(duì)node版本有要求,可能會(huì)出現(xiàn)構(gòu)建不成功的情況
新建一個(gè)Jenkins構(gòu)建任務(wù)
選擇新建任務(wù),輸入任務(wù)名稱,構(gòu)建一個(gè)自由風(fēng)格的軟件項(xiàng)目:

配置源碼管理:

構(gòu)建觸發(fā)器配置:

gitee配置webhook:

URL為:http://服務(wù)器公網(wǎng)IP:8080/generic-webhook-trigger/invoke?token=你的token 選擇push觸發(fā)構(gòu)建任務(wù) 這里選擇了gitee,畢竟國內(nèi)速度快一些,GitHub的配置也是一樣的,源碼在GitHub的同學(xué)可以自己研究一下
構(gòu)建環(huán)境選擇node:

構(gòu)建:

增加構(gòu)建步驟選擇執(zhí)行shell
編寫shell腳本
node?-v??#查看node,npm?版本
npm?-v?
npm?i??#npm安裝項(xiàng)目所需依賴
npm?install?hexo-cli?-g??#npm安裝hexo
hexo?clean??#hexo清除緩存文件和靜態(tài)文件
hexo?g??#hexo生成靜態(tài)文件
tar?-zcvf?public.tar?./public??#壓縮生成的靜態(tài)文件目錄
以上shell腳本就是關(guān)聯(lián)的git倉庫有了推送事件之后觸發(fā)的構(gòu)建腳本,也是我的hexo博客項(xiàng)目所需的構(gòu)建過程,同學(xué)們可以根據(jù)需要,編寫自己項(xiàng)目的構(gòu)建腳本
構(gòu)建后操作:

構(gòu)建后操作選擇send build artifacts over SSH 填寫要上傳到服務(wù)器的文件名稱(在構(gòu)建腳本最后一句:tar -zcvf public.tar ./public) 填寫上傳到服務(wù)器的路徑(這里的路徑是以Jenkins配置 Publish Over SSH 插件時(shí)的那個(gè)路徑為根目錄的,最終的路徑為docker-compose.yml中配置的Nginx下root目錄,比如這里我寫的是/yarbei/apps,上傳文件的實(shí)際的實(shí)際路徑為/root/yarbei/apps/public.tar,root目錄為/root/yarbei/apps/yarbeiweb,之后public.tar解壓替換yarbeiweb) 編寫文件上傳后的腳本
cd?/root/yarbei/apps??#進(jìn)入文件所在目錄
mv?yarbeiweb?yarbeiweb-$(date?+%Y%m%d-%H%M)?#將舊的文件夾更名備份
tar?zxvf?public.tar??#解壓public.tar
mv?public?yarbeiweb??#將解壓后的文件夾改名
rm?-rf?public.tar??#刪除壓縮包
至此,基于docker+Jenkins+Nginx實(shí)現(xiàn)的前端自動(dòng)部署功能就實(shí)現(xiàn)了

小結(jié)
其實(shí)這次的折騰是屬于意料之外的,源于雙十一的一次沖動(dòng)消費(fèi),不過經(jīng)過一番折騰也算有了一些收獲,作為一個(gè)前端工程師,我對(duì)服務(wù)器、運(yùn)維方面的知識(shí)儲(chǔ)備是比較少的,期間走了不少彎路,比如路徑問題,docker-compose的配置問題,在文中都有體現(xiàn)。至于為什么是docker,可能也是對(duì)Linux命令行的操作方式了解較少,不想因?yàn)樽约翰僮魇д`最終讓整個(gè)環(huán)境亂遭糟,到最終不可控。使用docker不僅能快速實(shí)施,而且能隔離環(huán)境,避免環(huán)境依賴。接下來就可以通過我自己的服務(wù)器訪問博客了,域名正在備案中????
本次部署大概步驟如下:
準(zhǔn)備環(huán)境 安裝docker 安裝docker-compose 安裝Jenkins和Nginx 編寫配置文件 配置Jenkins 配置Jenkins構(gòu)建任務(wù)
參考資料
juejin.cn)(https://juejin.cn/post/6844904111826010125#heading-7 https://www.jianshu.com/p/ca07a19d036a https://blog.csdn.net/fan_haha/article/details/110224311

往期推薦



最后
歡迎加我微信,拉你進(jìn)技術(shù)群,長期交流學(xué)習(xí)...
歡迎關(guān)注「前端Q」,認(rèn)真學(xué)前端,做個(gè)專業(yè)的技術(shù)人...


