项目的正常运行离不开完备的测试和正确的部署。通常在项目开发的过程中，我们会写出不同类型的测试从而最大程度的减少bug查找修复时间、降低项目重构成本、增加项目迭代过程中对代码质量的信心，保证项目正常上线。为了能够给用户呈现最新的项目开发成果，一次次手动拷贝代码、登陆远程主机、配置代码运行环境显然比较低效。所以，自动化测试和部署能够有效提升项目开发效率。这篇博客也是总结一下我最近在开发的一个前端项目中使用jenkins+gitlab进行自动化测试和部署的过程。

jenkins的安装和配置

我是在阿里云主机上搭建的jenkins服务器，云主机配置：

操作系统: Ubuntu 16.04.2
内存: 2GB
CPU: 1核
硬盘：40GB

安装

需要一个拥有sudo权限的非root用户
登陆主机，将jenkins的apt key加入系统： wget -q -O - https://pkg.jenkins.io/debian/jenkins-ci.org.key | sudo apt-key add -
将jenkins的包地址加入系统的source.list: echo deb https://pkg.jenkins.io/debian-stable binary/ | sudo tee /etc/apt/sources.list.d/jenkins.list
执行安装: sudo apt-get update && sudo apt-get install jenkins

配置

按照上述步骤，即可完成安装，现在启动jenkins，使用命令sudo systemctl start jenkins。一般来说这样直接访问8080端口就可以用了，但是不知道什么原因，虽然日志里边启动成功，但无法访问8080端口。一番查询发现通过这个命令：java -jar /usr/share/jenkins/jenkins.war可以正常启动jenkins。或者将jenkins启动写成一个脚本:

1
2
3
4


/usr/bin/daemon --name=jenkins --inherit --env=JENKINS_HOME=/var/lib/jenkins \
--output=/var/log/jenkins/jenkins.log --pidfile=/var/run/jenkins/jenkins.pid \
-- /usr/bin/java -Djava.awt.headless=true -jar /usr/share/jenkins/jenkins.war\
--webroot=/var/cache/jenkins/war --httpPort=8080

接下来访问8080端口进行登录，初次登陆会让你设置一个root用户：，按照图片中的指引，拷贝密码sudo cat /var/lib/jenkins/secrets/initialAdminPassword，进入下一步。
安装推荐的插件：并且将gitlab相关的插件也一并下载。
创建管理员用户：
创建gitlab api token：打开gitlab api token页面：访问地址https://gitlab.com/profile/personal_access_tokens 创建token，并保存token值；打开jenkins设置gitlab api token：访问地址https://host:port/credentials/store/system/domain/_/newCredentials 将刚才保存的api token填写一下保存即可。
创建gitlab连接，为下一步做准备：需要填写Connection name:gitlab、Gitlab host URL:https://gitlab.com、Credentials:gitlab api token。这里需要注意两点：Enable authentication for '/project' end-point需要勾掉，不然会影响gitlab githook的设置；Credentials的设置选择刚才创建的gitlab api token即可。
新建jenkins pipeline任务：

通过上述几步，可以完成jenkins的初步配置，完成登陆。接下来可以配置gitlab相关内容，为自动化测试和部署做准备。

gitlab githook

接下来，设置gitlab的githook：在你的gitlab项目页面中找到https://gitlab.com/username/projectname/settings/integrations，需要设置的就是URL，此处的url就是上边新建的jenkins任务对应的地址，比如我的:https://service.eclipsesv.com/project/rc-pipeline 如下图：完成设置之后保存即可。

jenkins pipeline

关于这个任务的配置只需要按照下边的图即可：需要注意的是：gitlab connection 设置为上边设置好的gitlab连接，GitLab Repository Name设置为你要测试部署项目的名称。最后也是最关键的，设置这个jenkins任务的pipeline script：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30


node {
   echo 'Hello World'
   # 检出代码
   stage('Checkout code'){
       checkout([$class: 'GitSCM', branches: [[name: '*/master']], doGenerateSubmoduleConfigurations: false, extensions: [], submoduleCfg: [], userRemoteConfigs: [[credentialsId: 'c*****************', url: 'git@gitlab.com:wangmengcn/react-cesium.git']]])
   }
   # 安装依赖包
   stage('Init env'){
       sh 'yarn install'
   }
   # 运行测试
   stage('Run test'){
       sh 'yarn ctest'
   }
   # 代码构建
   stage('Run build'){
       sh 'yarn cbuild'
   }
   # 发布生成结果
   stage('Deploy code'){
       sh 'cd dist'
       sh 'ls'
       sh 'rm -rf /var/lib/jenkins/cesium/*'
       sh 'cp -r dist/* /var/lib/jenkins/cesium'
   }
   # 清理项目目录
   stage('Clean workspace'){
       deleteDir()
   }
}

设置完成之后，每次push到master的代码都会触发新的build和deploy：

小结

这篇博客主要是介绍了jenkins+gitlab进行自动化测试和部署前端项目的一个流程，当然可以通过jenkins强大的插件系统完成除了上边这些功能以外的复杂工作，在以后的工作学习过程中养成良好习惯，让测试和部署尽量能够自动化完成。🍻🍻🍻

前端项目的自动化测试和部署初试

文章目录

jenkins的安装和配置

安装

配置

gitlab githook

jenkins pipeline

小结