Jenkins,启动!使用Jenkins构建并部署前端项目&通知到钉钉群组

1,106 阅读7分钟

Jenkins官网介绍:作为领先的开源自动化服务器,Jenkins提供了数百个插件来支持任何项目的构建、部署和自动化。

简单来说就是Jenkins提供了一种几乎任何代码语言和源代码存储库的组合设置CI/CD环境,我们只需要在平台上面用鼠标点点和编写少量配置就可以实现项目的代码拉取代码构建并打包打包后的代码上传到服务器并部署等一条龙服务。下面看下例子吧~

Docker拉取Jenkins镜像

Windows在Docker desktop中直接搜索Jenkins,找到官方镜像点击Pull等待下载完毕即可。

Linux可以执行docker pull命令拉取镜像。

docker pull jenkins/jenkins:latest

image.png

使用Jenkins镜像运行容器

Window在Docker desktop的Images列表中选择Jenkins镜像,点击Run运行

image.png

配置容器名称、端口映射和目录挂载(我这里容器名称叫Jenkins,服务映射到8088端口,目录/var/jenkins_home是存放数据的,通过挂载到外部主机,这样即使误删了容器,重新启动新的容器将目录重新挂载就不会丢失数据)

image.png Linux可以执行docker run命令运行容器。(-d是后台运行)

docker run -d --name jenkins -p 8088:8080 -v /var/jenkins_home:/var/jenkins_home jenkins/jenkins:latest

这样等待启动完成后,浏览器访问localhost:8088就能看到登录页(首次登录需要在刚刚挂载的目录中的/secrets/initialAdminPassword查看初始密码)

image.png

新建任务

在控制台找到新建任务,点击进入输入任务名称,接着我们选择构建一个自由风格的软件项目,点击确定。

image.png

下载插件

新建任务完毕后,我们先下载3个必要的插件,后面会提及它们的用处。 返回控制台,点击系统管理,再点击插件管理

image.png

NodeJS

点击Available Plugins,搜索Node,找到列表中的NodeJS Plugin,选择安装。(我这里之前已经下载了,所以在Installed plugins列表)

image.png

Publish Over SSH

同上,搜索Publish Over SSH,安装。

钉钉机器人

同上,搜索DingTalk,安装。

全局配置插件

NodeJS配置

NodeJS插件是指定你构建前端使用的Node环境,点击系统管理,点击全局工具配置

image.png 拉到下面新增NodeJS,输入Node名称(随便填写,用于构建时选择Node环境时使用而已),选择Node版本,保存即可。 image.png

Publish Over SSH配置

返回系统管理,点击系统配置,拉到下面SSH Servers,点击新增,填入相应服务器信息;

Name是给服务器起别名,随便填,等下构建后发布选择时用到而已;
Hostname是服务器IP地址;
Username是登录服务器的帐号;
Remote Directory是指定服务器的基本目录,比如你指定了/home目录,那么默认在/home目录下上传代码;
Passphrase / Password是登录服务器的密码;
配置完毕后保存即可。

image.png

钉钉机器人配置

打开一个你想要发送通知的钉钉群,点击右上角群设置,拉下去选择机器人 image.png 点击添加机器人,选择自定义 image.png 填写机器人名字,然后复制Webhook

image.png

返回系统管理,拉到最下面点击钉钉

image.pngWebhook复制到输入框内保存即可。(id不必手动填写,会自动生成)

image.png 接着返回系统管理点击个人资料点击设置,在钉钉信息中填写钉钉群组中你想要通知的用户的手机号码,比如你想要通知群里面的张三,他的手机号码是131xxxxxxxx,那么你就在这填写131xxxxxxxx。

image.png

配置构建任务

插件安装完毕后,返回控制台,在我的视图能看到构建任务列表,选择我们刚新建的任务,点击任务名称进入详情,点击配置。

image.png

输入描述

描述这个构建任务是用来干嘛的。 image.png

添加机器人

点击添加钉钉机器人,输入机器人的名称(随便输入);

选择通知时机,比如你勾选了构建成功后,那么当任务构建完成并成功时才会触发机器人向钉钉群发送通知;

录入通知人,勾选atAll就是@所有人,文本框输入的就是你想要@的群成员的手机号码,比如上面配置了张三的手机号码131xxxxxxxx,那么你在这里输入131xxxxxxxx,到时机器人通知时就会@张三;

自定义内容就是机器人发送通知到钉钉群的内容,下图中${branch}等是环境变量,会在下面参数化构建过程中配置的。 image.png

配置仓库地址

如果你的代码仓库是Github地址的话,直接勾选Github项目,粘贴你的Github仓库地址即可。如果不是Github仓库的话,请不用勾选。

image.png

参数化构建过程

如果你的构建需要构建参数的话,可以添加参数,像我这里就添加了2个选项参数,一个是分支,另一个是需要打包到哪个环境。 image.png 添加完毕后,进行项目构建时,就会出现要求选择刚刚配置的2个选项效果。

image.png

上面提到,如果仓库不是Github地址的话,我们需要在源码管理添加仓库地址,Repository URL输入你的代码仓库地址,Credentials输入你的仓库账号/密码。

image.png 另外还可以指定分支,像我这里${branch}就是根据选择的分支选项动态指定,比如我选择了origin/master,就会拉取master分支的代码,选择了origin/dev,就会拉取dev分支的代码。

image.png

构建触发器

这一步不是必选的,它可以帮助你实现自动触发构建,比如提交代码后自动触发,如果我们是手动点击构建的话可以忽略。

image.png

选择构建环境

我们勾选Provide Node & npm bin/ folder to PATH,接着NodeJS Installation选择一个Node环境,其实这个就是我们刚刚上面全局配置的那个Node环境。

image.png

增加构建步骤

下一步就是增加构建步骤,选择执行Shell,在文本框编写我们的Shell脚本

image.png

node -v
rm -rf node_modules
npm install
if test $env = "test"; then
	echo "test"
    npm run build:test
else
	echo "prod"
    npm run build
fi

上面脚本的意思是,首先查看Node版本,接着删除node_modules,执行npm install下载依赖包,下载完毕后,判断我们选择的环境如果是test选项,则执行npm run build:test命令,否则执行npm run build命令。(其中$env就是我们上面参数化构建过程中添加的env选项)

构建后操作

上面的构建脚本编写完毕后,我们点击增加构建后操作步骤,选择Send files or execute commands over SSH,它就是通过SSH上传构建后的代码到服务器image.png 点击Add Transfer Set 添加传输集会出现下图的表单,这里我们要新建2个传输集,第一个用于清理服务器中存放前端项目打包结果的目录,第二个用于上传代码到服务器 image.png

清理服务器中存放前端项目打包结果的目录

这里的SSH Server,在Name字段选择一个SSH对象,就是我们在上面全局配置的Publish Over SSH对象,选择之后就是以它作为上传代码的远程服务器。

第一个传输集不要填写Source files,这样Exec command填写的命令才会在上传文件之前执行。

官网描述:
SSH传输集必须包括源文件模式、Exec命令或两者。如果两者都存在,则在执行命令之前传输文件。如果要在传输文件之前执行,请使用“2个传输集”,并将“执行”命令移动到包含源文件模式的传输集之前。

下图中Exec command命令的意思是先进入nginx配置的前端项目的目录(我这里配置的是/home/ebmp/cnsscssweb/web),再清空目录。 image.png 显然上面的操作非常危险,不推荐使用rm -rf ./* ,所以可以通过执行shell脚本方式清空目录。

cd /home/ebmp/cnssossweb/web
chmod u+x clear.sh
./clear.sh

clear.sh文件内容

echo "clear.sh running..."
rm -rf ./css 
rm -rf ./js 
rm -f ./index.html 
上传代码到服务器

第二个传输集用于上传打包后的文件到服务器,Soruce files是指定工作区中要上传的文件/目录,比如我这里的dist/**/** 就是仅上传dist及其子目录/文件。Remove prefix是指不上传基本目录,比如我指定dist为基本目录,那么Remove prefix中填写dist则只会上传它的子文件/目录。

image.png

保存配置,开始构建

保存配置后,返回工作台,选择构建项目,点击Build with Parameters,选择分支和环境后Build

image.png 此时我们在左下角可以看到构建进度

image.png 这样就开始代码拉取->node构建->打包->上传代码->发送通知的自动化操作了。
我们可以查看控制台中每一步骤的输出日志。

image.png

任务完成后,测试环境前端实现更新,机器人也成功推送通知到钉钉群。

image.png

That's all,OVER!