什么是前端自动化

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

如果没有自动化， 咱们的前端从开发到提测工作流程可能如下：
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整合结束，当初只须要提交代码，即可实现主动打包，主动部署。

5.结语

后续我会持续编写如何继承gitee、gitlab、svn。
更多问题欢送退出前端交换群交换749539640