Jenkins实战---Vue项目CICD全流程

合抱之木，生于毫末！

一个健壮、优秀的项目，不仅需要优秀的架构，逻辑清晰的代码，也需要规范的构建、测试和部署流程。只有各种细节都做到优秀，才能经得起需求的变更、业务逻辑的频繁修改。

这里主要针对项目中的构建、部署、分支管理进行流程分析和分享，因为涉及到的内容和知识面较多，只做粗略分享，需要详细了解或者有问题的可留言。我们期望最终的CICD流程是

• 开发者推送代码到Git仓库 (手动)
• Git通知Jenkins开始构建 （自动）
• Jenkins构建Vue项目 （自动）
• Jenkins把Vue项目打包为Docker镜像 （自动）
• 推送docker镜像到docker hub （自动）
• 通知swarm集群部署vue项目 （自动）
• swarm集群拉取最近镜像并部署 （自动）
• 发送CICD结果到企业微信 （自动）

CICD全流程的环境

• Jenkins 2.319.1
• Gitea 1.15.8
• Docker version 20.10.11
• Docker Swarm集群部署
• Docker Hub账号

Vue项目

image.png

运行效果

image.png

使用Git仓库管理Vue项目

image.png

图片中共分成了三个分支master、test、develop，分别对应了开发、测试、生产环境，日常开发可以在develop上进行，也可以基于develop分支创建一个新的分支用来开发，小功能开发完毕后直接推送/合并到develop，develop分支推送成功后，即可自动部署到开发环境，develop合并/推送test分支后，即可自动部署到测试环境，一次类推，最终到达生产环境。

Jenkins配置

image.png
image.png
这里可以填入任何字符串，用来做远程通知时使用
image.png
这里填写自己的git仓库，添加好git仓库的凭证即可
image.png
最后指定好Jenkinsfile在仓库中的路径

有些人可能发现在Git向jenkins发送webhook的时候，会出现403未授权报错，需要在"全局安全设置"中的"授权策略"勾选"匿名用户具有可读权限"

Gitea仓库设置

image.png

Docker-Swarm做初始化配置（可选）

因为docker swarm使用stack部署的时候，服务默认会有下标_，而域名中使用_又经常会出现问题，所以这里不使用stack部署，而是提前部署service进去，后面通过webhook更新service

image.png

Vue项目中新增Dockerfile Jenkinsfile BuildNotification.sh

Dockerfile

FROM nginx:1.10
RUN rm /usr/share/nginx/html/*
COPY dist/ /usr/share/nginx/html/

这里我们基于nginx1.10版本作为web端的容器，将最终build出的dist下的文件拷贝到镜像中的/usr/share/nginx/html/中

Jenkinsfile

pipeline {
    agent any
    
    environment {
        GIT_REPO = 'http://gitea:3000/sunyajie/h5_cicd.git'
        GIT_CREDENTIALSID = '0819f0b0-2adb-41ac-a34c-**********'
        BRANCH_TO_BUILD = '*/develop'
    }

    stages {
        stage('git pull') {
            steps {
                checkout([$class: 'GitSCM', branches: [[name: env.BRANCH_TO_BUILD]], extensions: [], userRemoteConfigs: [[credentialsId: env.GIT_CREDENTIALSID, url: env.GIT_REPO]]])
            }
        }
        
        stage('get_commit_msg') {
            steps {
                script {
                    env.GIT_COMMIT_MSG = sh (script: 'git log -1 --pretty=%B ${GIT_COMMIT}', returnStdout: true).trim()
                }
            }
        }
        
        stage('build static web') {
            steps {
                nodejs('NodeJS') {
                    sh '''
                        npm install
                        npm run build
                    '''
                }
            }
        }
        
        stage('build docker image') {
            steps {
                sh 'docker login -u yourusername -p yourpwd'
                sh 'docker build -t yourusername/h5_cicd:0.0.1 .'
                sh 'docker push yourusername/h5_cicd:0.0.1'
            }
        }
        
        stage('deploy') {
            steps {
                sh 'curl --location --request POST http://yourip:9000/api/webhooks/youruuid'
            }
        }
        
        stage('modify build result') {
            steps {
                script {
                    env.BUILD_RESULT = 1
                }
            }
        }
        

    }
    
    post { 
        always {
            sh 'chmod +x BuildNotification.sh'
            sh './BuildNotification.sh'
        }
    }
}

简单介绍一下pipline的流程，请根据情况修改jenkinsfile中的信息

• 从git仓库拉取代码
• 提取commit的信息
• 构建项目
• 登录仓库/构建/推送docker镜像
• 部署服务
• 推送构建结果

BuildNotification.sh

echo "发送服务部署通知······"
if [ $BUILD_RESULT = 1 ]
then
    curl 'https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=yourkey' -H 'Content-Type: application/json' -d "{\"msgtype\": \"markdown\",\"markdown\": {\"content\": \"## <font color="info">Web端部署成功</font> \n [点此访问](http://yourip:8899) \n ### 更新内容: \n > $GIT_COMMIT_MSG\"}}"
else 
    curl 'https://qyapi.weixin.qq.com/cgi-bin/webhook/send?key=yourkey' -H 'Content-Type: application/json' -d "{\"msgtype\": \"markdown\",\"markdown\": {\"content\": \"## <font color="warning">Web端部署失败</font> \n > 请手动检查构建过程 \"}}"
fi
echo "通知发送完毕"

最终测试

推送代码后，就会触发自动构建

image.png image.png