前端自动化

# 什么是前端自动化

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

如果没有自动化，我们的前端从开发到提测工作流程可能如下：

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 需要人工操作，其他步骤都是自动运行，是一个非常标准化的流程，减少了人工操作的风险，省去了重复性工作，增强了项目的可见性。

# 效果图

(opens new window)

# 实现

# 流程图

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

# 1.准备工作：

准备git项目：https://github.com/wzc570738205/frontproject.git (opens new window)

准备钉钉群(用来接收 CI/CD 结果通知)：35669766 (opens new window)

准备安装了jenkins的云服务器：这里自行购买，安装参考在 linux 服务器上安装 Jenkins (opens new window)

# 2.接入代码提交通知

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

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

复制 webhook，接下来会用到

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

# 2.3 测试代码提交通知

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

# 3.接入项目 CI

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

# 3.1 jenkins 新建项目

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

创建一个构建一个自由风格的软件项目的 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 (opens new window) 至此，CD 整合完毕，现在只需要提交代码，即可实现自动打包，自动部署。

svn实现钉钉代码提交通知如何在Centos 7上安装和管理Nginx

雾岛夜浅笺

Choose mode