前端自动化发布实战总结

前端自动化发布实战总结

为什么要做

今年4月份,开始自己的第二份工作,习惯了老东家如丝般的发布体验,一下子感觉来到了“原始社会”。
首先这是一篇长文,主要介绍自己在做自动发布这个过程的一些思考。

引用玉伯的Web研发模式演变来说,现在我们处于 - Web1.0时代:

  • 前后端代码耦合
  • java环境对前端过于复杂
  • 缺乏工具和规范,代码难维护
    • 内嵌代码:html内嵌js,jsp内嵌java逻辑
    • 页面级代码,代码叠加:单文件js随意2000行以上
  • 人工手动发布,变更麻烦

遇到这种情况,首先会想到的肯定是前后端分离。但考虑到目前的人员、技术储备情况,直接过渡到基于NodeJS的全栈式开发,阻力大,周期长,很可能会难产。

而我们首要要解决的问题是:

  • 前后端职责清晰
  • 提升开发效率、体验
  • 自动化发布

所以我们暂时先做到前后端物理分离,大致如 - Web2.0时代

  • 代码仓库分离,分开维护
  • 发布部署分离
  • 模板由前端维护,在浏览器渲染,后端只提供基础页面容器(视情况而定)
    • 交互性、非SEO页面:后端负责接口,前端负责展现,通过接口读取数据在浏览器端渲染
    • 需要SEO的页面:相关模板还是放在后端,但是会减少业务逻辑

目标

我们先从开发、发布流程来看我们最终希望的结果是什么,然后再分析如何完成这一目标

开发流程

  • 项目遵循流程:需求评审 -> 视觉评审 -> 接口约定 -> 需求评估 -> TC评审 -> 并行独立开发 -> 联调 -> 测试 -> 发布
  • 开发过程前后端明确任务,独立并行开发


    开发流程

发布流程

  • 发布要严格遵守流程,测试审核通过才能上线
  • 整个流程只需简单发布指令,所有的编译构建、同步服务器的事情交给任务去做(后面我们会提到发布任务需要做哪些事情)


    发布流程

分离需要做什么

  1. 代码分离
    使用git来做代码版本管理,申请新应用维护前端代码
  2. 使用webpack,做模块管理
    代码分离后,我们可以使用目前前端主流的框架、工具,搭建友好的开发环境、流程
  3. 分离之后,请求后端接口,联调、debug,都需要设置代理
  4. 自动化发布
  5. 服务器配置
    考虑如何部署前端代码

自动化发布

首先聊一下一般发布的流程:

  1. 代码提交
  2. 打包构建
  3. 备份服务器当前文件 - 回滚使用
  4. 将构建结果同步到服务器目录
  5. 合并代码到Master - 保证后续的代码都是最新的

这是一些纯体力活,要保证步骤顺序和正确性,容易出问题,而且没有记录和日志,所以一般做权限控制,发布个普通需求还要找对应的同学发布,变更麻烦

所以发布必须自动化,网上搜前端自动化发布,大多数的结果都是Jenkins + githook (
Jenkins+github 前端自动化部署

其核心原理主要是通过

  1. 提交代码触发webhook push event
  2. Jenkins监听到webhook post请求,执行编写好的脚本构建、同步服务器(主要依赖于脚本)

但是如果我想要查看发布记录、回滚、控制发布流程,看起来Jenkins就帮不上忙了(可能有对应的插件,没深究)

同样的发布脚本,用node也能执行,所以我们打算使用node来写一个发布集成服务来代替Jenkins,它可以做更细致的控制:

  • 提交代码不代表发布,可能只是代码备份,发布指令才代表发布
  • 可以生成发布记录,在发布平台展示,方便查看和回滚
  • 实时反馈发布流程信息
  • 控制发布流程,加入审核、CodeReview,让发布更安全

所以我们的发布自动化主要做三个东西

  • CLI:让熟悉命令行的同学,git push后马上就可以敲命令发布(创建新发布、发布)
  • 发布平台:查看发布记录,发布,审核,查看日志,回滚
  • 集成发布服务:执行发布脚本,同步服务器,备份近期发布文件(快速回滚),反馈发布信息,发布控制

CLI

该CLI是一套标准的前端开发生命周期命令,通过几个子命令去完成前端开发流程的各个任务,包含了:

  • init:初始化项目结构,类似于vue-cli init,不过比较入门简单(因为暂时业务的体量并不需要频繁创建新项目)
  • dev:启动开发调试服务,主要是npm run dev,也不是重点
  • publish:发布项目代码,执行publish后将执行项目仓库中对应开发分支下的代码发布任务。在云端构建后的代码最终会发布到对应的环境(SIT、UAT、生产)。

关于CLI的开发参考 - 如何用Node开发CLI
主要是:commander + inquirer

从此发布就变成了一个命令的事


CLI

发布平台

发布平台提供了比CLI更多的功能:

  • 查看发布记录
  • 查看日志
  • 回滚
  • 发布管理、控制


    发布平台

集成发布服务

到了重头戏,这里就介绍一些概念

发布流程

发布日常
发布预发
发布线上

为什么在云端构建发布

首先,最终代码部署到服务器肯定都是通过scp等命令来同步文件到服务器,因为权限问题,通过云端统一管控是比较靠谱的。

然后,每个人的机器环境都不一样,有可能在A这构建成功,在B那却构建失败(比如A添加了一个依赖,但没有保存dependencies),所以以统一的环境来编译构建,可以避免因为环境问题引起的构建问题

最后,需要一个地方去统一管理发布记录,避免发布冲突,记录发布日志,方便回滚操作等。

分支管理

每个人都基于Master拉取自定义分支开发,最终通过发布自动同步到Master分支,保证开发时都是基于最新的线上代码,同时发布时做冲突检查,保证发布安全。

发布过程的分支变化如下:


分支管理

发布管理

在整个发布过程,我们的代码要通过日常、预发测试才能最终上线,这个过程是需要占用对应服务器并保持稳定,需要避免出现其他同学发布覆盖的情况,所以我们使用MongoDB来维护发布记录,实现发布控制和流程控制

发布控制
当指定发布环境有一个项目发布时,该环境被占用,其他项目发布会提示有其他项目发布,联系对应的发布同学,双方根据重要性来决定是否退出发布让后来的项目先上

流程控制
为了保证最终上线的代码是正确运行的,整个过程需要测试和Code Review,必须通过测试、审核才能进入下一个环节

发布反馈

发布脚本需要执行上面提到一系列的过程,这需要一个等待的过程,我们需要实时给发布同学提供发布反馈(发布流程、成功与否),并将相关信息保存到日志。所以发布过程通过soket.io建立socket链接,集成发布服务有任何流程变化都会反馈

同步服务器

同步服务器可以使用 scp 或 rsync 命令,关于它们的介绍和不同看这个

这两个命令通过ssh同步,都需要在执行命令后输入密码,所以需要配合expect来实现自动同步

最终整个服务选用了:express + socket.io + mongodb,这里就不赘述了

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,816评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,729评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,300评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,780评论 1 285
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,890评论 6 385
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,084评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,151评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,912评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,355评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,666评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,809评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,504评论 4 334
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,150评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,882评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,121评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,628评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,724评论 2 351

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 171,870评论 25 707
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,638评论 18 139
  • 1 网络的网络 网络把主机连接起来,而互联网是把多种不同的网络连接起来,因此互联网是网络的网络。 2 ISP 互联...
    凯玲之恋阅读 256评论 0 0
  • 作为一个认真的圈妈脑残粉,我只能说别跟我谈心得了,一万字的输入也没有逼出我这一周的输出,今天却成事了。 家庭矛盾省...
    梦不落北阅读 236评论 2 1
  • 【生活记录】带娃飞随笔Day2--育女心经 周一上午“携带”Hope到银行办事,6个人在一间办公室里并不觉拥挤呱噪...
    喜旺之母阅读 279评论 0 0