【我上我也行】前端自动化部署Jenkins最佳实践

2,941 阅读4分钟

1 持续集成、持续交付、持续部署

根据我们平时的工作流程,我们可以简单的了解下什么是集成、交付和部署

  • 集成:将我们的开发分支合并到主分支,尽早解决合并后可能出现的问题,比如冲突合并,单元回归测试
  • 交付:在集成没问题的基础上,在类线上环境进行代码功能的测试,看看有没有bug
  • 部署:将变更同步部署到线上环境,进行验证

那么前者加上持续chi jiu后又有什么不一样呢?主要区别在于后者是自动化的频繁(周期性)的进行。

什么意思呢,举个例子,我们接到一个电商系统迭代的需求,涉及到了首页、商详、下单等子系统,为了保证产品的交付质量和速度,在原有各子系统交互的协议不变的前提下,我们一般会将每个子系统的迭代在各自的功能分支内完成开发以及测试和发布环节,自身重构后的问题也能各自功能分支的环节中尽早发现及解决。这样的话每完成一个子系统的迭代环节,就向下个环节交付,发现问题可以马上调整,问题也就不会放大到其他子系统和以及后面的环节。

直白一点就是,我们不会等到所有代码都写好了,测试好了,再一起发布到线上,这样最后可能问题会多到爆,并且中间进度很受影响,而是写一点就测试一点,然后发一点。并且会使用一些自动化工具帮助我们提高效率,规避风险。

2 Jenkins+Github 自动化构建部署实践

俗话说工欲善其事必先利其器,下面我们就使用当下比较流行的一款CI工具Jenkins结合Github和Nginx,看看如何完成前端项目的自动构建和部署。

安装Jenkins

首先,大家可以在Jenkins官网下载自己对应系统的最新版本,我这边下载的是Windows版本的,安装后默认会在浏览器通过http://localhost:8080打开。

jenkins初次加载
jenkins初次加载

经过几分钟的等待,界面跳转到初次解锁界面,可以根据界面中的路径提示填写管理员密码

jenkins初次登入
jenkins初次登入

随后来到插件安装界面,因为默认的插件源是国外的,一般下载是非常慢,所以这边建议点击右上角的关闭直接跳过

jenkins插件安装
jenkins插件安装

接下来我们用管理员账号进入到Jenkins,这边的镜像用的是tuna Jenkins镜像,可以在该网站上下载插件通过导入的方式安装,也可以直接替换Jenkins插件设置面板中的插件源为

https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json

然后在可选插件面板搜索插件进行安装。

  • localization-zh-cn
  • publish-over-ssh
  • git-parameter

安装完毕记得重启一下Jenkins,重新登入后,就可以开始其他的配置了。

开启远程服务器的Nginx服务

这个这里就不详说了,网上的教程很多。我们在服务端开启之后,然后将服务的端口和html路径记录下来备用就好了

配置Jenkins

先在远程服务端配置一个SSH服务,linux和windows系统的配置方法不一样,可以参考这个如何启动SSH服务,没有服务器的同学,这边安利阿里云他们家的,新用户还有限期免费的用,接下来就可以在Jenkins配置以下信息

SSH配置
SSH配置
SSH配置
SSH配置

然后我们需要新建一个项目,进入到项目配置

Jenkins新建项目
Jenkins新建项目

添加描述后,配置源码来源,链接是我们仓库代码的主页url

Jenkins项目配置-获取源码
Jenkins项目配置-获取源码

连接GitHub需要先添加凭据,填写保存完毕,勾选该凭据即可使用

Jenkins项目配置-获取源码-添加凭据
Jenkins项目配置-获取源码-添加凭据

接下来就把我们上面配置的SSH服务添加到Jenkins项目配置中

Jenkins项目配置-服务器配置
Jenkins项目配置-服务器配置

最后添加构建需要的shell就好了,点击保存,即可使用

Jenkins项目配置-构建配置
Jenkins项目配置-构建配置

到了激动人心的时刻了,点击构建,然后可以在控制台中看到日志

Jenkins开始构建
Jenkins开始构建
Jenkins构建日志
Jenkins构建日志
Jenkins构建部署成功
Jenkins构建部署成功

访问我们服务器nginx服务的地址,大功告成!

访问页面
访问页面

如有错误,敬请指正!

本文使用 mdnice 排版