前端开发如何让持续集成/持续部署(CI/CD)跑起来

矫情吗；* 2022-09-07 09:40 237阅读 0赞

近几年，伴随着前端技术日新月异的发展，前端开发中前后端分离，工程化，自动化等现代化的开发模式越来普及，前端项目也引入了编译，构建，单元测试等现代软件工程化的标准环节。这样大提高了前端的开发效率和业务交付能力。但是，在代码集成，项目部署阶段，我们还需要引入 [CI][] / [CD][] 等现代化的软件开发实践，来减少风险和重复过程，节省我们的时间。

我们废话少说，这里不再对 持续集成/持续部署(CI/CD) 的概念做过多赘述，本文主要分享一下如何基于 [gitlab][] 、 [jenkins][] 让 CI/CD 跑起来。

其中：

*  gitlab 用于代码版本管理，并通过其提供的 webhook 功能，触发 jenkins job 的运行。
 *  jenkins 用来执行项目中 单元测试，编译打包相关 npm 命令，并发送反馈邮件，执行远程部署脚本。
 *  nodejs 用于提供单元测试，编译打包功能的 npm 命令

在我们的前端项目里（如： [hanan198501/vue-spa-template][hanan198501_vue-spa-template] ），一般使用 karma 来运行单元测试，使用 webpack 来进行打包构建， 使用 npm script 来执行这些任务，其中我们的 package.json 的 scripts 字段就有如下：

"dev": "node build/dev-server.js",
    "build": "node build/build.js", //打包构建
    "build-server": "node build/build-server.js",
    "unit": "karma start test/unit/karma.conf.js --single-run", // 运行单元测试

### 如果没有 CI/CD， 我们的前端从开发到提测工作流程可能如下： ###

1.  本地机器上写代码
2.  在命令行输入 npm run unit，查看单元测试结果
3.  提交代码，push 到 git 远程仓库
4.  登录测试服务器，拉取代码，执行 npm run build，构建项目
5.  如果测试服务器是基于 pm2 的 proxy server，还需要重启 server

这个流程中，每一个步骤都要重复人工操作，很大增加了时间成本，不能保证操作的准确性。对于 unit 或者 build 的结果，没有一个自动的反馈机制，需要人工 check 运行结果，最后部署也是人工登录服务器执行脚本，非常繁琐。

### 引入 CI/CD 以后，整个流程变成： ###

1.  本地机器上写代码
2.  提交代码，push 到 git 远程仓库
3.  git hook 触发 jenkins 的构建 job （自动）
4.  jenkins job 中拉取项目代码，运行 npm run unit 和 npm run build，如果失败，发送邮件通知相关人。（自动）
5.  jenkins job 中执行测试服务器的部署脚本 （自动）

在 CI/CD 流程中，只有步骤1和步骤2需要人工操作，其他步骤都是自动运行，是一个非常标准化的流程，减少了人工操作的风险，省去了重复性工作，增强了项目的可见性。接下来我们将通过配置 jenkins 和 gitlab webhook 来实现这个流程。

### 配置项目的 jenkins job ###

首先，在 jenkins 中需要安装 [Gitlab Hook Plugin][] 这个插件，以支持 gitlab 的 webhook 功能。

> 1.  在 jenkins 左边栏点击 “新建”， 输入 job 名称，选择 “构建一个自由风格的软件项目” 一项。点击 “OK”
>     
>     ![format_png][]
>     
>      
> 2.  进入 job 配置页面，点击 “General” 选项，配置名称和描述
>     
>     ![format_png 1][]
>     
>      
> 3.  点击 “源码管理” 选项，配置项目的 git 仓库地址的需要构建的分支信息
>     
>     ![format_png 2][]
>     
>      
> 4.  点击 “构建触发器” 选项，配置 job 构建时机，勾选 “Poll SCM”，”日程表” 留空。即可通过 gitlab webhook 来触发 job 构建
>     
>     ![format_png 3][]
>     
>      
> 5.  点击 “构建” 选项，再点击 “增加构建步骤”， 选择 “Execute shell”，配置构建命令。 如下，这里配置了 cnpm install、npm run unit、npm run build, 分别做安装依赖、单元测试、编译打包三件事。
>     
>     ![format_png 4][]
>     
>      
> 6.  点击 “构建后操作” 选项，添加两个构建后操作步骤：
>     
>      *  “E-mail Notification”，配置构建失败的邮件通知人；
>      *  “Send build artifacts over ssh”, 执行预先写好的远程服务器的部署脚本
>     
>     ![format_png 5][]
> 7.  点击最下方的 “保存”，job 创建完毕。

### 配置 gitlab webhook ###

进入项目的 gitlab 页面 >> Settings >> Integrations , 添加一条 webhook: URL 中输入”[http://jenkinshost/gitlab/build\_now][http_jenkinshost_gitlab_build_now]"， Trigger 勾选触发时机 ，我们用的是 “Push events”，点击 “Add webhook”。

![format_png 6][]

这样，当有代码 push 到git 仓库时，gitlab 会向 jenkins 服务器发送 post 请求，触发之前创建好的 jenkins job 运行, 代码从开发到部署测试，是一个持续的过程，同时对整个过程错误提供了反馈机制。

从此，前端开发再也不用关心代码 push 以后的事情，写代码更加专注和自信了！！\*\*

[转载地址][Link 1]

[CI]: https://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Continuous_integration
[CD]: https://link.zhihu.com/?target=https%3A//en.wikipedia.org/wiki/Continuous_delivery
[gitlab]: https://link.zhihu.com/?target=https%3A//about.gitlab.com/
[jenkins]: https://link.zhihu.com/?target=https%3A//jenkins.io/
[hanan198501_vue-spa-template]: https://link.zhihu.com/?target=https%3A//github.com/hanan198501/vue-spa-template
[Gitlab Hook Plugin]: https://link.zhihu.com/?target=https%3A//wiki.jenkins-ci.org/display/JENKINS/Gitlab%2BHook%2BPlugin
[format_png]: /images/20220829/128f7566e8bb49148608af5820192d53.png
[format_png 1]: /images/20220829/42461da1746449a7919993f7aa6ad373.png
[format_png 2]: /images/20220829/865b9dc56d4844708f3c3aea715a9917.png
[format_png 3]: /images/20220829/9d7a2bfeec744b0199131e03df12e241.png
[format_png 4]: /images/20220829/83273d1423a242a8a9a07ba8db0e5ef4.png
[format_png 5]: /images/20220829/00bc6a82d5c243638377b40cd2c15fcc.png
[http_jenkinshost_gitlab_build_now]: https://link.zhihu.com/?target=http%3A//jenkinshost/gitlab/build_now
[format_png 6]: /images/20220829/b001b33df28f4c63bd09dafdc5f19686.png
[Link 1]: https://blog.csdn.net/sinat_17775997/article/details/105495390?utm_medium=distribute.pc_relevant.none-task-blog-2~default~baidujs_baidulandingword~default-0.control&spm=1001.2101.3001.4242