最優(yōu)雅的Docker+Jenkins pipeline部署vue項(xiàng)目,前端項(xiàng)目都可參考

使用Jenkins發(fā)布項(xiàng)目已經(jīng)4年多,做過多次改進(jìn),盡量減少Jenkins的配置和發(fā)布腳本的書寫。從最初的構(gòu)建一個(gè)自由風(fēng)格的軟件項(xiàng)目流水線項(xiàng)目到現(xiàn)在的流水線+docker,流水線可以讓項(xiàng)目發(fā)布流程更加清晰,docker可以大大減少Jenkins配置。

下面帶大家使用最簡(jiǎn)單,最快速的方式使用Jenkins,無需配置node環(huán)境,一切用docker搞定,只需要寫腳本,其他無需配置

此教程僅為進(jìn)階教程,具體的jenkins安裝,git憑據(jù)配置,郵件發(fā)送等需要自行查找教程進(jìn)行配置。

本教程使用的環(huán)境

  • centos7
  • docker-ce 18.09.1(務(wù)必使用docker-ce,老版本的docker會(huì)導(dǎo)致Jenkins中無法使用docker daemon)

準(zhǔn)備工作

安裝docker

yum install docker-ce

配置docker加速器(可選)

很多廠商都提供docker加速服務(wù),比如阿里云,騰訊云 詳情請(qǐng)自行百度。不配置國(guó)內(nèi)加速器,下載鏡像可能很緩慢。

使用docker安裝Jenkins

docker pull jenkins/jenkins,切勿docker pull jenkins已經(jīng)廢棄

Jenkins docker hub地址

啟動(dòng)Jenkins

docker run -u root -itd --name jenkins -p 6001:8080 -v $(which docker):/usr/bin/docker -v /var/run/docker.sock:/var/run/docker.sock -e TZ="Asia/Shanghai" -v /etc/localtime:/etc/localtime:ro -v /volume1/docker/jenkins:/var/jenkins_home jenkins/jenkins
啟動(dòng)命令含義

-p 6001:8080Jenkins默認(rèn)網(wǎng)頁(yè)訪問端口為8080,將端口映射到外部主機(jī)

-v $(which docker):/usr/bin/docker -v /var/run/docker.sock:/var/run/docker.sock使Jenkins內(nèi)部可以使用docker命令

-e TZ="Asia/Shanghai" -v /etc/localtime:/etc/localtime:ro配置Jenkins容器的時(shí)區(qū)

-v /volume1/docker/jenkins:/var/jenkins_home 將Jenkins的配置映射到外部主機(jī)卷,容器刪除仍可保留配置

進(jìn)入Jenkins容器內(nèi)部,判斷docker命令是否正常執(zhí)行

docker exec -it jenkins bash

docker info

可能需要安裝libltdl7,如果需要執(zhí)行以下命令

apt-get update

apt-get install -y libltdl7

配置Jenkins

http://主機(jī)IP:6001可訪問Jenkins網(wǎng)頁(yè)端,其他流程忽略,全部默認(rèn)就可以。

無需配置git、maven、jdk、node等環(huán)境,我們使用docker解決

新建一個(gè)流水線項(xiàng)目

image

關(guān)于流水線腳本書寫,有兩種寫法,官方文檔

Using Docker with Pipeline,官方文檔

編寫腳本

image
分享我自己項(xiàng)目的發(fā)布腳本,適用于vue和其他類似的前端項(xiàng)目,細(xì)節(jié)需要自己修改。此腳本需要使用Dockfile,參考下一節(jié)
import java.text.SimpleDateFormat
node {
    try{
        //此處如此命名是為了發(fā)布到騰訊docker倉(cāng)庫(kù),可自行修改
        def dockerId='tengxun'
        def dockerUrl='ccr.ccs.tencentyun.com'
        def dockerNamespace='emp'
        def dockerName='emp-web'
        //環(huán)境配置,沒有使用vue自帶的環(huán)境配置,自定義了一個(gè)js存放服務(wù)器地址,參考下一節(jié)
        def env='test'
        
        def dateFormat = new SimpleDateFormat("yyyyMMddHHmm")
        def dockerTag = dateFormat.format(new Date())
        
        stage('git pull'){
            sh 'pwd'
            git credentialsId: '此處填寫git憑證,需要在Jenkins憑據(jù)中配置', url: '此處填寫git地址'
        }
        stage('Npm run build') {
            docker.image('node:11-alpine').inside {
                sh 'node --version'
                sh 'npm --version'
                //sh 'npm install'
                sh 'npm run build'
            }
        }
        stage('Docker build') {
            sh 'pwd'
            sh 'ls'
            def imageUrl = "${dockerUrl}/${dockerNamespace}/${dockerName}:${dockerTag}"
            def customImage = docker.build(imageUrl)
            sh "docker rm -f ${dockerName} | true"
            customImage.run("-it -p 7100:80 --name ${dockerName} -e env=${env}")
            //only retain last 3 images
            sh """docker rmi \$(docker images | grep ${dockerName} | sed -n  '4,\$p' | awk '{print \$3}') || true"""
        }
        currentBuild.result="SUCCESS"
    }catch (e) {
        currentBuild.result="FAILURE"
        throw e
    } finally {
        //發(fā)布郵件,請(qǐng)自行配置Jenkins郵件服務(wù),不發(fā)送直接刪除
        mail to: 'xxx@qq.com',subject: "Jenkins: ${currentBuild.fullDisplayName},${currentBuild.result}",body:"${currentBuild.result}"
    }
}
最終發(fā)布以后docker images查看,名稱格式類似如下,如使用上面的代碼發(fā)布后名稱為

ccr.ccs.tencentyun.com/emp/emp-web

image

Vue項(xiàng)目結(jié)構(gòu)以及Dockerfile

為方便修改服務(wù)器url,增加config.js為外部配置,可通過docker run命令進(jìn)行修改

image

Dockerfile書寫,使用nginx部署,僅做參考,具體根據(jù)自己項(xiàng)目結(jié)構(gòu)

FROM nginx:1.17.3-alpine

MAINTAINER liunewshine@qq.com

ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone && mkdir -p /emp-web

WORKDIR /emp-web

ADD /dist/  /usr/share/nginx/html/

ENV env "test"

CMD sed -i "s/empEnv.active/\"${env}\"/g" /usr/share/nginx/html/config.js && nginx -g 'daemon off;'

發(fā)布項(xiàng)目

直接構(gòu)建即可,未做git的webhook,不能聯(lián)動(dòng)git push等,有需求的可以自己加上

image

總結(jié)

總體過程很簡(jiǎn)單,主要就是安裝Jenkins->編寫pipeline腳本->編寫Dockerfile腳本。

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容