保姆級指南：Jekins+Docker構(gòu)建部署React項(xiàng)目實(shí)戰(zhàn)
前置概念
CI的含義
CI 的意思是 持續(xù)構(gòu)建 。
負(fù)責(zé)拉取代碼庫中的代碼后，執(zhí)行用戶預(yù)置定義好的操作腳本，通過一系列編譯操作構(gòu)建出一個(gè) 制品 ，并將制品推送至到制品庫里面。常用工具有 Gitlab CI，Github CI，Jenkins 等。這個(gè)環(huán)節(jié)不參與部署，只負(fù)責(zé)構(gòu)建代碼，然后保存構(gòu)建物。構(gòu)建物被稱為 制品，保存制品的地方被稱為 制品庫。
CD的含義
CD 則有2層含義：持續(xù)部署(Continuous Deployment) 和 持續(xù)交付(Continuous Delivery) 。
持續(xù)交付 的概念是：將制品庫的制品拿出后，部署在測試環(huán)境 / 交付給客戶提前測試。持續(xù)部署 則是將制品部署在生產(chǎn)環(huán)境。
初始化環(huán)境
從現(xiàn)在開始，我們就要真正實(shí)操CI、CD啦，建議搞一臺新的服務(wù)器，避免搞亂環(huán)境，如果需要購買，可以參考文檔 保姆級指南：購買阿里云ecs服務(wù)器。無論是新買的還是自己電腦，電腦基礎(chǔ)環(huán)境如下
- docker
- git
- java：jenkins基于java環(huán)境
- jenkins
假定機(jī)器有了，基于centos，接下來我們就開始搭建服務(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
修改后需要重載所有修改過的配置文件
- sudo systemctl daemon-reload
- sudo systemctl restart docker
git安裝
- yum install git -y
此處需要對git進(jìn)行下初始化，即生成ssh公私鑰
- ssh-keygen -t rsa -C "你的郵箱"
生成成功后，公私鑰將存放在/.ssh/下，可以通過如下命令查看公鑰，將之配置在github或碼云這類平臺上從而使得對應(yīng)私鑰具有操作倉庫的權(quán)限
- cat ~/.ssh/id_rsa.pub
擴(kuò)展：可以通過如下命令獲取私鑰，此處并不需要，但在后期配置jenkins權(quán)限時(shí)需要，可以留意一下
- cat ~/.ssh/id_rsa
java安裝
- yum install -y java
安裝jenkins
關(guān)鍵時(shí)刻到來，需要先配置下配置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í)行如下命令通過清華大學(xué)地址下載
- wget https://mirrors.tuna.tsinghua.edu.cn/jenkins/war/latest/jenkins.war
到此，我們關(guān)于CI的最簡潔版環(huán)境也就搭建好啦
初識jenkins
啟動(dòng)jenkins服務(wù)
jenkins可以理解為就是一個(gè)java項(xiàng)目，目標(biāo)為提供一個(gè)面向軟件持續(xù)集成的軟件平臺，見下圖更為直觀
既然是一個(gè)項(xiàng)目，自然我們需要啟動(dòng)它從而啟動(dòng)一個(gè)服務(wù)，運(yùn)行如下命令啟動(dòng)jenkins
- systemctl start jenkins
如果想開機(jī)自啟動(dòng)，建議執(zhí)行下面這個(gè)命令
- systemctl enable jenkins
訪問jenkins服務(wù)
那如何驗(yàn)證自己是否成功呢?自然是訪問這個(gè)服務(wù)，jenkins默認(rèn)服務(wù)提供的端口為8080，在瀏覽器輸入ip:8080(如果是阿里云服務(wù)器，記得去配置安全組開放這個(gè)端口)，進(jìn)入Jenkins登錄頁面，如果出現(xiàn)如下界面，說明成功啦
初始化jenkins
接下來，我們來做一些第一次啟動(dòng)jenkins的初始化工作，如果是已經(jīng)用過的同學(xué)，可以直接跳過這一章;
首先，需要一個(gè)密碼，jenkins會(huì)在啟動(dòng)時(shí)將密碼寫入指定目錄下，去cat一下復(fù)制粘貼就好
新手入門：安裝插件直接安裝推薦的插件就好，但是點(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
新手入門：配置用戶
配置地址，這個(gè)一般直接下一步就好
如果出現(xiàn)下面這種界面，說明你初始化工作完成啦，開始enjoy your jenkins吧!
應(yīng)用jenkins
既然是【面向軟件持續(xù)集成的軟件平臺】，自然需要做到如下兩點(diǎn)
- 如git、node、nginx等多應(yīng)用的集成
- 將多個(gè)應(yīng)用的工作集成在一個(gè)任務(wù)中，jenkins管控內(nèi)部細(xì)節(jié)
這就意味著jenkins是以任務(wù)為單元的
應(yīng)用案例：設(shè)定通過docker下載node的任務(wù)
讓我們以查看docker版本和通過docker下拉node鏡像為例，新建一個(gè)任務(wù)，其實(shí)就是執(zhí)行如下命令，只不是我們希望通過jenkins去管控，因?yàn)檫@樣就代表以后一些復(fù)雜的腳本也可以通過任務(wù)的形式去自動(dòng)化執(zhí)行了
- docker -v
- docker pull node:latest
首先新建一個(gè)任務(wù)
添加要執(zhí)行的腳本
構(gòu)建任務(wù)
這時(shí)我們就完成任務(wù)的新建了，接下來我們開始構(gòu)建這個(gè)任務(wù)吧!
先返回項(xiàng)目詳情，然后點(diǎn)擊立即構(gòu)建，最后進(jìn)入構(gòu)建任務(wù)詳情去看下日志，如果最后輸出為STATUS:SUCCESS，說明成功啦
補(bǔ)充：如果出現(xiàn)下面這個(gè)失敗報(bào)錯(cuò)，說明是【jenkins】這個(gè)用戶沒有權(quán)限去訪問docker這個(gè)服務(wù)，所以我們需要將用戶添加進(jìn)這個(gè)服務(wù)對應(yīng)的組中
執(zhí)行如下命令
- gpasswd -a jenkins docker
然后更新下即可
- newgrp docker
應(yīng)用案例：編譯react項(xiàng)目
接下來，我們來實(shí)操一下，目標(biāo)很簡單：讓jenkins幫我們做到如下幾步
- 執(zhí)行構(gòu)建命令處理一個(gè)存儲在git或碼云上的react項(xiàng)目，會(huì)生成一個(gè)build目錄
- 啟動(dòng)一個(gè)nginx服務(wù)，再把這個(gè)build下的內(nèi)容移動(dòng)到nginx的靜態(tài)文件目錄下
這樣服務(wù)器上就有了對應(yīng)的服務(wù)，我們可以直接訪問nginx服務(wù)端口從而訪問項(xiàng)目，就可以做到對一個(gè)項(xiàng)目自動(dòng)構(gòu)建、自動(dòng)部署提供服務(wù)，等后期接入了git或碼云上傳的鉤子后，我們就可以實(shí)現(xiàn)自動(dòng)化集成或自動(dòng)化部署啦，這其實(shí)也就是我們說的CICD。
搭建node環(huán)境
要想編譯react項(xiàng)目，起碼得在jenkins服務(wù)中存在node服務(wù)，而這個(gè)服務(wù)是通過插件的形式提供的，大致思路為：
- 先進(jìn)行node插件的下載
- 安裝完插件后，全局配置中心就會(huì)出現(xiàn)對應(yīng)的服務(wù)，我們選擇指定版本后啟動(dòng)
這樣就實(shí)現(xiàn)了jenkins中提供對應(yīng)node服務(wù)的需求。知道了思路，那我們就開始實(shí)現(xiàn)吧!
首先，我們需要先進(jìn)行node插件的下載
等待安裝重啟完成
然后，我們需要在jenkins全局配置中添加node
先找到系統(tǒng)全局配置
安裝指定版本，選擇從鏡像中安裝
此時(shí)我們就有了node環(huán)境啦
測試node環(huán)境
接下來，我們在執(zhí)行任務(wù)時(shí)應(yīng)用我們創(chuàng)建的node環(huán)境，先創(chuàng)建一個(gè)任務(wù)，流程同之前，唯一不同的是在最后一步需要選擇node環(huán)境，選擇我們自己的版本即可
我們在任務(wù)中執(zhí)行如下腳本
- node -v
執(zhí)行任務(wù)
看到狀態(tài)為SUCCESS并且輸出了node的版本，說明搭建node環(huán)境成功啦
創(chuàng)建react項(xiàng)目
接著，我們在本地創(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
如果之前沒有安裝過這個(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)資源目錄下，然后通過nginx提供服務(wù)，那自然我們需要接入nginx服務(wù)，先實(shí)現(xiàn)nginx的配置文件
創(chuàng)建對應(yīng)文件
- mkdir conf && vi conf/default.conf
指定靜態(tài)資源目錄
default.conf文件內(nèi)容
- server {
- listen 80;
- server_name _;
- root /etc/nginx/html;
- }
此處我們通過docker提供nginx服務(wù)，涉及到移動(dòng)目錄、配置自定義配置文件等動(dòng)作，我們需要自定義鏡像，這就需要我們?nèi)?shí)現(xiàn)自己的Dockerfile
創(chuàng)建對應(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)端倉庫，推送下就可以啦，看下現(xiàn)在的目錄樹
- .
- ├── 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對倉庫的權(quán)限
假定我們拿到了倉庫的ssh地址，那就進(jìn)入我們jenkins任務(wù)的配置頁，添加。
這時(shí)它會(huì)提示沒有權(quán)限
原因很簡單，本機(jī)的公私鑰對，將公鑰配在碼云上，自然本機(jī)有操作遠(yuǎn)程倉庫的權(quán)限，但jenkins服務(wù)器上是沒有私鑰的，所有我們需要在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ù)器，注意在控制臺開放端口)
- #!/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
腳本添加位置如圖
至此，我們的配置工作就大功告成，再接再厲，開始構(gòu)建!
構(gòu)建任務(wù)
和之前沒啥差別，返回任務(wù)詳情，點(diǎn)擊立即構(gòu)建即可
當(dāng)開始構(gòu)建時(shí)，可以去查看構(gòu)建任務(wù)詳情，從而確定是否成功
成功的話，嘗試訪問下服務(wù)
- 【ip:3000】
如果能出現(xiàn)如下react服務(wù)界面，說明成功啦!
