Jenkins实战---Vue项目CICD全流程
2021-12-29 本文已影响0人
Felix_
合抱之木，生于毫末！
一个健壮、优秀的项目，不仅需要优秀的架构，逻辑清晰的代码，也需要规范的构建、测试和部署流程。只有各种细节都做到优秀，才能经得起需求的变更、业务逻辑的频繁修改。
这里主要针对项目中的构建、部署、分支管理进行流程分析和分享，因为涉及到的内容和知识面较多，只做粗略分享，需要详细了解或者有问题的可留言。我们期望最终的CICD流程是
开发者推送代码到Git仓库 (手动)Git通知Jenkins开始构建 （自动）Jenkins构建Vue项目 （自动）Jenkins把Vue项目打包为Docker镜像 （自动）推送docker镜像到docker hub （自动）通知swarm集群部署vue项目 （自动）swarm集群拉取最近镜像并部署 （自动）发送CICD结果到企业微信 （自动）
CICD全流程的环境
Jenkins 2.319.1Gitea 1.15.8Docker version 20.10.11Docker 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
