保姆級(jí)指南：jekins+docker構(gòu)建部署react項(xiàng)目實(shí)戰(zhàn)
王志遠(yuǎn)，微醫(yī)前端技術(shù)部醫(yī)療支撐組
前置概念
CI的含義
CI 的意思是 持續(xù)構(gòu)建 。
負(fù)責(zé)拉取代碼庫(kù)中的代碼后，執(zhí)行用戶預(yù)置定義好的操作腳本，通過(guò)一系列編譯操作構(gòu)建出一個(gè) 制品 ，并將制品推送至到制品庫(kù)里面。常用工具有 Gitlab CI，Github CI，Jenkins 等。這個(gè)環(huán)節(jié)不參與部署，只負(fù)責(zé)構(gòu)建代碼，然后保存構(gòu)建物。構(gòu)建物被稱為 制品，保存制品的地方被稱為 制品庫(kù)。
CD的含義
CD 則有2層含義：持續(xù)部署（Continuous Deployment） 和 持續(xù)交付（Continuous Delivery） 。
持續(xù)交付 的概念是：將制品庫(kù)的制品拿出后，部署在測(cè)試環(huán)境 / 交付給客戶提前測(cè)試。持續(xù)部署 則是將制品部署在生產(chǎn)環(huán)境。
初始化環(huán)境
從現(xiàn)在開(kāi)始，我們就要真正實(shí)操CI、CD啦，建議搞一臺(tái)新的服務(wù)器，避免搞亂環(huán)境，如果需要購(gòu)買(mǎi)，可以參考文檔 保姆級(jí)指南：購(gòu)買(mǎi)阿里云ecs服務(wù)器。無(wú)論是新買(mǎi)的還是自己電腦，電腦基礎(chǔ)環(huán)境如下
docker git java：jenkins基于java環(huán)境 jenkins
假定機(jī)器有了，基于centos，接下來(lái)我們就開(kāi)始搭建服務(wù)吧
docker安裝
yum?install?-y?yum-utils?device-mapper-persistent-data?lvm2
sudo?yum-config-manager?--add-repo?http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
yum?install?docker-ce?-y
systemctl?start?docker
systemctl?enable?docker
此處需要配置下docker鏡像源為阿里云，不然之后docker下載鏡像等操作都會(huì)巨慢
sudo?mkdir?-p?/etc/docker
sudo?tee?/etc/docker/daemon.json?<<-'EOF'
{
??"registry-mirrors":?["https://fwvjnv59.mirror.aliyuncs.com"]
}
EOF
修改后需要重載所有修改過(guò)的配置文件
sudo?systemctl?daemon-reload
sudo?systemctl?restart?docker
git安裝
yum?install?git?-y
此處需要對(duì)git進(jìn)行下初始化，即生成ssh公私鑰
ssh-keygen?-t?rsa?-C?"你的郵箱"
生成成功后，公私鑰將存放在/.ssh/下，可以通過(guò)如下命令查看公鑰，將之配置在github或碼云這類平臺(tái)上從而使得對(duì)應(yīng)私鑰具有操作倉(cāng)庫(kù)的權(quán)限
cat?~/.ssh/id_rsa.pub?
擴(kuò)展：可以通過(guò)如下命令獲取私鑰，此處并不需要，但在后期配置jenkins權(quán)限時(shí)需要，可以留意一下
cat?~/.ssh/id_rsa?
java安裝
yum?install?-y?java
安裝jenkins
關(guān)鍵時(shí)刻到來(lái)，需要先配置下配置jenkins的yum源
[root@jenkins?~]#?wget?-O?/etc/yum.repos.d/jenkins.repo?https://pkg.jenkins.io/redhat-stable/jenkins.repo
[root@jenkins?~]#?rpm?--import?https://pkg.jenkins.io/redhat-stable/jenkins.io.key
然后進(jìn)行下載即可
yum?install?jenkins?-y
如果很慢，直接ctrl+c中止原命令，執(zhí)行如下命令通過(guò)清華大學(xué)地址下載
wget?https://mirrors.tuna.tsinghua.edu.cn/jenkins/war/latest/jenkins.war
到此，我們關(guān)于CI的最簡(jiǎn)潔版環(huán)境也就搭建好啦
初識(shí)jenkins
啟動(dòng)jenkins服務(wù)
jenkins可以理解為就是一個(gè)java項(xiàng)目，目標(biāo)為提供一個(gè)面向軟件持續(xù)集成的軟件平臺(tái)，見(jiàn)下圖更為直觀
既然是一個(gè)項(xiàng)目，自然我們需要啟動(dòng)它從而啟動(dòng)一個(gè)服務(wù)，運(yùn)行如下命令啟動(dòng)jenkins
systemctl?start?jenkins
如果想開(kāi)機(jī)自啟動(dòng)，建議執(zhí)行下面這個(gè)命令
systemctl?enable?jenkins
訪問(wèn)jenkins服務(wù)
那如何驗(yàn)證自己是否成功呢？自然是訪問(wèn)這個(gè)服務(wù)，jenkins默認(rèn)服務(wù)提供的端口為8080，在瀏覽器輸入ip:8080（如果是阿里云服務(wù)器，記得去配置安全組開(kāi)放這個(gè)端口），進(jìn)入Jenkins登錄頁(yè)面，如果出現(xiàn)如下界面，說(shuō)明成功啦
初始化jenkins
接下來(lái)，我們來(lái)做一些第一次啟動(dòng)jenkins的初始化工作，如果是已經(jīng)用過(guò)的同學(xué)，可以直接跳過(guò)這一章；
首先，需要一個(gè)密碼，jenkins會(huì)在啟動(dòng)時(shí)將密碼寫(xiě)入指定目錄下，去cat一下復(fù)制粘貼就好
新手入門(mén)：安裝插件
直接安裝推薦的插件就好，但是點(diǎn)擊前需要先去更改下jenkins插件的鏡像，不然會(huì)巨慢
sed?-i?'s/http:\/\/updates.jenkins-ci.org\/download/https:\/\/mirrors.tuna.tsinghua.edu.cn\/jenkins/g'?/var/lib/jenkins/updates/default.json?&&?sed?-i?'s/http:\/\/www.google.com/https:\/\/www.baidu.com/g'?/var/lib/jenkins/updates/default.json
新手入門(mén)：配置用戶
配置地址，這個(gè)一般直接下一步就好
如果出現(xiàn)下面這種界面，說(shuō)明你初始化工作完成啦，開(kāi)始enjoy your jenkins吧！
應(yīng)用jenkins
既然是【面向軟件持續(xù)集成的軟件平臺(tái)】，自然需要做到如下兩點(diǎn)
如git、node、nginx等多應(yīng)用的集成 將多個(gè)應(yīng)用的工作集成在一個(gè)任務(wù)中，jenkins管控內(nèi)部細(xì)節(jié)
這就意味著jenkins是以任務(wù)為單元的
應(yīng)用案例：設(shè)定通過(guò)docker下載node的任務(wù)
讓我們以查看docker版本和通過(guò)docker下拉node鏡像為例，新建一個(gè)任務(wù)，其實(shí)就是執(zhí)行如下命令，只不是我們希望通過(guò)jenkins去管控，因?yàn)檫@樣就代表以后一些復(fù)雜的腳本也可以通過(guò)任務(wù)的形式去自動(dòng)化執(zhí)行了
docker?-v
docker?pull?node:latest
首先新建一個(gè)任務(wù)
添加要執(zhí)行的腳本
構(gòu)建任務(wù)
這時(shí)我們就完成任務(wù)的新建了，接下來(lái)我們開(kāi)始構(gòu)建這個(gè)任務(wù)吧！
先返回項(xiàng)目詳情，然后點(diǎn)擊立即構(gòu)建，最后進(jìn)入構(gòu)建任務(wù)詳情去看下日志，如果最后輸出為STATUS:SUCCESS，說(shuō)明成功啦
補(bǔ)充：如果出現(xiàn)下面這個(gè)失敗報(bào)錯(cuò)，說(shuō)明是【jenkins】這個(gè)用戶沒(méi)有權(quán)限去訪問(wèn)docker這個(gè)服務(wù)，所以我們需要將用戶添加進(jìn)這個(gè)服務(wù)對(duì)應(yīng)的組中
執(zhí)行如下命令
gpasswd?-a?jenkins?docker
然后更新下即可
newgrp?docker
應(yīng)用案例：編譯react項(xiàng)目
接下來(lái)，我們來(lái)實(shí)操一下，目標(biāo)很簡(jiǎn)單：讓jenkins幫我們做到如下幾步
執(zhí)行構(gòu)建命令處理一個(gè)存儲(chǔ)在git或碼云上的react項(xiàng)目，會(huì)生成一個(gè) build目錄啟動(dòng)一個(gè)nginx服務(wù)，再把這個(gè) build下的內(nèi)容移動(dòng)到nginx的靜態(tài)文件目錄下
這樣服務(wù)器上就有了對(duì)應(yīng)的服務(wù)，我們可以直接訪問(wèn)nginx服務(wù)端口從而訪問(wèn)項(xiàng)目，就可以做到對(duì)一個(gè)項(xiàng)目自動(dòng)構(gòu)建、自動(dòng)部署提供服務(wù)，等后期接入了git或碼云上傳的鉤子后，我們就可以實(shí)現(xiàn)自動(dòng)化集成或自動(dòng)化部署啦，這其實(shí)也就是我們說(shuō)的CICD。
搭建node環(huán)境
要想編譯react項(xiàng)目，起碼得在jenkins服務(wù)中存在node服務(wù)，而這個(gè)服務(wù)是通過(guò)插件的形式提供的，大致思路為：
先進(jìn)行node插件的下載 安裝完插件后，全局配置中心就會(huì)出現(xiàn)對(duì)應(yīng)的服務(wù)，我們選擇指定版本后啟動(dòng)
這樣就實(shí)現(xiàn)了jenkins中提供對(duì)應(yīng)node服務(wù)的需求。知道了思路，那我們就開(kāi)始實(shí)現(xiàn)吧！
首先，我們需要先進(jìn)行node插件的下載
等待安裝重啟完成
然后，我們需要在jenkins全局配置中添加node
先找到系統(tǒng)全局配置
安裝指定版本，選擇從鏡像中安裝
此時(shí)我們就有了node環(huán)境啦
測(cè)試node環(huán)境
接下來(lái)，我們?cè)趫?zhí)行任務(wù)時(shí)應(yīng)用我們創(chuàng)建的node環(huán)境，先創(chuàng)建一個(gè)任務(wù)，流程同之前，唯一不同的是在最后一步需要選擇node環(huán)境，選擇我們自己的版本即可
我們?cè)谌蝿?wù)中執(zhí)行如下腳本
node?-v
執(zhí)行任務(wù)
看到狀態(tài)為SUCCESS并且輸出了node的版本，說(shuō)明搭建node環(huán)境成功啦
創(chuàng)建react項(xiàng)目
接著，我們?cè)诒镜貏?chuàng)建一個(gè)react項(xiàng)目（假定名字為ci-pro）并上傳到碼云，這個(gè)我們直接在本機(jī)上初始化下，然后推送到碼云上就好；
使用腳手架
npm版本6+可直接執(zhí)行
npx?create-react-app?ci-pro
或者版本低，就得本地安裝執(zhí)行了
create-react-app?ci-pro
如果之前沒(méi)有安裝過(guò)這個(gè)腳手架，需要先執(zhí)行下面這個(gè)命令進(jìn)行安裝
npm?install?-g?create-react-app
等待安裝完成了，我們就會(huì)有如下目錄結(jié)構(gòu)
.
├──?README.md
├──?package.json
├──?public
│???├──?favicon.ico
│???├──?index.html
│???├──?logo192.png
│???├──?logo512.png
│???├──?manifest.json
│???└──?robots.txt
├──?src
│???├──?App.css
│???├──?App.js
│???├──?App.test.js
│???├──?index.css
│???├──?index.js
│???├──?logo.svg
│???├──?reportWebVitals.js
│???└──?setupTests.js
└──?yarn.lock
接入nginx
根據(jù)之前的思路，我們需要在項(xiàng)目編譯后將產(chǎn)物放在nginx的靜態(tài)資源目錄下，然后通過(guò)nginx提供服務(wù)，那自然我們需要接入nginx服務(wù)，先實(shí)現(xiàn)nginx的配置文件
創(chuàng)建對(duì)應(yīng)文件
mkdir?conf?&&?vi?conf/default.conf
指定靜態(tài)資源目錄
default.conf文件內(nèi)容
server {
listen 80;
server_name _;
root /etc/nginx/html;
}
此處我們通過(guò)docker提供nginx服務(wù)，涉及到移動(dòng)目錄、配置自定義配置文件等動(dòng)作，我們需要自定義鏡像，這就需要我們?nèi)?shí)現(xiàn)自己的Dockerfile
創(chuàng)建對(duì)應(yīng)文件
vi?Dockerfile
做到如下兩點(diǎn)：
將jenkins執(zhí)行打包命令后產(chǎn)生的 build目錄移到nginx的靜態(tài)資源目錄下指定自定義的配置文件
FROM?nginx:1.15
COPY?build?/etc/nginx/html
COPY?conf?/etc/nginx
至此，我們就完成了本地項(xiàng)目的搭建，再關(guān)聯(lián)下遠(yuǎn)端倉(cāng)庫(kù)，推送下就可以啦，看下現(xiàn)在的目錄樹(shù)
.
├──?Dockerfile
├──?README.md
├──?conf
│???└──?default.conf
├──?package.json
├──?public
│???├──?favicon.ico
│???├──?index.html
│???├──?logo192.png
│???├──?logo512.png
│???├──?manifest.json
│???└──?robots.txt
├──?src
│???├──?App.css
│???├──?App.js
│???├──?App.test.js
│???├──?index.css
│???├──?index.js
│???├──?logo.svg
│???├──?reportWebVitals.js
│???└──?setupTests.js
└──?yarn.lock
配置jenkins對(duì)倉(cāng)庫(kù)的權(quán)限
假定我們拿到了倉(cāng)庫(kù)的ssh地址，那就進(jìn)入我們jenkins任務(wù)的配置頁(yè)，添加。
這時(shí)它會(huì)提示沒(méi)有權(quán)限
原因很簡(jiǎn)單，本機(jī)的公私鑰對(duì)，將公鑰配在碼云上，自然本機(jī)有操作遠(yuǎn)程倉(cāng)庫(kù)的權(quán)限，但jenkins服務(wù)器上是沒(méi)有私鑰的，所有我們需要在jenkins中配置私鑰從而獲取權(quán)限，在哪配置呢？
配置?=>?源碼管理?=>?Git?=>?Repositories?->?Credentials?=>?添加?=>?SSH?Username?with?private?key
關(guān)于獲取私鑰的方式，可以查看git安裝模塊內(nèi)容
到此，我們就完成了jenkins關(guān)于git的配置
配置腳本
回到j(luò)enkins，配置在構(gòu)建任務(wù)時(shí)要執(zhí)行的腳本，要做到如下兩點(diǎn)
安裝依賴，進(jìn)行項(xiàng)目構(gòu)建 執(zhí)行 Dockerfile文件生成鏡像根據(jù)新鏡像啟動(dòng)服務(wù)（為避免端口沖突，先關(guān)閉掉鏡像下所有服務(wù)）
腳本內(nèi)容如下（如果是云服務(wù)器，注意在控制臺(tái)開(kāi)放端口）
#!/bin/sh
npm?install?--registry=https://registry.npm.taobao.org
npm?run?build
docker?build?-t?react-project?.
docker?kill?$(?docker?ps??|?awk?'/ci-project/?{print?$1}')
docker?run?-d?-p?3000:80?ci-project
腳本添加位置如圖
至此，我們的配置工作就大功告成，再接再厲，開(kāi)始構(gòu)建！
構(gòu)建任務(wù)
和之前沒(méi)啥差別，返回任務(wù)詳情，點(diǎn)擊立即構(gòu)建即可
當(dāng)開(kāi)始構(gòu)建時(shí)，可以去查看構(gòu)建任務(wù)詳情，從而確定是否成功
成功的話，嘗試訪問(wèn)下服務(wù)
【ip:3000】
如果能出現(xiàn)如下react服務(wù)界面，說(shuō)明成功啦！
前往微醫(yī)互聯(lián)網(wǎng)醫(yī)院在線診療平臺(tái)，快速問(wèn)診，3分鐘為你找到三甲醫(yī)生。(https://wy.guahao.com/?channel=influence)