Jenkins 实现前端自动打包,自动部署代码及邮件提醒功能

阿里云2000元红包!本站用户参与享受九折优惠!

在之前的公司,我们前端使用webpack构建项目,项目构建完成后,我们会使用ftp或linux的一些命令工具上传我们的文件到服务器上,这种方式虽然是可以,但是最近面试的时候,人家会问我前端如何部署项目,我就说我们公司目前是这样操作的,最后人家会感觉很low,最后总之总之没有面试上。因此今天来给大家介绍下使用Jenkins基于github来实现前端自动化集成打包部署前端资源文件。 Jenkins基本介绍: Jenkins是一个开源软件项目,它是基于java开发的一种持续集成工具,它用于监控持续重复的工作。 它最大的优点是:在开发环境或测试环境代码部署都不需要运维介入,而是相关的开发人员,测试人员登录jenkins构建需要部署的tag或分支代码即可。整个过程不需要运维参与。因此我们现在想使用jenkins的话,我们首先需要安装java开发环境。 一:安装java环境 1)安装默认的JRE/JDK 更新命令: sudo apt-get update 检查是否安装了java: java -version 如果java命令没有找到的话,就说明没有安装java,因此我们需要安装java环境。 需要执行如下命令: sudo apt-get install default-jre 因此会安装JRE(Java Runtime Environment). 如果我们需要安装JDK(Java Development Kit)的话,请执行如下命令: sudo apt-get install default-jdk 然后我们查看java版本,来测试java环境是否安装成功了,如下命令: $ java -version 如下图所示: 二:安装jenkins 按照官方文档来( https://jenkins.io/zh/doc/book/installing/ )安装即可:执行如下命令来安装: $ 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

$ sudo apt -get install jenkins 如下图所示: 如上,因为我现在用的是自己的华为笔记本电脑,默认是使用的是linux系统。因此按照官网上的步骤安装即可。 安装完成后,jenkins的文件目录如下: 安装目录:/var/lib/jenkins 日志目录: /var/log/jenkins/jenkins.log 2)启动jenkins service jenkins start 会报如下错误: bash: service: 未找到命令 解决的办法是:直接使用 su -root 来切换到root用户,比如如下命令: $ su – root 然后使用 /sbin/service 来操作,比如如下所示命令: $ /sbin/service jenkins start 这样我们就启动了jenkins了,现在我们就可以在浏览器下访问 http://localhost:8080/ 即可,如下所示: 注意:jenkins是部署在本地的,默认端口为 8080; 浏览器进入Jenkins,登录地址为: http://localhost:8080/; 关闭Jenkins的地址为: http://localhost:8080/exit; 重启Jenkins的地址为: http://localhost:8080/restart; 重新加载配置信息: http://localhost:8080/reload; 2.2 在服务器的指定目录找到密码登录 /var/lib/jenkins/secrets/initialAdminPassword 因此我们在命令行中运行如下命令即可获取到密码了;如下查看命令: $ sudo vim /var/lib/jenkins/secrets/initialAdminPassword 然后复制密码后填写上去,继续执行下面的步骤即可。 这个过程可能会加载很慢,我们稍等一下后,我们按照默认配置安装插件即可,如下所示: 然后会进入如下页面进行默认安装插件即可,如下所示: 安装完成后,我们需要 创建第一个管理员用户。如下所示: 创建完成后,就可以开始使用jenkins,如下图所示: 接下来我们可以开始使用我们的Jenkins了,如下所示: 三:Jenkins实现自动化部署 实现的目标是:我们的本地项目发起一个git提交后,剩下的单元测试, 打包构建,代码部署,邮件提醒等,我们会全部自动化完成部署。 3.1. 准备 首先我们随便准备一个项目(我这边是使用webpack搭建的vue项目了),在git仓库中新建一个项目,然后把该本地项目提交到github上去。 比如我这边项目如下所示: 3.2. 在jenkins中绑定github 我们现在要实现这么一个功能,当我们在本地项目往github远程仓库push我们的代码的时候,jenkins就能知道我们提交了代码,要实现这么一个功能的基本原理是:在远程仓库上需要配置一个Jenkins服务的接口地址,当本地向远程仓库发起push时候,远程仓库会向配置的Jenkins服务器的接口地址发起一个带参数的请求,当jenkins收到后开始工作。 配置步骤如下: Github配置 1) 在Github上获取访问token的值,需要一个对项目有写权限的账户。 如果要实现自动构建的话,Jenkins需要获得远程代码仓库Github的读取权。 点击右上角的 Github –> setting –> Developer settting –> Personal access tokens -> 点击Generate new token 填写如下所示的内容: 创建成功后,会生成一个token的值如下: 先保存好这个token,后面会使用到。 2) 用Ngrok实现内网穿透 Ngrok的用途是:将内网的IP映射成对外可访问的域名。 国内Ngrok官网可以了解下: https://www.ngrok.cc/ 我们需要注册一个账号,注册完成后,我们可以直接添加隧道。如何开通隧道,可以看这篇文章( https://www.sunnyos.com/article-show-67.html ) 开通完成后,我们变成如下这个样子了,如下图所示: 现在我们需要点击上图的客户端下载,下载自己系统对应的客户端。然后压缩后,文件夹内会有一个 叫 sunny 这个bat文件,我们进入下载目录的文件夹下,使用linux移动命令把该批处理文件移动到 /usr/local/bin 目录下即可;命令如下所示: $ sudo mv sunny /usr/local/bin 然后我们进入 /usr/local/bin 目录下,运行命令: ./sunny clientid 隧道id; 即可,隧道id就是我们刚刚生成的。比如如下所示: 运行该命令后,我们回车可以看到如下信息了,如下图所示: 因此我们现在访问:http://kongzhi.free.idcfengye.com 就可以访问对应的本地服务 http://127.0.0.1:8080/ 服务了。如下所示: 3)Github webhooks设置 进入Github上指定的项目 –> setting -> WebHooks –> add webhook, 如下图所示: 完成后,点击下面 add webhooks 按钮,即可创建完成,如下图所示: Jenkins的github配置 4)安装Github Plugin 点击 Manage Jenkins -> Manage Plugins -> 可选插件, 如下图所示: 点击下面的 “直接安装” 按钮, Jenkins会自动帮我们解决插件的依赖。如下图所示: 5)配置Github Plugin Manage Jenkins -> Configure System -> Github -> 点击添加Github服务器, 如下图所示: API URL 默认为:https://api.github.com,我们不动它,然后凭据点击 Add添加,如下图所示: 如上,我们之前已经生成了token之后。在如上配置中,我们页面中的类型选择 Secret text,在Secret中黏贴Github生成的Token,id和描述可以随便写,或不填。 最后点击添加按钮后,会回到主页面,在凭据中选择我们刚才创建的凭据,然后我们点击 “链接测试”。如果没有成功的话,则需要返回重新操作以上步骤,如下所示,我们只要点击保存完成配置即可,如下图所示: 到这里,基础配置已经完成了。 3.3. Jenkins中创建任务 1) 点击创建一个新任务,如下图所示: 输入一个任务名称,比如叫 testJekins, 然后选择第一项即可。如下图所示: 因此准备工作已经完成了,我们输入任务名称后,选择第一项后,点击底部的确定按钮,就可以进入下一步的页面了,如下图所示: 如上选择Github,填写项目的URL,该地址是我们Github上的主页地址,不是github资源地址。 2). 源码管理配置 打开刚刚我们创建的任务,切换到 “源码管理” tab项,然后在左侧选择 Git,然后我们把我们的github项目中的仓库地址,添加配置登录名和密码(点击添加会弹出一个框,我们默认操作就行),及分支。如下图所示: 3). 构建触发器 4). 构建环境 其他暂时不用配置。配置完成后,我们再回到列表页面,看到基本的效果如下图所示,现在我们在本地项目代码再push一下,看是否发生了变化。 如上我们可以看到,我们每次代码push的时候,Jenkins会自动帮我们构建一次,但是它有几秒钟的延迟,如果我们立即push完成后,刷新页面后,并没有立即看到构建完成,而要过几秒钟再看下就可以了。 我们也可以看看控制台输出的信息也可以看得到如下信息,代表构建成功了。如下: 我们也可以看得到,我们的testJenkins项目中也有我们github上的项目中的所有文件,如下所示: 如上只是简单使用我们的github中的push命令后,在Jenkins中构建一下我们的代码,但是我们都明白我们希望的是,我们的push命令后,在Jenkins上会帮我们自动打包,比如像webpack中一样,调用npm run build 这样的命令后,打包到dist文件夹内,然后把dist文件夹内的所有代码放到ftp服务器下,因此我们想使用jenkins是否也能实现这样的呢? 5). 实现自动化构建 如上git push 触发钩子后,jenkins就可以开始工作了,我们之前使用webpack打包的,我们现在放到Jenkins来做这件事。 在我们的package.json 文件中有如下二个命令: “scripts” : { “dev”: “webpack-dev-server –progress –colors –devtool cheap-module-eval-source-map –hot –inline” , “build”: “webpack –progress –colors –devtool cheap-module-source-map” }, 为了能在Jenkins能自动打包构建,首先我们需要安装依赖包,使用命令:npm install,最后使用npm run build 构建文件。因此会使用到如下两个命令: npm install
npm run build 我们想要在jenkins里面执行npm命令的话,首先我们需要在jenkins里面配置node环境,我们可以通过配置环境变量的方式引入node,也可以通过安装插件的方式来引入的,我们这边使用插件的方式吧,安装一下 nvm wrapper 这个插件。 1) 安装NodeJS Plugin 在插件管理界面搜索NodeJS,找到后,安装,重启,如下所示: 2) 安装NodeJS Manage Jenkins -> Global Tool Configuration -> NodeJs(点击新增NodeJS按钮) 如下图所示: 点击保存按钮即可。 3) 在构建环境配置下安装nodejs 构建环境勾选 Provide Node & npm bin/folder to PATH,如下图所示: 每次build,都会首先执行环境构建,如果环境没有错误后,才会开始真正的实现构建过程。 4) 构建 我们现在可以把我们的打包命令放到构建中了,在构建过程中会执行该命令进行打包。如下命令: npm config set registry http://registry.npm.taobao.org/ && npm install && rm -rf dist && npm run build 如下所示: 然后我们就可以点击保存按钮了。 此时我在本地项目中改下代码,然后使用git push代码上去的时候,就可以测试下,在push的过程中,再看看Jenkins中如下所示: 然后点击下面正在的的构建,控制台输出选项,如下图所示: 选择查看控制台就可以看到构建输出的信息了,如下图所示: 等构建完成后,命令行最后一行是Finished的状态如果是SUCCESS,则证明执行的任务顺利完成了。如果是FAILURE则证明中间有重大错误导致任务失败。UNSTABLE代表有些小问题,但是不阻碍任务执行。 代码在构建的过程中,会报如下的错误: 解决的办法在命令行中运行命令: sudo npm -g install phantomjs-prebuilt@2.1.16 –ignore-script 稍等一会儿,我们可以看到构建成功信息了,如下图所示: 然后我们点击项目的工作空间,将会发现多了dist和node_modules两个文件夹了。如下图所示: 如上我们的代码已经自动构建完成了,但是我们目前还没有部署到某个服务器上去,因此我们现在要实现这么一个功能。 6). 实现自动化部署 自动化部署功能是需要的,因为如果公司只有一台服务器,我们可以使用人工部署的方式,但是如果公司有10台服务器甚至更多的话,如果使用人工方式,就很吃力了,并且一旦线上出问题了,回滚操作也比较麻烦。所以我们需要实现一个自动化部署的功能。 先在Jenkins上安装一个 Public Over SSH 插件,我们将会通过这个工具来实现服务器部署的功能。 1) 安装插件 点击 Manage Jenkins -> Manage Plugins -> 可选插件中,搜 Public Over SSH 插件,点击安装,安装完成后,重启Jenkins 如下图所示: 2)配置 点击 Manage Jenkins -> Configure System -> 拉倒最下面就有该窗口了,如下所示: 配置项的含义如下 Passphrase: 密码(key的密码,如果没有的话就不填写) Path to key: key文件(私钥)的路径 SSH Server Name: 标示的名称(随便写) Hostname: 需要链接ssh的主机名或ip地址,建议写服务器ip Username: 用户名 Remote Directory: 远程目录(服务器文件目录: 比如 /usr/local/nginx/pcweb/) 如上填写完成后,点击保存按钮即可,我本地电脑没有对应的服务器,因此暂时不测试了。 配置完成后,我们需要到我们创建的任务,点击构建项tab,增加2行代码,如下: cd dist && tar -zcvf dist.tar.gz * 含义是:进入dist文件夹内,把所有的文件打包成一个文件。如下所示: 点击构建后操作,增加构建后操作步骤,选择send build artificial over SSH,然后会弹出一个框,如下图所示: 参数说明: Name: 选择一个我们配好的SSH服务器 Source files: 我们要传输的文件路径 Remove prefix: 要去掉前缀,不写远程服务器的目录结构,和Source files 写的一致。 Remote directory: 要写部署在远程服务器的那个目录地址下,如果我们不写的话,就是SSH Servers配置里面的默认远程目录。 Exec command: 传输完了要执行的命令,我们可以执行解压缩和解压缩完成后删除压缩包的2个命令。 因此 Source files 可以填写:dist/dist.tar.gz; 这样的。 Remove prefix 可以写成: dist/ Exec command可以写成如下命令: cd testJenkins tar -zxvf dist.tar.gz rm -rf dist.tar.gz 最后我们点击保存按钮即可,现在我们在我们的本地修改完代码后,直接git push,在jenkins会自动构建打包,且会自动部署到我们服务 器代码上了。 3.3 实现邮件提醒 待续更新中…… (目前还有其他重要的事情要处理)https://www.cnblogs.com/tugenhua0707/p/11949644.html

「点点赞赏,手留余香」

    还没有人赞赏,快来当第一个赞赏的人吧!
pandas
0 条回复 A 作者 M 管理员
    所有的伟大,都源于一个勇敢的开始!
欢迎您,新朋友,感谢参与互动!欢迎您 {{author}},您在本站有{{commentsCount}}条评论