如何推行我司前端自动化构建部署,自己先梭哈一把,不香么?

16,186

前言

大家好,我是虚竹,武功练de再好,也要与各路英豪切磋切磋。今天我们先来聊一聊前端项目自动化构建部署的那些事儿。查找收集过很多相关资料教程都讲的不全,比较简陋,所有写了这篇实战水文。超级,超级详细,建议收藏慢慢看。如果已有这方面的基础或经验可以挑着看。

由于前端自动化构建部署工具已经很成熟,更是一种趋势,成为前端开发者的好帮手。近期有点空闲时间,都会独自练功,思考着应该如何做,怎么做,能为公司前端团队推行前端工程化而提高工作效率。俺们就先从最火的部署工具Jenkins,前端自动化构建部署发布开始着手。

话不多说,搂起袖子就一顿乱操作,感觉走火入魔似的。通过不断尝试研究体验一番后,觉得以前写的前端项目都是纯手工打包部署到各个环境,而且是手动输入命令执行,打包完,然后压缩,登录各种服务器账号,再上传到服务器解压的部署流程(感觉繁琐费时费力)。特别是在产品快速迭代开发阶段,测试环境BUG反馈快速修复更新,多个项目切换及发布版本频繁等尤为明显。认为这种方式确实有点 low 并且效率也不高。要是能把构建部署发布这些时间省下来,去干重要的事情,比如多写几个 bug,也是不错的选择。

自从用了 Jenkins 持续集成工具,写前端项目越来越工程化,再也不用担心忘记部署项目,也不用烦躁每次打包压缩后还要部署多个服务器和环境,更开心的是如果在家里写完代码,不用远程公司部署项目,提交代码后自动会为你部署。

本文基于Vue框架前端项目和 Gogs 代码仓库、Github 代码仓库、以及 Windows10 操作系统、CentOS 操作系统(其他操作系统平台大同小异),下面开始进入正题。

什么是 CI/CD?

  • 持续集成(Continuous Integration,CI):代码合并、构建、部署、测试都在一起,不断地执行这个过程,并对结果反馈。
  • 持续部署(Continuous Deployment,CD):部署到测试环境、预生产环境、生产环境。
  • 持续交付(Continuous Delivery,CD):将最终产品发布到生产环境,给用户使用。

简易流程图如下:

CI/CD 优点:

1、提高开发人员生产力 CI/CD 实践使开发人员从手动任务中解脱出来,处理复杂的依赖项,并将精力集中在提供新功能上,从而提高了团队的生产力。开发人员可以将精力集中在提供所需功能的编码逻辑上,而不必将其代码与业务的其他部分集成并花费时间在如何将此代码部署到平台上。

2、自动化软件发布流程 连续交付为团队提供了一种方法,用于检入已自动构建,测试并为发布到生产环境而准备的代码,从而使软件交付高效,有弹性,快速且安全。

3、提高代码质量 CD 可以帮助自己在交付过程中尽早发现并解决错误,然后再将它们变成更大的问题。团队可以轻松执行其他类型的代码测试,因为整个过程已经自动化。通过更频繁地进行更多测试的原则,团队可以更快地迭代,并立即获得有关变更影响的反馈。这使团队能够以高度的稳定性和安全性来驱动质量代码。开发人员将通过即时反馈了解新代码是否有效以及是否引入了任何重大更改或错误。在开发过程中尽早发现的错误最容易解决。

4、更快地提供更新 CD 可帮助团队快速,频繁地向客户提供更新。当实施 CI/CD 时,整个团队的速度,包括发布功能和错误修复的速度都会提高。企业可以更快地响应市场变化,安全挑战,客户需求和成本压力。例如,如果需要新的安全功能,团队可以实施 CI/CD 并进行自动测试,以高度自信地将修复程序快速可靠地引入生产系统。过去需要花费数周甚至数月的时间,现在可以在几天甚至几小时内完成。

什么是 Jenkins?

Jenkins 是一个开源的、可扩展的持续集成、交付、部署(软件/代码的编译、打包、部署)的基于 web 界面的平台。允许持续集成和持续交付项目,无论用的是什么平台,可以处理任何类型的构建或持续集成。

Jenkins官网

Jenkins官方文档

Jenkins特性:

  • 开源的java语言开发持续集成工具,支持CI/CD;
  • 易于安装部署配置:可通过 yum 安装或下载 war 包以及通过 docker 容器等快速实现安装部署,可方便 web 界面配置管理;
  • 消息通知及测试报告:集成 RSS/Email 通过 RSS 发布构建结果或当构建完成时通过 Email 通知,生成JUnit/TestNG 测试报告;
  • 分布式构建:支持 Jenkins 能够让多台计算机一起构建/测试;
  • 文件识别:Jenkins 能够跟踪哪次构建生成哪些 jar 包,哪次构建使用哪个版本的 jar 包等;
  • 丰富的插件支持:支持扩展插件,你可以开发适合自己团队使用的工具,如 git,svn,maven,docker 等。

准备工作

安装 JDK 8

  • Oracle 官方下载地址:www.oracle.com/java/techno…
  • 选择对应版本下载,我选择 Windows 系统版本安装 JDK 8
  • 双击 jdk-8u301-windows-x64.exe 安装,然后下一步下一步直到完成,JDK 的安装路径需知道。

  • 配置环境变量(安装 jenkins.jar 包,发布 java 程序代码)

查看版本,出现如下画面,说明已安装成功。

安装 GIT

  • git 官方下载地址:git-scm.com/download/wi…
  • 选择最新版本,双击 Git-2.33.0.2-64-bit.exe 安装,按照操作下一步下一步直到完成。

  • 配置环境变量

查看版本,出现如下画面,说明已安装成功。

安装 Jenkins

Jenkins 官方下载地址:www.jenkins.io/zh/download…

选择对应的安装包,我选择 Windows 版本下载

双击 jenkins.msi 软件包,按照操作提示下一步下一步直到完成,如下图所示:

出现这个画面,说明 Jenkins 已启动成功,现在可以打开这个地址http://localhost:9090 建议用你的IP访问,

找到以下提示中的路径,用记事本打开文件,把其中的密码复制粘贴到这里,如下图所示:

插件安装请选择推荐插件

插件正在安装中,请耐心等待。

插件安装完成以后将会创建管理员账户,如下图所示:

出现这个画面说明 Jenkins 已经安装成功,如下图所示:

恭喜您,可以正常运行访问 Jenkins 网站

Jenkins 切换中文(喜欢英文版可忽略此项)

操作步骤:

  • 安装插件:Manage Jenkins -> Manage Plugins -> Available -> Filter 中输入 Locale -> 勾选后点击 Install without restart
  • 设置中文:Manage Jenkins -> Configure System -> Default Language 中输入 zh_CN -> 勾选 Ignore browser preference and force this language to all users -> 点击 Save

Jenkins 配置

安装相关插件:git、gogs、email、nodejs、Publish Over SSH

系统管理 -> 插件管理 -> 可选插件 -> 过滤:git、gogs、email、nodejs、Publish Over SSH -> 直接安装

全部安装完成后,在网址根目录输入/restart进入点击 即可重启,如:http://localhost:9090/restart

插件安装好后,下面可以进行相关配置

系统管理 -> 全局工具配置 -> 配置 jdk、git、nodejs -> 点击应用保存

至此,配置已基本完成。

gogs 建立项目并配置

建立仓库

公司已搭建好 gogs 服务,这里就不介绍怎么自建代码服务器了,先创建一个自己的仓库,将本地构建好的 Vue 项目直接上传到 git 仓库,如下图所示:

配置 Webhooks

仓库设置 -> 管理 Web 构子 -> 添加 Web 钩子 -> 选择 Gogs -> 点击添加保存

添加 web 钩子,含义:推送代码后告诉 Jenkins “帮我发布一下”,然后 Jenkins 就会发布了,是不是很神奇。

推送地址格式为:http(s)://<你的Jenkins地址>/gogs-webhook/?job=<你的Jenkins任务名>

添加完成之后,gogs 这边就已完成了。

创建 Jenkins 自动化任务

在主界面点击新建任务,输入任务名后确定,注:必须和web钩子地址里面的任务名保持一致

选择创建一个自由风格的软件项目,如下图所示:

点击确定后,进入任务界面,如下图所示:

项目配置

进入新创建的任务界面,点击左侧配置按钮,进入配置流程,如下图所示:

共7个模块:

  1. 是此项目全局配置
  2. 是代码采用的仓库配置,我这边采用的是开源的 gogs,是在社区找的 gogs 插件,同理 gitlab、github、gitee 等主流开源仓库社区都有相关插件,安装即可;
  3. 是源码配置模块,主要是配置 源码相关;
  4. 是构建触发器,主要是配置构建触发,构建时机,间隔等等;
  5. 是构建环境配置;
  6. 是构建相关操作及配置,比如拉取源码,安装依赖,编译打包及发布都可以在此模块完成;
  7. 是构建后操作,发布至服务器,删除或存档服务器上旧代码都在此模块操作。

点击配置选择 Gogs Webhook,如果在 gogs 中你没有设置密钥文本,那这里可不填

去源码管理勾选 git 配置相关参数,如下图所示:

以上几个字段说明:

  • Repository URL:仓库克隆地址(我用的http,ssh配置比较麻烦)
  • Credentials:git登录账号密码
  • Branch Specifier (blank for 'any'):需要构建的分支(指定发布的分支)
  • 源码库浏览器:选gogs或者默认自动

构建触发器配置,如下图所示:

构建环境配置,如下图所示:

构建配置,如下图所示:

点击保存,项目配置全部完成,自动进入任务界面,点击立即构建按钮,如下图所示:

出现构建历史记录及状态,绿色标记代表成功,红色标记代表失败,橙色标记代表不稳定。点击标记可以查看日志,控制台输出结果。

发布远程服务器

需要配置 SSH 插件,一般采用社区常用的 publish over ssh 插件,前面 Jenkins 配置部分已安装过此插件。

系统管理 -> 系统配置 -> 配置 publish over ssh -> 点击保存

点击右侧高级按钮,勾选使用用户密码连接,如下图所示:

点击 Test Configuration 按钮测试连接远程服务器是否成功,出现 Success 提示说明连接已成功。

通过 FinalShell 工具登录自己的服务器,我的是CentOS 7 操作系统,执行命令如下:

// 安装
yum install nginx

// 启动
nginx -s start

// 重启
nginx -s reload

// 停止
nginx -s stop

如果想查看自己服务器的系统相关信息,执行以下命令:

// 查看操作系统信息
uname -a

// 查看系统版本
cat /etc/redhat-release

// 查看端口占用情况
netstat -tunlp

// 杀进程
kill -9 PID

出现下面的画面,说明 nginx 已安装成功,可以愉快的玩耍了。

在 /etc/nginx/conf.d 路径新建一个 jenkins.conf 配置好以下内容,重启 nginx 命令,代码如下:

server {
        listen 9999;
        listen [::]:9999;
        server_name _;
        root /usr/share/nginx/jenkins/test/dist;
        index index.html index.htm;
        try_files $uri $uri/ /index.html;
}

创建文件夹用于存放打包部署的代码路径地址,如下图所示:

接下来就可以测试一下,一键发布功能了。先将本地项目代码改个内容,git 提交更新后,如下图所示:

已经通过 Jenkins 工具将代码发布到了远程服务器,可以访问项目地址看看效果,如下图所示:

至此,前端自动化构建部署发布大功告成。由于篇幅太长,很多地方讲得不细,后面会简单介绍一下 github 的构建配置不同之处,其他都大同小异,以及一些小技巧。

github 建立项目并配置

生成 secret text

secret text 在 github 上被称为 token,进入 github -> Settings -> Developer settings -> Personal access tokens -> Generate new token

填写好 token 的名称,勾选完下面两个选项,之后按 Generate token 按钮进行确认,保存好自己的 token。

设置 github webhooks

接着,创建一个 github 项目仓库,上传本地项目代码到 github 仓库,进入 github 上指定的项目 -> Settings -> Webhooks -> Add Webhook -> 输入 Jenkins 服务器IP

Payload URL 的地址就是 http://your ip:port/github-webhook/

配置 GitHub Plugin

新版本的 Jenkins 已经帮我们安装好了 github plugin 插件,全局配置进入系统管理 -> 系统设置 -> GitHub -> 添加 Github 服务器

凭据 Credentials 点击添加,类型选择 Secret Text,如下图所示:

点击添加按钮后,下拉选择凭据,选择你新增的那个凭据,然后点击连接测试按钮,提示 Credentials verified for user xxx, rate limit: xxx 信息,则凭据有效。

General 设置

源码管理

点击添加凭据,具体操作如下图所示:

构建触发器

其他模块操作,跟 Gogs 配置是一样的,这里就不多说了。

查漏补缺

代码回滚

回滚方式有两种:

  • 通过git来回滚
  • 通过发布时备份,回滚时选定备份文件进行回滚

我选择了第一种简单粗暴的方法,先将本地代码提交到 git 仓库,然后打上 tag 标签,命令如下:

git commit -a -m "懒人码农"
git push origin master
git tag -a v1.0.0 -m "说明版本号"
git push origin v1.0.0

// 查看 commit id
git log --pretty=oneline --abbrev-commit
// 删除 tag 版本
git tag -d v1.0.0

效果如下图所示:

点击任务名 -> 点击配置 -> 点击 Gogs Webhook -> 勾选参数化构建过程 -> 添加参数(选择Git参数配置)-> 点击保存

除了发布版本,回滚版本也已经配置好了,完美。

工作空间

有两种方式修改默认工作空间:全局配置和局部配置

局部修改,直接进入某工作任务界面,点击 Gogs Webhook 右下角高级按钮,勾选自定义工作空间,如下图所示:

全局修改,我选的是这种方式,考虑到项目多会占用C盘容量,所以进行全局位置更改,如下图所示:

邮件通知

前面 Jenkins 配置中已经在插件管理安装好了 Email Extension Plugin 邮件插件,进入系统管理 -> 系统配置,如下图所示:

特别说明邮件通知里面的 SMTP 认证的密码是授权码,不是邮箱密码。QQ邮箱授权码获取方法(QQ邮箱设置页面 -> 账户安全 -> 点击生成授权码)

进入 Gogs-test 任务配置界面,点击构建后操作,如下图所示:

一键部署后,查看控制台界面,如下图所示:

至此,邮件通知配置已完成,随时都能查看构建部署是否成功的情况。

结语

由于篇幅太长,就写到这吧,其实还有很多细节没讲到,以及在 linux 系统环境下安装部署 Jenkins 搭建自动化平台等等。还有我司如何推行自动化部署这块,等我司真正落实执行一段时间后,再分享一篇心得体会。每一篇原创都是作者的用心之作,如果觉得此文写的还行,或对你有一丢丢帮助的话,请点赞鼓励一下,谢谢了。

另外此文如有写得不好的地方,欢迎批评指正。愿与各位大虾们一起交流讨论,一起学习一起进步。

关注公众号【懒人码农】,获取更多项目实战经验及各种源码资源。如果你也一样对技术热爱并且为之着迷,欢迎加我微信【lazycode520】,将会邀请你加入我们的前端实战交流群一起创造 BUG,一起面向快乐编程~ 🦄