如今的前端項(xiàng)目已不像之前直接寫完代碼，扔到服務(wù)器直接運(yùn)行了。免不了安裝依賴，執(zhí)行build過程，然后再將打包后的代碼上傳到服務(wù)器，可能還需要更改配置文件啥的。如此多的步驟嚴(yán)重影響開發(fā)的日常劃水時(shí)間。所以jenkins自動(dòng)化部署少不了。

聽說這個(gè)老頭可以幫你做很多事

直接進(jìn)入正題，登錄進(jìn)入jenkins后臺(tái)，在Dashboard左側(cè)菜單新建任務(wù)

選擇流水線任務(wù)類型，輸入任務(wù)名稱，可以是項(xiàng)目名稱，然后確認(rèn)，進(jìn)入配置頁(yè)面，該頁(yè)面有四個(gè)Tab

General

主要是一些基本的配置項(xiàng)，可不填

構(gòu)建觸發(fā)器

主要是觸發(fā)構(gòu)建任務(wù)的條件配置，有的時(shí)候比如你想在你提交代碼的時(shí)候就觸發(fā)構(gòu)建，或者合并代碼到主分支的時(shí)候觸發(fā)，可以通過gitee WebHook來配置生效，不需要自動(dòng)觸發(fā)構(gòu)建的可以不需要理會(huì)

高級(jí)項(xiàng)目選項(xiàng)

（忽略）

流水線

這個(gè)是主要的內(nèi)容，編寫自定義的Pipeline script，類似于shell腳本

pipeline {agent anyenvironment {CODE_REPOSITORY = 'git@gitee.com:argusai/cloth-client-manager-app.git'}stages { stage('拉取代碼') {steps {echo "fetch code from ${CODE_REPOSITORY}"deleteDir()git "${CODE_REPOSITORY}"}}stage('打包') {steps {echo 'package.....'sh "yarn install"sh "yarn build"}}stage('部署代碼') {steps {echo ''sh "cp -rf ./dist/* /data/service/cloth-cloud/cloth-client-manager-app"sh "/data/service/cloth-cloud/cloth-client-manager-app-start.sh"}}}}

整個(gè)構(gòu)建過程，被我們自定義為三步，首先從git或者gitee拉取最新的代碼到j(luò)enkins服務(wù)器，拉取之前先執(zhí)行deleteDir()刪除之前的代碼目錄；

第二步是執(zhí)行命令編譯打包的過程，yarn install 安裝項(xiàng)目依賴，然后build出包，一般在項(xiàng)目根目錄dist下面

第三步的過程就是將dist里面打包后的代碼拷貝到服務(wù)器nginx配置的項(xiàng)目目錄，并且執(zhí)行一個(gè)shell腳本，目的是拷貝一份生產(chǎn)環(huán)境的配置到項(xiàng)目目錄，（有的時(shí)候配置文件不方便打包進(jìn)項(xiàng)目，隨時(shí)修改的需要）如果項(xiàng)目部署和jenkins不在一個(gè)服務(wù)器，也可以通過其它的方式同步到生產(chǎn)服務(wù)器。

為了公司的內(nèi)部協(xié)同，還可以在這里做很多事，例如配置釘釘機(jī)器人通知，將打包后的信息同步到工作群里。

最后配置好任務(wù)之后，試一下點(diǎn)擊立即構(gòu)建，可以清晰的看見每一步的完成進(jìn)度

如果哪一步出錯(cuò)了，還可以點(diǎn)擊log來查找錯(cuò)誤的輸出日志進(jìn)行跟蹤。

?

總結(jié)

以上是生活随笔為你收集整理的前端jenkins打包编译发布项目流程的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。