Grunt和Gulp等基于Node.js的构建工具已经越来越被人们所熟知,而自动构建工具部署在云计算之上无疑将更多地提高生产力,这里我们就来看一下淘宝前端团队谈前端工程化的云构建的一些经验:

布景

一般个人在开发项目的时,都是在本地编写构建脚本对项目进行构建,这个脚本或许是 Gulp,或许是 Grunt, 或许是 webpack,也或许是其他的一些脚本,每次代码发布之前,都要对代码进行构建,代码库房里边包括构建脚本和构建之后的代码。关于个人开发,这样做是没有问题的,可是涉及到多人开发或许团队开发就会有必定的问题。说是问题也不是问题只不过是会导致开发功率下降,构建过错的状况越来越多。

在本地对项目进行构建,经过脚手架东西来分发构建脚本关于团队开发来说有许多问题:

构建脚本的开发保护者很难去继续优化,更新构建脚本构建脚本运用者对构建脚本的修正,改进不行复用每次发布之前都需求对项目进行构建,假如忘掉构建将会导致发布失利同一个项目的开发者或许会有不同的构建脚本,极有或许会导致构建犯错咱们把构建脚本从运用里边提炼出来,包装成独自 npm 模块,这样构建脚本(下文统称为构建器)就有了模块的一些特性:

可共享: 任何人可以很便利发布一个构建脚本模块给任何人运用可修正: 假如你有更好的主见,可以 fork,加上自己想要的功用,并发布到 npm 渠道上易保护: 模块可以由专人保护与更新运用云构建后,本地不需求装置任何构建环境,这个关于一些新技能的推行是有优点的, 比方咱们都知道,在 Windows 下, 装置 compass 不是一件轻松的事。并且关于构建脚本的更新也是很友爱的,只需求更新云构建渠道上的构建脚本即可。

运用云构建后库房里边就不需求保存构建后的代码,这样有助于坚持代码整齐,一同,在多人开发的时分,再也不会呈现构建脚本抵触的状况。把云构建接入发布流程,每次提交发布时履行构建,这样就再也不会在发布之前忘了构建。并且服务器的功用更强壮,关于比较大的项目可以更快履行构建,节约构建的时刻。一线开发人员不需求去关怀构建的问题,可以把更多的时刻放到事务上,进步作业功率并。

前史和现状

Grunt、Gulp 等前端构建的概念是近几年才火起来的,其实淘宝前端团队早在 2011 左右就开端大规模对前端代码进行构建了(Git 也是在这个时分引进到团队内作为版别办理东西)。开端运用的构建引擎是 ant,根据 XML 描绘构建规矩,后来将 ant 的 build 使命放到了服务器端履行,再后来由于 ant 的扩展性和保护性太低直接改成了 shell 脚本(那个时分紧缩代码仍是用 YUICompress 和 Google Closure Compiler)。

再后来 Node.js 开端盛行,根据 Node.js 的前端生产力东西开端如漫山遍野般呈现。团队内部开端运用 Grunt 构建前端代码(后续渐渐被 Gulp 和 webpack 替代),但依旧是在本机电脑履行构建,然后将构建后代码提交到库房进行发布上线。14 年末开端构思并上线了第一版云端构建渠道,开端逐渐将前端代码的共建作业再次迁移到云端履行。

经过一年多时刻的完善,云构建渠道现已彻底支撑起了团队内部甚至整个集团的前端代码构建使命,日构建使命量已达 1000+。并且构建服务还集成到了代码发布流程中和本地开发东西中,使前端开发史无前例的高效和轻松。

体系架构

云构建体系由五部分组成:

1.客户端(client)client 担任向云构建建议一个构建恳求并获取构建后内容。client 官方供给了一个现已封装好逻辑的 npm 模块,假如是根据 Node.js 的体系,可以直接运用。client 支撑将需求构建的代码直接上传给构架服务器或许仅供给一个 URL,由构建服务器自己从 URL 下载代码,官方更引荐后者。2.构建器(builder)builder 是构建使命的终究履行者,包括具体的构建事务逻辑builder 是一个规范的 npm 模块3.构建服务器(workers)workers 是一组高功用服务器,每台服务器可以并发运 32 个构建使命。workers 可以动态扩容;上线和下线4.构建路由(router)router 担任分发构建使命给 worker。router 集成了 worker 负载监控功用,可以确保一切 worker 均匀负载。5.数据展现和办理渠道(web)web 展现一切构建进程中产生的数据web 办理构建器和构建服务器架构图:淘宝前端团队谈前端工程化的云构建(淘宝前端工程体系)  淘宝 前端 工程化 第1张

运转一次构建使命的大约进程如下:

app(需求调用云构建的各种体系)集成 client,并运用 client 供给的接口建议构建恳求client 从 router 获取一个 worker 地址client 与 worker 树立 socket 衔接,并向这个 worker 建议构建使命worker 实时输出构建日志信息给 clientworker 完结构建后将构建成果回来给 clientclient 将构建成果回来给 app为了减轻构建服务器的负载,整个构建进程中涉及到的文件上传下载服务都是经过文件中转服务来完结的。

abc.json

除了上面的五个部分,还有一个装备文件也是必不行少的:abc.json(a build config)。这个文件一般跟需求构建的内容放在一同发送给 worker。是一个规范的 JSON 文件,指定需求调用的 builder 和一些装备信息。

构建器(builder)

abc.json 和 builder 是整个云构建渠道仅有可定制部分。

builder 是一个规范的 npm 模块,进口文件可以是一个 Grunfile.js 或许 gulpfile.js,当然也可以是你自己的 xx.js。假如是 Gulp 或许 Grunt 脚本,worker 会帮你运转这个脚本,假如是一般的 npm 包,wroker 会运转由 package.json 文件中指定的进口文件。

构建器编写注意事项

1,项目自身需求依靠一些外部的模块,例如 lodash,需求构建开端前需求自己装置相应的依靠,可以经过一个 Gulp 的 task 去履行,没有依靠则疏忽。

3,针对特定项目的装备信息,可以在项目的装备文件(abc.json)中增加,然后在构建时经过读取装备文件获取。

4,云构建和本地构建有必定的差异。本地构建时,源码目录和构建好的代码的寄存目录构建者都是清晰的。而云端构建,构建脚本是由云构建渠道来操控的,云构建也需求搜集构建好的文件回来给客户端,因而待构建源码的目录(src)和构建好的代码的寄存目录(dist)都是需求有云构建渠道来指定,worker 在履行 builder 的时分会传递相关参数。

5,假如构建器自身需求装置依靠,package.json 的依靠需求是 dependencies,不能是 devDependencies。

构建器测验

构建器编写自身也需求必定的本钱,并且在本地无法测验,假如构建器编写犯错,并且现已发布,将会构成很大的问题,因而需求一个构建器的测验渠道。

经过删去构建体系的大部分特性,而只保存最中心的功用,一同去除原体系的一些约束使构建器可以在上面正常运转。一同编写相应的测验命令行东西,构成整个构建器测验渠道。

线上构建体系对构建器做了严厉的约束,构建器必需求审阅经过才可以发布上线。测验渠道没有这些约束,便利构建器开发者更新测验。

遇到的问题和解决方法

1,HTTP 衔接

最开端的时分 client 与 worker 都是经过 HTTP 进行通讯,这样完成起来的确是很简单,体系也能正常运转。并且关于绝大多数构建使命来说是没有问题的。可是遇到一些比较大的项目,构建时刻比较长的项目,问题就暴露出来了。由于构建时刻比较长 HTTP 衔接常常或许会被重置,既有或许由于 nginx 署理的问题导致,也有或许由于网络问题导致。

跟着云构建体系越来越杂乱,服务器的回来值,需求经过多层嵌套才可以回来给客户端,这关于体系的调试和过错处理带来了许多的不变,并且大大下降了代码的可读性。过错处理变得很杂乱,或许会存在没有发现的 bug。

为了彻底解决这个问题,咱们运用了 socket 来替代 HTTP,运用了 socket 的特性,构建时刻即便再久也不会产生构建进程中通讯中止的问题。并且只需构建产生过错,经过 socket 的事情机制立马就可以告诉客户端。

2,文件上传

在开端的体系中,项目文件的上传是经过 client 直接把项目文件紧缩打包上传到 worker,项目文件很大打包紧缩上传的时刻需求好久,并且文件过大,nginx 会回来 413 过错。当并发使命数量过多的时分,worker 负载过大,常常会由于上传下载占用过多的资源影响构建服务的正常进行。

经过把文件上传服务独立出来,树立独自文件中转服务,worker 只需求重视构建相关的问题,不再接纳处理上传的文件,client 传递给 worker 的仅仅一个 URL 地址。构建完结后,worker 把构建好的代码打包紧缩上传到文件中转服务,然后回来相应的地址给 client,client 经过地址拿到构建好的内容。一切文件处理都经过第三方去处理,文件部分的处理和构建进程彻底独立。减少了体系的耦合程度。

3,负载均衡

跟着云构建体系被运用的越来越多,构建使命常常需求等候,为了防止构建等候,加速构建速度,咱们增加了构建服务器的数量。

多台构建服务器就需求有相应的使命分发机制,对使命进行分发确保构建使命不需求等候。因而增加了云构建路由服务(router)。云构建路由对使命进行分发,构建服务器有多台,在分发的时分要根据构建服务器上面正在运转使命的数量进行分发,确保使命可以以最快的速度运转。

一同还需求设定心跳机制,守时去检测构建服务器的状况,假如构建服务器呈现异常可以及时报警,一同主动下线相应的构建服务器。最大程度的确保构建可以正常的运转,不会由于一台构建服务器呈现毛病而影响整个构建体系的正常运转。

展望

1,为了进步测验渠道的稳定性和安全性,咱们设想为每个构建器供给独自的沙盒运转环境,运用 docker 技能把构建器的运转环境和构建体系自身阻隔开来,确保构建器运转进程的问题不会影响构建体系自身,使两者独立起来。这样做关于体系的安全性也会有很大的进步,约束了构建器自身的运转环境,即便构建器中存在一些损害构建体系的行为也不会影响到构建体系,这样极大的进步了安全性和稳定性。

2,现在云构建还仅仅具有对代码进行构建的才能,彻底可以把云构建渠道进行通用化,成为一个通用 Node.js 使命运转渠道,现在咱们正在做这方面的测验。

转载请说明出处
知优网 » 淘宝前端团队谈前端工程化的云构建(淘宝前端工程体系)

发表评论

您需要后才能发表评论