使用Jenkins部署React項目的方法步驟
背景
公司的前端項目部署方式比較簡單，整個過程基本上是手動的；
目標(biāo)
通過工具實現(xiàn)以下幾個任務(wù)：
- 編譯、部署自動化；
- 選擇指定版本進(jìn)行回滾；
- 區(qū)分不同的分支（環(huán)境）；
技術(shù)方案
- 選用 jenkins 作為部署工具；也便于后續(xù) CI 的接入；
- 使用 docker 進(jìn)行編譯，確保每次編譯的環(huán)境的穩(wěn)定；
步驟
步驟一：搭建 Jenkins
搭建 Jenkins 有很多方案，這里選擇使用 docker 搭建。
docker-compose.yml 的內(nèi)容如下：
version: '3' services: fejenkins: user: root image: jenkinsci/blueocean ports: - "8080:8080" - "50000:50000" volumes: - /data/jenkins_home:/var/jenkins_home - /data/nm_cache:/var/nm_cache - /var/run/docker.sock:/var/run/docker.sock
通過 docker-compose up 命令啟動；啟動后通過初始密碼進(jìn)行第一個用戶的創(chuàng)建和 Jenkins 初始化的一些列操作，初始密碼會打印在 jenkins docker 啟動命令行的輸出中，注意查看。
當(dāng)然也可以不使用 docker-compose：
docker run --rm -u root -v /data/jenkins_home:/var/jenkins_home -v /data/nm_cache:/var/nm_cache -v /var/run/docker.sock:/var/run/docker.sock -p 8080:8080 -p 50000:50000 jenkinsci/blueocean
稍做解釋：
- /data/jenkins_home:/var/jenkins_home /var/jenkins_home 是 jenkinsci image 的默認(rèn)數(shù)據(jù)存放路徑，這里將路徑映射到宿主機(jī)的指定文件夾；
- /data/nm_cache:/var/nm_cache nm_cache 涵義是 node_modules cache，顧名思義，這里是想對編譯所需的 node_modules 做緩存，將緩存文件夾也映射到宿主機(jī)；
- /var/run/docker.sock:/var/run/docker.sock 這里是將宿主機(jī)運(yùn)行 docker 后產(chǎn)生的 sock 文件映射到了 jenkins container 中。這樣，jenkins 中使用 docker 進(jìn)行編譯時，其實是使用宿主機(jī)的 docker 來運(yùn)行的，而不是在 docker container 中又啟動了 docker。這里稍微有點繞，若是暫時看不明白，需要找一些深入介紹 docker 的文章閱讀；
步驟二：配置 Jenkins
添加 Credentials
通過 Jenkins 進(jìn)行 git 操作需要對應(yīng) git repo 的權(quán)限，這里需要用到有 git repo 權(quán)限的密鑰文件。同樣，通過 Jenkins 將編譯產(chǎn)物 scp 到服務(wù)器上的時候，也需要服務(wù)器的密鑰文件。
這兩類密鑰文件需要配置在 Jenkins 中，在：Jenkins > Credentials > System > Global credentials (unrestricted) 里進(jìn)行 Add Credentials 的操作。
添加 Jenkins Item
Jenkins > New Item，然后選擇 Pipeline，在下面的 Pipeline 配置區(qū)域的 Definition 中選擇 Pipeline script，Script 如下：
pipeline {
environment {
SERVER_IP_1 = "11.22.33.44"
SERVER_CREDENTIALSID = "abcd1234-abcd-abcd-abcd-abcd1234abcd"
SERVER_DEPLOY_DIR = "/your/www/path/"
CACHE_DIR = "/var/nm_cache/your_project_name/"
GIT_URL = "git@github.com:example/example.git"
GIT_BRANCH = "master"
GIT_CREDENTIALSID = "abcd1234-abcd-abcd-abcd-abcd1234abcd"
}
agent none
stages {
stage('Checkout code') {
agent any
steps {
git (
branch: "${GIT_BRANCH}",
credentialsId: "${GIT_CREDENTIALSID}",
url: "${GIT_URL}",
changelog: true
)
sh '''
ls -al
cache_dir="${CACHE_DIR}"
cache_nm="${CACHE_DIR}node_modules"
cache_lock="${CACHE_DIR}yarn.lock"
if [ ! -d "$cache_dir" ]; then mkdir ${cache_dir}; fi
if [ ! -d "$cache_nm" ]; then mkdir ${cache_nm}; fi
if [ -d "$cache_nm" ]; then ln -sf ${cache_nm} ./; fi
if [ -f "$cache_lock" ]; then mv -n ${cache_lock} .; fi
ls -al
'''
}
}
stage('Build') {
agent {
docker {
image 'node:8-alpine'
args ''
}
}
steps {
sh '''
npm config set registry https://registry.npm.taobao.org
yarn install
yarn build
tar -cvf build.tar build
ls -al
mv ./yarn.lock ${CACHE_DIR}
rm -rf ./node_modules
ls -al
'''
archiveArtifacts artifacts: 'build.tar', fingerprint: true
}
}
stage('Deploy') {
agent any
steps {
unarchive mapping: ['build.tar': 'build.tar']
echo '--- Deploy ---'
sshagent(["${SERVER_CREDENTIALSID}"]) {
sh "scp -o StrictHostKeyChecking=no build.tar root@${SERVER_IP_1}:${SERVER_DEPLOY_DIR}"
sh "ssh -o StrictHostKeyChecking=no root@${SERVER_IP_1} \"rm -rf ${SERVER_DEPLOY_DIR}build; tar -xvf ${SERVER_DEPLOY_DIR}build.tar -C ${SERVER_DEPLOY_DIR}\""
}
}
}
}
}
稍做解釋：
這個部署腳本分為三個步驟：
- Checkout code（在指定 git 倉庫通過指定證書文件獲取代碼）
- Build（通過指定命令進(jìn)行編譯，將編譯后的產(chǎn)物存檔）
- Deploy（通過指定命令部署）
在 Build 階段前后，我們各做了一些工作，以求每次部署可以復(fù)用 node_modules，因為下載 node_modules 的時間可能很長，而并不是每次都會修改 package.json，所以其實 node_modules 大概率可以復(fù)用；
編譯前：
- 看指定 node_modules 緩存文件夾是否存在，不存在則新建該文件夾；
- 看緩存文件夾中是否有 node_modules 文件夾，如果沒有則新建該文件夾；并且將該文件夾軟連接到當(dāng)前目錄；
- 看緩存文件夾中是否有 yarn.lock 文件，如果有則移動到當(dāng)前文件夾；
編譯后：
- 移除 node_modules 文件夾的軟連接；
- 將 yarn.lock 文件移動到緩存文件夾中；
這里使用了 yarn install 的某些特性：
- 沒有 node_modules 或者 yarn.lock 時會安裝全量依賴；
- 有 node_modules 和 yarn.lock 但是 yarn.lock 和 package.json 不匹配時，會安裝所需依賴；
- 有 node_modules 和 yarn.lock，且 yarn.lock 和 packge.json 配置時，跳過安裝依賴；
使用
編譯和部署
編譯和部署直接點擊 Build Now 即可；
回滾
回滾的本質(zhì)其實是：重新部署某個歷史版本。在 Build History 找到想要重新部署的版本，點擊 Restart from Stage，在新頁面中選擇 Stage Name 為 Deploy。
其他
若是想要進(jìn)入 docker container 交互，可以通過以下命令
docker exec -i -t [dockername] /bin/bash
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
React?Hook中的useEffecfa函數(shù)的使用小結(jié)
React 會在組件更新和卸載的時候執(zhí)行清除操作, 將上一次的監(jiān)聽取消掉, 只留下當(dāng)前的監(jiān)聽，這篇文章主要介紹了React?Hook?useEffecfa函數(shù)的使用細(xì)節(jié)詳解,需要的朋友可以參考下2022-11-11
react-router v4如何使用history控制路由跳轉(zhuǎn)詳解
這篇文章主要給大家介紹了關(guān)于react-router v4如何使用history控制路由跳轉(zhuǎn)的相關(guān)資料，文中通過示例代碼介紹的的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
React Native使用fetch實現(xiàn)圖片上傳的示例代碼
本篇文章主要介紹了React Native使用fetch實現(xiàn)圖片上傳的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
react中使用heatmap.js實現(xiàn)熱力圖的繪制
heatmap.js?是一個用于生成熱力圖的?JavaScript?庫,React?是一個流行的?JavaScript?庫,用于構(gòu)建用戶界面,本小編給大家介紹了在React?應(yīng)用程序中使用heatmap.js實現(xiàn)熱力圖的繪制的示例,文中通過代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
關(guān)于React Native使用axios進(jìn)行網(wǎng)絡(luò)請求的方法
axios是一個基于Promise的Http網(wǎng)絡(luò)庫，可運(yùn)行在瀏覽器端和Node.js中，Vue應(yīng)用的網(wǎng)絡(luò)請求基本都是使用它完成的。這篇文章主要介紹了React Native使用axios進(jìn)行網(wǎng)絡(luò)請求,需要的朋友可以參考下2021-08-08
詳解Jotai Immer如何實現(xiàn)undo redo功能示例詳解
這篇文章主要為大家介紹了詳解Jotai Immer如何實現(xiàn)undo redo功能示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-04-04
渲染真實DOM的開銷很大，有時候我們修改了某個數(shù)據(jù)，直接渲染到真實dom上會引起整個dom樹的重繪和重排。我們希望只更新我們修改的那一小塊dom，而不是整個dom，diff算法就幫我們實現(xiàn)了這點。diff算法的本質(zhì)就是：找出兩個對象之間的差異，目的是盡可能做到節(jié)點復(fù)用2022-11-11
這篇文章主要給大家介紹了關(guān)于解決webpack -p壓縮打包react報語法錯誤的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-07-07
useEffect中return函數(shù)的作用和執(zhí)行時機(jī)解讀
這篇文章主要介紹了useEffect中return函數(shù)的作用和執(zhí)行時機(jī),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
本文介紹了ReactNative實現(xiàn)的橫向滑動條效果,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),補(bǔ)充介紹了ReactNative基于寬度變化實現(xiàn)的動畫效果,感興趣的朋友跟隨小編一起看看吧2024-02-02