[Jenkins进阶]-前端CI/CD

什么是前端自动化

前端自动化不是指自动生成代码，而是自动化构建项目。

如果没有自动化， 我们的前端从开发到提测工作流程可能如下：
1.本地机器上写代码
2.在命令行输入 npm run unit/lint，查看单元测试/eslint校验结果
3.提交代码，push 到 git 远程仓库
4.执行 npm run build，构建项目
5.ssh/ftp发包至测试服务器等各种方式
这个流程中，每一个步骤都要重复人工操作，很大增加了时间成本，不能保证操作的准确性。对于 unit 或者 build 的结果，没有一个自动的反馈机制，需要人工 check 运行结果，最后部署也是人工登录服务器执行脚本，非常繁琐。

引入自动化以后，整个流程变成：
1.本地机器上写代码
2.提交代码，push 到 git 远程仓库
3.git hook 触发 jenkins 的构建 job
4.jenkins job 中拉取项目代码，运行 npm run unit/lint 和 npm run build。
5.jenkins job 中执行测试服务器的部署脚本
在 自动化流程中，只有步骤1和步骤2需要人工操作，其他步骤都是自动运行，是一个非常标准化的流程，减少了人工操作的风险，省去了重复性工作，增强了项目的可见性。

效果图

实现

流程图

• 开发人员提交代码至代码库
• 触发jenki构建任务
• 构建成功，发包至nginx服务器，更新完毕
• 构建失败，通过钉钉通知/企业微信/邮箱等等方式提醒开发人员代码构建失败

1.准备工作：

准备git项目：https://github.com/wzc570738205/frontproject.git
准备钉钉群(用来接收CI/CD结果通知)：35669766
准备安装了jenkins的云服务器：这里自行购买，安装参考在linux服务器上安装Jenkins

2.接入代码提交通知

当你在往代码库推送了代码，通过git的webhook自动给钉钉发送消息

2.1添加钉钉群机器人(智能群助手)

复制webhook，接下来会用到

2.2将钉钉webhook添加至github对应相应的webhook里

2.3 测试代码提交通知

配置完成，我们提交下代码进行测试

至此，代码提交通知配置完成

3.接入项目CI

当我们提交完代码后，我们需要校验下此次代码合并有没有致命性错误，这里我们采取简单的方法即允许npm run build，如果运行没有报错，那么说明此次提交是通过的。失败则说明代码有致命错误，需要进行修改

3.1 jenkins新建项目

这里为简要步骤，详情请参考使用jenkins自动构建github项目

• 创建一个构建一个自由风格的软件项目的job
• 源码管理器选择git,并填入地址以及凭证(没有就新建一个）
• 构建触发器选择:GitHub hook trigger for GITScm polling
  
• 添加node环境：系统管理/全局工具配置-新增nodejs，版本选择合适的即可
  
• 构建环境选择node，勾选刚才下载的node

• 构建选择执行shell:

  npm install -g cnpm --registry=https://registry.npm.taobao.org&&
  cnpm install&&
  npm run build

  

• 构建后操作(可选)：
  

我们通过jenkinsjob的执行成功与失败来确定CI是否成功

3.1.1 测试

再次提交代码,成功触发jenkins的job

构建成功

3.2 接入构建状态钉钉通知

• 配置钉钉自定义机器人，并选择安全设置自定义关键词，这里设置#即可
  
• 下载jenkins插件DingTalk，用来进行钉钉通知
  
• 配置插件=>系统管理选择钉钉,填入刚才的自定义机器人webhook地址
  
  
• 项目里开启机器人通知
  

• 点击开始构建，进行测试

  
  等待CI结束
  
  失败提醒
  

至此，CI配置结束，我们实现了代码提交钉钉提醒，以及CI通知提醒

4.接入CD

在上面的步骤里我们实现了CI的操作，也就是用是否能打包生成环境的包来进行建议测试代码有没有致命性错误。这一步通过后我们需要把部署包发至nginx服务器

4.1 发包至服务器

• 安装jenkins插件Publish Over SSH
• 设置里配置插件,填入服务器ip，高级里使用密码，设置远程服务器文件夹/
  
  点击测试连通性
  
• 项目配置

• 修改构建shell，添加压缩

  npm install -g cnpm --registry=https://registry.npm.taobao.org&&
  cnpm install&&
  rm -rf dist&&
  npm run build&&
  cd ./dist&&
  tar -zcvf dist.tar.gz *

• 添加构建后操作Send build artifacts over SSH
  

• 服务器配置nginx

  location /testPage{
   alias     /home/test;
   index     index.html;
  }

测试，构建成功后，访问https://wangzc.wang/testPage
至此，CD整合完毕，现在只需要提交代码，即可实现自动打包，自动部署。

结语

后续我会继续编写如何接入gitee、gitlab、svn。