web前端: 服务器安装Jenkins踩坑记录

Jenkins的前端自动化工作流搭建的过程,搭建完这套工作流,我们只需要在本地发起一个git提交,剩下的单元测试,打包构建,代码部署,邮件提醒等功能全部自动化完成,让持续集成、持续交付、持续部署变得简单易操作,真正解决人工构建部署的诸多问题。

Jenkins是什么?

Jenkins 是一款业界流行的开源持续集成工具,广泛用于项目开发,具有自动化构建、测试和部署等功能。
下面我们就来安装Jenkins。

准备工作

一个阿里云服务器(这里用的Ubuntu16.04)
一个公共的git仓库
一个可以进行打包的项目代码库

开始

  • 我这里用的是阿里云的轻量服务器,装的是ubuntu16.04系统,首先我们要设置下服务器的安全设置,打开一些端口。下面是我的一些端口设置。


    image.png

    image.png
  • 然后我们通过SSH远程连接服务器, 并且切换到管理员账号


    image.png
  • 在服务上安装Java(Jenkins需要java环境)
    • 执行命令
      sudo apt-get install openjdk-8-jdk
      显示报错,需要切换源。
      W: Failed to fetch http://mirrors.cloud.aliyuncs.com/ubuntu/dists/xenial/InRelea se Could not resolve 'mirrors.cloud.aliyuncs.com' W: Failed to fetch http://mirrors.cloud.aliyuncs.com/ubuntu/dists/xenial-updates /InRelease Could not resolve 'mirrors.cloud.aliyuncs.com' W: Failed to fetch http://mirrors.cloud.aliyuncs.com/ubuntu/dists/xenial-securit y/InRelease Could not resolve 'mirrors.cloud.aliyuncs.com' W: Some index files failed to download. They have been ignored, or old ones used
    • 切换源
      执行
      cd /etc/apt/sources.list.d
      cp sources-aliyun-0.list sources-aliyun-0.list.bak # 保留原版本以防改
      将 sources-aliyun-0.list 内的内容替换成以下内容
deb http://mirrors.aliyun.com/ubuntu/ xenial main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-security main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-updates main restricted universe multiverse
deb http://mirrors.aliyun.com/ubuntu/ xenial-backports main restricted universe multiverse
##测试版源
deb http://mirrors.aliyun.com/ubuntu/ xenial-proposed main restricted universe multiverse
# 源码
deb-src http://mirrors.aliyun.com/ubuntu/ xenial main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-backports main restricted universe multiverse
##测试版源
deb-src http://mirrors.aliyun.com/ubuntu/ xenial-proposed main restricted universe multiverse
# Canonical 合作伙伴和附加
deb http://archive.canonical.com/ubuntu/ xenial partner

参考这篇文章https://segmentfault.com/a/1190000016153084

  • 安装好Java之后开始安装Jenkins,执行下面的代码
wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -
sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'
sudo apt-get update
echo y|sudo apt-get install jenkins
  • 运行Jenkins
    Jenkins 是以服务的形式运行的,故可使用如下民两个管理服务,默认使用 8080 端口
    启动服务:sudo service jenkins start
    相关服务命令: sudo service jenkins start|stop|restart
  • 至此,可以通过 http://ip:8080 访问 Jenkins 了,然后就是初始化和使用了

Jenkins初始化和相关配置

  • 初始化
    jenkins的默认端口是8080,启动成功后在浏览器打开。
    进入后会让我们输管理员密码,打开网页上提示路径下的文件,复制密码粘贴输入即可。
    然后会让安装需要的插件,此处选默认即可,等待安装完成。
    创建一个管理员账户。
    上面都完成后会看到这个界面。


    image.png
  • 创建任务
    1、点击创建一个新任务


    image.png

    2、选择自由风格的软件项目,并起一个名字


    image.png

    至此,基础准备工作已经完成,我们在服务器上安装了Jenkins并启动,然后进行了初始化配置,建立了一个新任务。接下来我们开始配置我们需要的功能。
  • 实现git钩子功能
    首先我们要实现一个git钩子功能,就是我们向github/码云等远程仓库push我们的代码时,jenkins能知道我们提交了代码,这是自动构建自动部署的前提,钩子的实现原理是在远端仓库上配置一个Jenkins服务器的接口地址,当本地向远端仓库发起push时,远端仓库会向配置的Jenkins服务器的接口地址发起一个带参数的请求,jenkins收到后开始工作。
    1、打开刚创建的任务,选择配置,添加远程仓库地址,私有仓库需要配置登录名及密码。
    image.png

    注意!!这里踩了一个坑踩了好久,因为服务器上没有安装git,所以,这里之前一直报错
    image.png

    要解决这个问题,只需要在服务器某个文件夹下git clone下,如果这个url可以clone成功,基本就可以解决这个问题。
    还有就是,私有仓库,需要配置下SSH秘钥或者用户名和密码。
    2、安装Generic Webhook Trigger Plugin插件(系统管理-插件管理-搜索Generic Webhook Trigger Plugin)如果可选插件列表为空,点击高级标签页,替换升级站点的URL为:http://mirror.xmission.com/jenkins/updates/update-center.json并且点击提交和立即获取。
    3、添加触发器
    第2步安装的触发器插件功能很强大,可以根据不同的触发参数触发不同的构建操作,比如我向远程仓库提交的是master分支的代码,就执行代码部署工作,我向远程仓库提交的是某个feature分支,就执行单元测试,单元测试通过后合并至dev分支。灵活性很高,可以自定义配置适合自己公司的方案,这里方便演示我们不做任何条件判断,只要有提交就触发。在任务配置里勾选Generic Webhook Trigger即可
    image.png

    4、仓库配置钩子 此处以码云为例,因为公司用的是码云,github的配置基本一致,进入码云项目主页后,点击管理-webhooks-添加,会跳出一个这样的框来。
    image.png

    URL格式为 http://<User ID>:<API Token>@<Jenkins IP地址>:端口/generic-webhook-trigger/invoke
    userid和api token在jenkins的系统管理-管理用户-admin-设置里。
    Jenkins IP地址和端口是你部署jenkins服务器的ip地址,端口号没改过的话就是8080。
    密码填你和上面userid对应的密码,我这里是admin。
    下面的几个选项是你在仓库执行什么操作的时候触发钩子,这里默认用push。
    点击提交完成配置。
    5、测试钩子
  1. image.png

    点击测试,如果配置是成功的,你的Jenkins左侧栏构建执行状态里将会出现一个任务。


    image.png

    另外,你也可以试下本地提交代码,提交代码后,jenkins也会开始一个任务,目前我们没有配置任务开始后让它做什么,所以默认它只会在你提交新代码后,将新代码拉取到jenkins服务器上。到此为止,git钩子我们配置完成。

  • 实现自动化构建
    git push触发钩子后,jenkins就要开始工作了,自动化的构建任务可以有很多种,比如说安装升级依赖包,单元测试,e2e测试,压缩静态资源,批量重命名等等,无论是npm script还是webpack,gulp之类的工作流,你之前在本地能做的,在这里同样可以做。
    作为演示,这里只演示三个基本常用的工作流程,安装依赖包->单元测试->打包,也就是下面这三个命令。
npm install
npm run test
npm run build

1、首先,和本地运行npm script一样,我们要想在jenkins里面执行npm命令,先要在jenkins里面配置node的环境,可以通过配置环境变量的方式引入node,也可以通过安装插件的方式,这里使用了插件的方式,安装一下nvm wrapper这个插件。
2、打开刚刚的jenkins任务,点击配置里面的构建环境,勾选这个,并指定一个node版本。


image.png

3、点击构建,把要执行的命令输进去,多个命令使用&&分开。


image.png

4、保存。
5、此时本地修改一下代码push测试一下(也可以点击立即构建测试),点击本次触发的那个任务,选择控制台输出,将会看到Jenkins在云端执行的过程。
命令行最后一行是Finished状态的如果是SUCCESS(蓝色)则证明执行的任务都顺利进行,是FAILURE(红色)则证明中间有重大错误导致任务失败,UNSTABLE(黄色)代表有虽然有些小问题,但不阻碍任务进行,黄色或者红色可以去命令行看下错误输出,看下哪里出了问题。
image.png

6、如果上一步是SUCCESS,点击项目的工作空间,将会发现多了dist和node_modules两个文件夹。


image.png

至此,我们已经搭建了一个简易的构建工作流程。

参考掘金文章:实战笔记:Jenkins打造强大的前端自动化工作流

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 201,681评论 5 474
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 84,710评论 2 377
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 148,623评论 0 334
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,202评论 1 272
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,232评论 5 363
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,368评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,795评论 3 393
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,461评论 0 256
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,647评论 1 295
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,476评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,525评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,226评论 3 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,785评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,857评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,090评论 1 258
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,647评论 2 348
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,215评论 2 341

推荐阅读更多精彩内容