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