自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

保姆級指南：Jekins+Docker構(gòu)建部署React項目實戰(zhàn)

作者：王志遠
開發(fā) 項目管理
負責拉取代碼庫中的代碼后，執(zhí)行用戶預(yù)置定義好的操作腳本，通過一系列編譯操作構(gòu)建出一個 制品 ，并將制品推送至到制品庫里面。

前置概念

CI的含義

CI 的意思是 持續(xù)構(gòu)建 。

負責拉取代碼庫中的代碼后，執(zhí)行用戶預(yù)置定義好的操作腳本，通過一系列編譯操作構(gòu)建出一個 制品 ，并將制品推送至到制品庫里面。常用工具有 Gitlab CI，Github CI，Jenkins 等。這個環(huán)節(jié)不參與部署，只負責構(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)在開始，我們就要真正實操CI、CD啦，建議搞一臺新的服務(wù)器，避免搞亂環(huán)境，如果需要購買，可以參考文檔 保姆級指南：購買阿里云ecs服務(wù)器。無論是新買的還是自己電腦，電腦基礎(chǔ)環(huán)境如下

  • docker
  • git
  • java：jenkins基于java環(huán)境
  • jenkins

假定機器有了，基于centos，接下來我們就開始搭建服務(wù)吧

docker安裝

  1. yum install -y yum-utils device-mapper-persistent-data lvm2 
  2. sudo yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 
  3. yum install docker-ce -y 
  4. systemctl start docker 
  5. systemctl enable docker 

此處需要配置下docker鏡像源為阿里云，不然之后docker下載鏡像等操作都會巨慢

  1. sudo mkdir -p /etc/docker 
  2. sudo tee /etc/docker/daemon.json <<-'EOF' 
  3. { 
  4.   "registry-mirrors": ["https://fwvjnv59.mirror.aliyuncs.com"] 
  5. } 
  6. EOF 

修改后需要重載所有修改過的配置文件

  1. sudo systemctl daemon-reload 
  2. sudo systemctl restart docker 

git安裝

  1. yum install git -y 

此處需要對git進行下初始化，即生成ssh公私鑰

  1. ssh-keygen -t rsa -C "你的郵箱" 

生成成功后，公私鑰將存放在/.ssh/下，可以通過如下命令查看公鑰，將之配置在github或碼云這類平臺上從而使得對應(yīng)私鑰具有操作倉庫的權(quán)限

  1. cat ~/.ssh/id_rsa.pub  

擴展：可以通過如下命令獲取私鑰，此處并不需要，但在后期配置jenkins權(quán)限時需要，可以留意一下

  1. cat ~/.ssh/id_rsa  

java安裝

  1. yum install -y java 

安裝jenkins

關(guān)鍵時刻到來，需要先配置下配置jenkins的yum源

  1. [root@jenkins ~]# wget -O /etc/yum.repos.d/jenkins.repo https://pkg.jenkins.io/redhat-stable/jenkins.repo 
  2. [root@jenkins ~]# rpm --import https://pkg.jenkins.io/redhat-stable/jenkins.io.key 

然后進行下載即可

  1. yum install jenkins -y 

如果很慢，直接ctrl+c中止原命令，執(zhí)行如下命令通過清華大學地址下載

  1. wget https://mirrors.tuna.tsinghua.edu.cn/jenkins/war/latest/jenkins.war 

到此，我們關(guān)于CI的最簡潔版環(huán)境也就搭建好啦

初識jenkins

啟動jenkins服務(wù)

jenkins可以理解為就是一個java項目，目標為提供一個面向軟件持續(xù)集成的軟件平臺，見下圖更為直觀

既然是一個項目，自然我們需要啟動它從而啟動一個服務(wù)，運行如下命令啟動jenkins

  1. systemctl start jenkins 

如果想開機自啟動，建議執(zhí)行下面這個命令

  1. systemctl enable jenkins 

訪問jenkins服務(wù)

那如何驗證自己是否成功呢?自然是訪問這個服務(wù)，jenkins默認服務(wù)提供的端口為8080，在瀏覽器輸入ip:8080(如果是阿里云服務(wù)器，記得去配置安全組開放這個端口)，進入Jenkins登錄頁面，如果出現(xiàn)如下界面，說明成功啦

 

初始化jenkins

接下來，我們來做一些第一次啟動jenkins的初始化工作，如果是已經(jīng)用過的同學，可以直接跳過這一章;

首先，需要一個密碼，jenkins會在啟動時將密碼寫入指定目錄下，去cat一下復(fù)制粘貼就好

新手入門：安裝插件直接安裝推薦的插件就好，但是點擊前需要先去更改下jenkins插件的鏡像，不然會巨慢

  1. 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 

 

新手入門：配置用戶

配置地址，這個一般直接下一步就好

如果出現(xiàn)下面這種界面，說明你初始化工作完成啦，開始enjoy your jenkins吧!

應(yīng)用jenkins

既然是【面向軟件持續(xù)集成的軟件平臺】，自然需要做到如下兩點

  • 如git、node、nginx等多應(yīng)用的集成
  • 將多個應(yīng)用的工作集成在一個任務(wù)中，jenkins管控內(nèi)部細節(jié)

這就意味著jenkins是以任務(wù)為單元的

應(yīng)用案例：設(shè)定通過docker下載node的任務(wù)

讓我們以查看docker版本和通過docker下拉node鏡像為例，新建一個任務(wù)，其實就是執(zhí)行如下命令，只不是我們希望通過jenkins去管控，因為這樣就代表以后一些復(fù)雜的腳本也可以通過任務(wù)的形式去自動化執(zhí)行了

  1. docker -v 
  2. docker pull node:latest 

首先新建一個任務(wù)

添加要執(zhí)行的腳本

構(gòu)建任務(wù)

這時我們就完成任務(wù)的新建了，接下來我們開始構(gòu)建這個任務(wù)吧!

先返回項目詳情，然后點擊立即構(gòu)建，最后進入構(gòu)建任務(wù)詳情去看下日志，如果最后輸出為STATUS:SUCCESS，說明成功啦

補充：如果出現(xiàn)下面這個失敗報錯，說明是【jenkins】這個用戶沒有權(quán)限去訪問docker這個服務(wù)，所以我們需要將用戶添加進這個服務(wù)對應(yīng)的組中

執(zhí)行如下命令

  1. gpasswd -a jenkins docker 

然后更新下即可

  1. newgrp docker 

應(yīng)用案例：編譯react項目

接下來，我們來實操一下，目標很簡單：讓jenkins幫我們做到如下幾步

  1. 執(zhí)行構(gòu)建命令處理一個存儲在git或碼云上的react項目，會生成一個build目錄
  2. 啟動一個nginx服務(wù)，再把這個build下的內(nèi)容移動到nginx的靜態(tài)文件目錄下

這樣服務(wù)器上就有了對應(yīng)的服務(wù)，我們可以直接訪問nginx服務(wù)端口從而訪問項目，就可以做到對一個項目自動構(gòu)建、自動部署提供服務(wù)，等后期接入了git或碼云上傳的鉤子后，我們就可以實現(xiàn)自動化集成或自動化部署啦，這其實也就是我們說的CICD。

搭建node環(huán)境

要想編譯react項目，起碼得在jenkins服務(wù)中存在node服務(wù)，而這個服務(wù)是通過插件的形式提供的，大致思路為：

  1. 先進行node插件的下載
  2. 安裝完插件后，全局配置中心就會出現(xiàn)對應(yīng)的服務(wù)，我們選擇指定版本后啟動

這樣就實現(xiàn)了jenkins中提供對應(yīng)node服務(wù)的需求。知道了思路，那我們就開始實現(xiàn)吧!

首先，我們需要先進行node插件的下載

等待安裝重啟完成

然后，我們需要在jenkins全局配置中添加node

先找到系統(tǒng)全局配置

安裝指定版本，選擇從鏡像中安裝

此時我們就有了node環(huán)境啦

測試node環(huán)境

接下來，我們在執(zhí)行任務(wù)時應(yīng)用我們創(chuàng)建的node環(huán)境，先創(chuàng)建一個任務(wù)，流程同之前，唯一不同的是在最后一步需要選擇node環(huán)境，選擇我們自己的版本即可

我們在任務(wù)中執(zhí)行如下腳本

  1. node -v 

 

執(zhí)行任務(wù)

看到狀態(tài)為SUCCESS并且輸出了node的版本，說明搭建node環(huán)境成功啦

創(chuàng)建react項目

接著，我們在本地創(chuàng)建一個react項目(假定名字為ci-pro)并上傳到碼云，這個我們直接在本機上初始化下，然后推送到碼云上就好;

使用腳手架

npm版本6+可直接執(zhí)行

  1. npx create-react-app ci-pro 

或者版本低，就得本地安裝執(zhí)行了

  1. create-react-app ci-pro 

如果之前沒有安裝過這個腳手架，需要先執(zhí)行下面這個命令進行安裝

  1. npm install -g create-react-app 

等待安裝完成了，我們就會有如下目錄結(jié)構(gòu)

  1. . 
  2. ├── README.md 
  3. ├── package.json 
  4. ├── public 
  5. │   ├── favicon.ico 
  6. │   ├── index.html 
  7. │   ├── logo192.png 
  8. │   ├── logo512.png 
  9. │   ├── manifest.json 
  10. │   └── robots.txt 
  11. ├── src 
  12. │   ├── App.css 
  13. │   ├── App.js 
  14. │   ├── App.test.js 
  15. │   ├── index.css 
  16. │   ├── index.js 
  17. │   ├── logo.svg 
  18. │   ├── reportWebVitals.js 
  19. │   └── setupTests.js 
  20. └── yarn.lock 

接入nginx

根據(jù)之前的思路，我們需要在項目編譯后將產(chǎn)物放在nginx的靜態(tài)資源目錄下，然后通過nginx提供服務(wù)，那自然我們需要接入nginx服務(wù)，先實現(xiàn)nginx的配置文件

創(chuàng)建對應(yīng)文件

  1. mkdir conf && vi conf/default.conf 

指定靜態(tài)資源目錄

default.conf文件內(nèi)容

  1. server { 
  2.     listen 80; 
  3.     server_name _; 
  4.     root /etc/nginx/html; 
  5. } 

此處我們通過docker提供nginx服務(wù)，涉及到移動目錄、配置自定義配置文件等動作，我們需要自定義鏡像，這就需要我們?nèi)崿F(xiàn)自己的Dockerfile

創(chuàng)建對應(yīng)文件

  1. vi Dockerfile 

做到如下兩點：

  1. 將jenkins執(zhí)行打包命令后產(chǎn)生的build目錄移到nginx的靜態(tài)資源目錄下
  2. 指定自定義的配置文件
  1. FROM nginx:1.15 
  2. COPY build /etc/nginx/html 
  3. COPY conf /etc/nginx 

至此，我們就完成了本地項目的搭建，再關(guān)聯(lián)下遠端倉庫，推送下就可以啦，看下現(xiàn)在的目錄樹

  1. . 
  2. ├── Dockerfile 
  3. ├── README.md 
  4. ├── conf 
  5. │   └── default.conf 
  6. ├── package.json 
  7. ├── public 
  8. │   ├── favicon.ico 
  9. │   ├── index.html 
  10. │   ├── logo192.png 
  11. │   ├── logo512.png 
  12. │   ├── manifest.json 
  13. │   └── robots.txt 
  14. ├── src 
  15. │   ├── App.css 
  16. │   ├── App.js 
  17. │   ├── App.test.js 
  18. │   ├── index.css 
  19. │   ├── index.js 
  20. │   ├── logo.svg 
  21. │   ├── reportWebVitals.js 
  22. │   └── setupTests.js 
  23. └── yarn.lock 

配置jenkins對倉庫的權(quán)限

假定我們拿到了倉庫的ssh地址，那就進入我們jenkins任務(wù)的配置頁，添加。

這時它會提示沒有權(quán)限

原因很簡單，本機的公私鑰對，將公鑰配在碼云上，自然本機有操作遠程倉庫的權(quán)限，但jenkins服務(wù)器上是沒有私鑰的，所有我們需要在jenkins中配置私鑰從而獲取權(quán)限，在哪配置呢?

  1. 配置 => 源碼管理 => Git => Repositories -> Credentials => 添加 => SSH Username with private key 

關(guān)于獲取私鑰的方式，可以查看git安裝模塊內(nèi)容

到此，我們就完成了jenkins關(guān)于git的配置

配置腳本

回到j(luò)enkins，配置在構(gòu)建任務(wù)時要執(zhí)行的腳本，要做到如下兩點

  1. 安裝依賴，進行項目構(gòu)建
  2. 執(zhí)行Dockerfile文件生成鏡像
  3. 根據(jù)新鏡像啟動服務(wù)(為避免端口沖突，先關(guān)閉掉鏡像下所有服務(wù))

腳本內(nèi)容如下(如果是云服務(wù)器，注意在控制臺開放端口)

  1. #!/bin/sh 
  2.  
  3. npm install --registry=https://registry.npm.taobao.org 
  4. npm run build 
  5. docker build -t react-project . 
  6. docker kill $( docker ps  | awk '/ci-project/ {print $1}') 
  7. docker run -d -p 3000:80 ci-project 

腳本添加位置如圖

至此，我們的配置工作就大功告成，再接再厲，開始構(gòu)建!

構(gòu)建任務(wù)

和之前沒啥差別，返回任務(wù)詳情，點擊立即構(gòu)建即可

當開始構(gòu)建時，可以去查看構(gòu)建任務(wù)詳情，從而確定是否成功

成功的話，嘗試訪問下服務(wù)

  1. 【ip:3000】 

如果能出現(xiàn)如下react服務(wù)界面，說明成功啦!

 

責任編輯：姜華 來源： 微醫(yī)大前端技術(shù)
JekinsDockerReact
相關(guān)推薦

2022-09-06 10:39:38

Docker鏡像構(gòu)建

2022-09-02 16:59:13

Kubernetes高可用Linux

2022-12-12 11:09:21

企業(yè)技術(shù)采購IT

2023-11-27 00:18:38

2023-05-29 07:39:49

2023-06-26 00:07:14

2021-01-13 09:34:45

項目Gson框架

2023-09-28 08:01:32

2025-03-06 11:07:27

2023-10-23 00:06:29

2025-02-24 00:00:09

2024-01-30 13:53:40

前端性能Chrome

2021-05-17 09:27:07

項目實戰(zhàn)優(yōu)化項目構(gòu)建時間

2025-03-10 00:00:00

2022-11-22 10:52:00

云計算工具

2022-05-13 10:02:40

vscode插件搜索

2021-01-15 09:30:02

Tomcat ApacheJavaServer

2023-04-14 11:04:43

2024-01-30 08:58:22

JenkinsGit流程

2024-03-01 19:53:37

PyBuilderPython開發(fā)
點贊
收藏

51CTO技術(shù)棧公眾號