Jenkins 实现自动构建与持续集成

2018-08-09 admin

*** 写在前面的一段话:** **          根据目前的工作需要,以及为了接下来新产品前后端间更高效的协同,我决定爬一下Jenkins的坑。本文通过git钩子+Jenkins实现了,本地git push代码,Jenkins会自动响应并拉取码云上最新的代码值服务器上,使得本地提交代码时,线上能够同步的更新代码,省去了手动更新服务器上代码的重复工作。**


所需工具

  • 服务器本文用的是 CentOS 7.2 64位)
  • Jenkins
  • 码云(也可以是github、gitlab等)

Jenkins 是什么?能做什么?

Jenkins是一个开源软件项目,旨在提供一个开放易用的软件平台,使软件的持续集成变成可能。Jenkins是基于Java开发的一种持续集成工具,用于监控持续重复的工作,功能包括: 1、持续的软件版本发布/测试项目。 2、监控外部调用执行的工作。

一、安装JDK

1、在安装Jenkins之前,需要先安装JDK及配置系统环境变量,因为Jenkins是基于JAVA的。

下载JDK8安装包并上传至服务器,**在安装之前建议先检查下是否安装过JDK,因为Jenkins最新的2.x版本是基于JDK8的,**通过下面命令可以查询

# rpm -qa | grep java

如果有,会出现已安装的JDK列表。执行下面命令依次卸载即可

# rpm -e --nodeps <列表里各项>

2、安装JDK8

# rpm -ivh <下载的安装包名称>

3、检查JAVA版本

# java -version

4、配置环境变量

打开配置文件

# vim /etc/profile  

按i键可以进入编辑模式,按pagedown翻到最后,添加上如下配置

export JAVA_HOME=<JDK安装的路径>
export PATH=$JAVA_HOME/bin:$PATH
export CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar

按Esc退出编辑模式,并输入下面命令保存并强制退出

:wq!

重新应用修改后的配置文件

# source /etc/profile

PS:可以打印出$PATH变量,查看是否配置成功

# echo $PATH

如果输出了相对应的路径则说明配置成功,可以进行下一步了!

二、安装Jenkins

1、如同安装JDK,先下载Jenkins的.war安装包并上传至服务器(也可以将Jenkins存储库添加到yum repos,并从这里安装Jenkins.详情可见 Jenkins文档 ),进入Jenkins包所在文件夹执行下面命令启动Jenkins

# java -jar jenkins.war --httpPort=8090

启动后用浏览器打开http://&lt;ip>:8090,密码复制粘贴即可,然后按照提示登录,并安装推荐的插件… OK,至此,基础准备工作已经完成,我们在服务器上安装了Jenkins并启动,然后进行了初始化配置。接下来我们就需要建立了一个新任务,开始配置我们需要的功能了。

思考下我的需求:本地push代码到码云,Jenkins自动拉取最新的代码。所以需要将本地、服务器与码云三者间关联起来

三、实现git钩子功能

1、在Jenkins插件管理里找到已安装插件,如图

clipboard.png

检查一下三个插件是否安装,如果没有,请安装

  1. Git plugin
  2. Publish Over SSH
  3. Generic Webhook Trigger Plugin

2、安装好后重启Jenkins,接下来便是新建一个任务:

clipboard.png

clipboard.png

clipboard.png

PS: 如果你的项目在拉取代码后需要其它操作,诸如:安装依赖、打包等,可在构建、构建后操作里配置,本文不再演示

3、配置码云的webhooks

clipboard.png

添加 url格式为 http://&lt;User ID>:<API Token>@<Jenkins IP地址>:端口/generic-webhook-trigger/invoke

其中 userid 和 api token 在jenkins的系统管理-管理用户-admin-设置里

clipboard.png

密码就是jenkins登陆的密码,填写完成保存,点击测试如图

clipboard.png 出现图示结果,并且Jenkins里显示构建成功

clipboard.png

那么说明git钩子已经生效。你也可以本地push代码来测试一下!

来看看jenkins拉取的代码吧,在jenkins workspace里可以找到

clipboard.png

四、最终目的

那么问题来了,我以为这样就Everything has been done,打开后居然是这个样子

clipboard.png

想想我最初的目的,自动化的流程是实现了,但是实时同步线上预览挂掉了,这可真的是不行不能够不可以的,我决定出去看看外面的世界找找灵感(答案),果然被我找到了

clipboard.png

在jenkins命令行脚本输入

System.setProperty("hudson.model.DirectoryBrowserSupport.CSP", "")

clipboard.png

运行,如果还是报错 记得清下浏览器缓存

至此,done!

五、总结下

Jenkins 功能十分强大,在现在前端项目工程化的背景下,可以替开发和测试人员做很多重复性的工作,本次基于Jenkins做的只是一个销应用场景下的demo,在公司新产品开发时也可以基于此进行更多功能的完善!

原文链接:https://segmentfault.com/a/1190000015949934

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37644.html

文章标题:Jenkins 实现自动构建与持续集成

相关文章
javaScript+turn.js实现图书翻页效果实例代码
为了实现图书翻页的效果我们在网上可以看到很多教程 在这里推荐turn.js 网上的turn.js 有api 不过是英文的  很多人看起来不方便 .关于代码也是奇形怪状在这里我将详细讲解如何使用turn.js实现翻页效果 ,本篇文章只是讲解 ...
2017-03-16
vue.js实现请求数据的方法示例
vue2.0示例代码如下: var vm = new Vue({ el:&quot;#list&quot;, data:{ gridData: &quot;&quot;, }, ...
2017-03-20
vuejs通过filterBy、orderBy实现搜索筛选、降序排序数据
直接贴代码了: 先上输入前的样子: &lt;style&gt; #example{margin:100px auto;width:600px;} .show{margin:10px;} #searchText{display: block...
2017-03-17
js实现鼠标左右移动,图片也跟着移动效果
效果:鼠标往左移,图片对应右移,鼠标往右移,图片就左移动。图片距离越远偏移距离越大。 思路:首先获取图片原先的距离。设置一个变化值,图片的最终距离等于原先的距离加上变化值 布局:大盒子里面是图片,大盒子position:relative;图...
2017-02-17
js实现文字向上轮播功能
话不多说,请看实现代码: &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot;&gt; &lt;head&gt; &lt;meta charset=&quot;UTF-8&quot;&gt;...
2017-03-10
移动端网页设计经验与心得
智能手机发展确实很迅速,像今年,我的大部分工作就都在移动端网页上。 再往前些年,看到的手机版/移动版网页,限制于浏览器与手机性能,2g网络速度等 网页设计无非是蓝、黑、白,界面单调,并且要尽可能的设计简单。 现在情况就大不相同了,软件上we...
2015-12-23
纯css实现窗户玻璃雨滴逼真效果
这里仅是用CSS技术来演示这样的一个场景,可能并不太实用。然而这是一个探索CSS新功能的最佳机会。可以让你尝试使用一些新特性和新工具。并且逐渐将在工作中实践。在制作窗口雨滴效果,将使用到HAML和Sass。 案例效果 看到上面的效果是不是...
2017-03-29
javascript:;与javascript:void(0)区别
javascript:;直接返回undefined javascript:void(0);要去执行一次表达式“0”,然后返回undefined ...
2017-05-12
性能与生态双突破 HTML5重现爆发曙光
走过早熟的WebAPP,也经历过概念性的“轻应用”,HTML5这个被视作移动互联网未来的技术标准,终于在2015年看到了爆发的曙光。1月 15日,搜狐发布基于HTML5的“手机搜狐网3.0,加上微信几天前开放HTML5接口,HTML5很可能...
2015-11-12
canvas实现流星雨的背景效果
看到一个很棒的流星雨效果。修改一下样式就可以作为网页背景了。。! &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset=&quot;utf-8&quot...
2017-03-09
回到顶部