jenkins使用哪个版本号_Jenkins前端持续迭代、持续部署

基于gitlab的webhooks，通过jenkins自动触发静态资源编译，通过apollo版本控制静态资源版本，实现零延时前端上线、回滚。

jenkins配置webhooks

构建触发器我们选择gitlab webhooks，复制Jenkins的webhooks路径

gitlab配置webhooks

进入项目settings-> Integrations ->

项目中配置自动webhooks的服务器地址和触发自动部署的事件类型

1. jenkins配置build脚本

自动化构建前端静态资源，并以project/tags/方式部署到服务器

• project: 项目名称
• tags: 版本号

构建用到了githook的post请求体里的三个参数

1. gitlabSourceBranch：自动获取tag的SourceBranch注意：如果需要取tag名字需字符串处理（tags=echo ${gitlabSourceBranch##*/}）
2. gitlabSourceRepoHttpUrl: 自动获取项目的url
3. gitlabSourceRepoName：自动获取项目名称

#!/bin/sh

# 定义变量
project=`echo ${gitlabSourceRepoName}`
tags=`echo ${gitlabSourceBranch##*/}`

# 构建代码
cd $project
yarn install
PUBLIC_URL=http://cdn.xxxx.com/${project}/${tags} npm run build

# 部署代码
for i in `seq 163 164`;do
	ssh root@10.10.11.${i} "mkdir -p /var/www/static/${project}/${tags}"
	rsync -avP -e "ssh -o StrictHOSTKeyChecking=no" ./build/* root@10.10.11.${i}:/var/www/static/${project}/${tags}
done
 

HTML路由入口

读取apollo配置，我们使用的apollo是开源项目，

ctripcorp/apollo​github.com

var express = require('express');
var fs = require('fs');
var router = express.Router();
var getConfig = function (configUrl) {
	return JSON.parse(fs.readFileSync(configUrl, 'utf-8'))
}
router.get('*', function (req, res, next) {
	const config = getConfig('config/apollo/hogwarts.finance.json');
	res.render('finance', { title: '财务系统', config: config });
});
module.exports = router;

这里使用了express，pug模板

doctype html
html(lang='zh')
  head
    meta(charset='utf-8')
    meta(name='viewport',content='width=device-width,initial-scale=1,shrink-to-fit=no')
    meta(name='theme-color',content='#000000')
    meta(name='renderer',content='webkit')
    meta(name='referrer',content='never')
    meta(http-equiv='X-UA-Compatible',content='IE=Edge,chrome=1')
    link(rel='manifest',href='/manifest.json')
    title 微播易内部平台
    link(href=config.host + '/config.projectName/' + config.version + '/static/css/main.css', rel='stylesheet')
    //if lt IE 10
    
  body
    noscript
      | You need to enable JavaScript to run this app2.
    #root   
    script(src=config.host + '/config.projectName/' + config.version + '/static/js/vendors.js')
    script(src=config.host + '/config.projectName/' + config.version + '/static/js/icon.js')
    script(src=config.host + '/config.projectName/' + config.version + '/static/js/main.js')

使用createReactApp构建项目，每次构建完后都会保留之前的静态资源版本，方便回滚，俗称增量上线，这里我们使用本版号做控制缓存，所以把文件名的hash信息去掉了。

构建后的目录结构

projectName1
projectName1/0.0.1/main.js
projectName1/0.0.1/main.css
projectName1/0.0.2/main.js
projectName1/0.0.2/main.css

在apollo里面配置对应的变量，静态资源是增量发布，不会删除上一个版本的代码，配合缓存设置，可以实现零延时上线、回滚。

ngnix缓存配置

构建成功后钉钉（订订自定义机器人）推送构建的项目名称和版本号

# 钉钉通知

CONTENT='### FrontStatic构建通知 n
> **项目名称:** *'"$project"'*n>n
> **项目TAG:** *'"$tags"'*n>n
> **提交作者:** *'"$gitlabUserName"'*n>n
> **项目URL:** *'"$gitlabSourceRepoHttpUrl"'*n>n
'
curl 'https://oapi.dingtalk.com/robot/send?access_token=93526ad4b5b236eda8f9bbe6fcfc1a99cede39df45b1a6bbf6f5e3a26d64c4f9' 
   -H 'Content-Type: application/json' 
   -d '{"msgtype": "markdown", 
        "markdown": { 
        	"title":"FrontStatic构建通知",
            "text": "'"$CONTENT"'"
        }
      }'

开发联调

我们的开发联调分别是在dev环境，对应的联调分支dev分支；

## 开发分支
dev_upgrade_retcode
## 提交mr
dev_upgrade_retcode merge to dev
## 在dev分支打tag
## 自动触发tag push事件，build静态资源
## 在apollo系统修改版本号为刚才的tag
## 刷新页面，代码就是最新的代码了

测试（test），预发（release），上线（master）都是这样一个过程，都是通过在gitlab上操作。