前端工程化:构建、部署、灰度

前言

前端项目的工程化,不只是对开发层面的组件化、模块化、规范化等,更涉及到构建、部署的工程化和自动化。
工程化的一些概念,编译、构建、部署、发布、CI/CD 、灰度等概念,其实都是软件工程中很成熟的概念。
大部分知识在前后端项目中都是通用的,有些则根据项目有所不同之处。

名词解释
  • 编译和构建
  • 构建产物(Artifacts)
  • 部署、发布
  • 蓝绿部署、滚动部署、金丝雀发布(灰度发布)、A/B测试
1 编译(compile)和构建(build)

编译是指将源代码变为目标代码的过程,从源代码的语言转变为另外一种计算机语言(一般比源代码语言更为底层的语言)。
构建是指一系列的处理,包括编译。不同的语言构建会有不同的处理步骤,最终产生可在具体特性环境运行的构建产物(Artifact)。

前端的编译 为了更好的编程体验和更高的可维护性,会使用一些超集的语言,然后再转译为浏览器可以运行的语言。例如es5/6/7等语法的转译为对应环境支持的代码;less,sass等转译为css;typescript等转译为JavaScript。
前端构建过程一般包括以下几个过程:

  1. 代码检查
  2. 运行单元测试等
  3. 语言编译
  4. 依赖分析、打包、替换等
  5. 代码压缩、spirit图片压缩等
  6. 版本生成

构建结果一般生成一个或多个文件,里面包括直接可以部署在特定环境中的所有内容。

2 Artifacts (构建产物)

每一次成功构建后产出的记过,被称为Artifacts。Artifacts可以直接部署在特定环境中并正常运行。每个构建结果一般都会版本保存,为后续部署、回滚、灰度等做备份。

可能是因为构建的速度,后端都会有一个Artifacts制品库。而早期一般的前端项目对Artifacts的概念比较弱化,一般会从Code直接构建部署到指定的环境。现有的规范化的项目都会对构建产物所有版本进行保存,一般都提供CND来访问。

3 部署、发布

部署(deploy)是指把构建后的新版本应用或服务 安装到目标环境(开发、测试或者生产)中。
这时候部署好的应用或服务应该在目标环境中正常运行着,但是不会有任何访问的流量。

发布(release)则是把新版本应用或者服务交付给最终用户使用的过程。相当于把流量切到部署好的新版本的过程。

前端项目部署一般是指文件的增量替换或全量替换。根据项目按需决定,部署和发布可以同时进行,也可以分开进行,在不影响用户访问的前提下,把前端的代码更新到相应的版本。

4 CI/CD

CI Continuous Integration 持续集成。指代码继承到主干之前,必须通过自动化测试。只要有一个测试用例失败,就不能集成。目的就是让产品可以快速迭代,同时还能保持高质量。
CD,Continuous Deployment,持续部署。持续部署是持续交付的更高阶段,指的是任何修改后的内容都经过验证,自动化的部署到生产环境。

两者的区别,在于是否自动部署到生产环境。持续交付,需要用户手动点击“部署”按钮才能部署到生产环境。

前端项目的 CI/CD ,因为一定的特殊性,对通用化的库或框架可以有覆盖率很高的单元测试/自动化测试,然而对业务代码的单元测试、端对端测试则成本很高,所以 CI 的过程一般就是运行构建脚本,未报错的生成静态文件则为成功。一般不会有 CD(持续部署) 的过程,合并到 develop 分支触发 CI 成功后快速发布部署到测试或预发布环境通过测试人员的测试和一定的自动化测试。到需要发布的时间点,再拉取 master 分支来构建部署发布。

蓝绿部署、滚动部署、金丝雀发布(灰度发布)、A/B测试
蓝绿部署
蓝绿部署中,绿色代表代表正在给用户提供正常服务的系统;蓝色代表另外一套准备发布的系统,还未对外提供,可以做线上测试。

二套系统必须有相同的基础设置和配置环境,当蓝色系统测试通过,达到上线标准,就把绿色系统的流量全部切到蓝色系统中,一旦蓝色系统出现问题,把所有流量切回到绿色系统中,待蓝色系统稳定后就成为新的绿色系统,之前的绿色系统资源就可以释放用于下一个蓝色系统。

蓝绿部署能够简单快捷实施的前提假设是目标系统是非常内聚的,如果目标系统相当复杂,那么如何切换、两套系统的数据是否需要以及如何同步等,都需要仔细考虑。

滚动部署
有多个集群实例的服务中,在不影响服务的情况下,停止一个或多个实例,进行版本更新,再启动加入到集群中提供正常服务,直到所有实例都更新到最新版本。

比起蓝绿部署不需要准备二套一样的集群,通过现有的机器或增加少量的机器就可以做到版本升级。但也引入了复杂度,需要控制好更新过程中服务会有新老版本用户共存的兼容情况、防止部署过程中自动伸缩的触发导致实例中版本的不确定、部署过程中出错的回滚策略等。

金丝雀发布(灰度发布)
一种比滚动部署更有控制力度的发布策略。

准备一个或多个服务实例(使用新机器或已有的机器都可),并确保该实例服务没有服务于线上的用户,在上面部署新版本的服务,并经过测试的验证。

通过定制好的策略,只更新部分服务实例到最新,使一部分用户使用到最新版本,如果服务正常,逐渐更新所有服务实例到最新。

发布过程中,需要有一些流量控制的策略跟随部署的过程,一般可以在负载均衡、路由、应用程序中做处理。

针对用户级别分流。比如先部署给内部用户,在逐渐根据外部用户的分类等级扩散。
地域、IP 级别分流。只部署新版本到某地理地域,慢慢扩大到全量发布。
应用程序中判断特性分流。比如通过什么渠道使用服务的、浏览器特征分析、某个使用触发才使用新版本。
A/B测试
A/B测试指的是效果测试,同一时间有多个版本的服务在线上运行,并通过一定的策略控制多个版本的流量分配,最终通过信息的收集,分析各个版本服务的实际效果,选出效果最好的版本。

A/B测试强调的是通过不同版本对比效果来选择出最好的版本,而然金丝雀发布(灰度发布)的方式正好可以满足A/B测试的需求

构建和部署

现有的CI/CD方案都很成熟,Jenkins、Gitlab-CI等。docker、k8s让这些工具简直带上了无限手套,因为构建部署是需要机器资源的,相比之前固定的资源抢占和空置,k8s让资源动态创建、销毁,提升资源利用率。

https://zhuanlan.zhihu.com/p/71562853

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