58前端上线解决方案-ArthurCI

Move fast with stable infra

美国硅谷向来推崇快速交付。如大神云集的facebook公司，曾经的口号就是「move fast and break things」，翻译成中文 ，「break things」可以是打破常规，也可以是搞砸事情。不知道是不是压力太大，facebook上市后，口号改成了「move fast with stable infra」，也就是说，他们意识到快速和稳定是需要平衡和兼顾的，不会因为公司里都是牛人，就能写出毫无BUG的代码。

在58公司，上线是比较谨慎的，有认真负责的QA团队，肩负着保障产品质量的重担。在严格的流程下，占用了大量的测试工时，如果稍有大意，漏测、错误覆盖、背锅等剧情就可能不断重演。为了平衡快速迭代和质量的稳定，我们使用前端上线工程化的方案，规范项目成员交付流程，开发了前端工程化上线系统，取名为ArthurCI，帮助58业务线的前端团队把精力重新集中在产品功能的开发设计上。

一.持续集成

多人合作的软件开发，持续集成是我们推荐的代码开发实践。通常谈论持续集成时，大多数都指的是自动化构建过程。一个成功的构建可以说明代码打包到了一起，但它并没有说明代码是如何工作的，所以持续集成的实践还应该包括将代码自动部署到它将驻留的平台上，也就是在持续集成之外能够平滑的发布生产，保证以高质量、低风险的方式发布。有时我们不希望立即发布到生产，通常需要管理者确认。也就是说持续交付后，需要控制产品何时发布。

与TravisCI等竞品比较

前端界目前流行的持续集成框架有TravisCI和CircleCI等，它们通过和GitHub紧密结合，有着相对简单的配置，使用户不再需要关心前端复杂的集成环境配置，另外，它们可以将构建结果以角标的形式展示在接入项目的Readme里，让项目的使用者在浏览项目代码主页时，即可了解到安全构建的详情。58的ArthurCI对上述优点均有整合借鉴，同时发现并优化了这些工具的一些不完善点，如：使用TravisCI需要把源代码提交到GitHub，公司业务代码的保密性可能面临威胁；在缓存处理上，TravisCI能配置工作区代码缓存，但容易产生变更冲突等问题；采用yaml作为配置文件容易出错，缺少控制环节等等。

以下我将分享下我们58架构线设计ArthurCI的方法。

二. ArthurCI的优势与细节极其快速

在项目构建前，需要把源代码和依赖包下载准备好，源代码直接通过58的GitLab内网获取，时间主要取决于依赖包的网络开销，耗时通常会占整个构建的30%。为了解决这个问题，我们采用yarn代替npm进行包的管理。和后者相比，yarn会缓存下载过的每一个包，无需重复下载。它还支持并行化操作，从而增强网络资源的利用率，并且具有支持离线、失败重试等特性，最大化利用了58云构建平台的能力，可以说是用户越多，依赖包的缓存越丰富，构建准备时间越快。

在项目构建时，我们使用webpack的resolve.modules加速文件搜索。因为js模块的依赖查找是递归的，在默认配置下，对依赖包会采用向上递归搜索的方式去寻找，但通常项目目录里只有一个 node_modules，且是在项目根目录，为了减少搜索范围，可以直接写明 node_modules 的全路径。

前端项目的构建，最耗时的当属打包的最后一步「代码压缩」了。为此，我们采用多线程压缩插件webpack-parallel-uglify-plugin，替代webpack默认的UglifyJsPlugin，充分利用多核cpu多线程进行代码的压缩，相比UglifyJsPlugin可减少约40%的压缩时间。

特别易用

把项目接入ArthurCI， 配置非常简单，只需要：

通过 gulp 插件，集成系统接入任务

在源代码的中配置命令，执行第一步预设的任务命令

回到系统中，使用58的域帐号登录，系统将展现该账户拥有权限的GitLab项目，先选择Git项目，然后在添加项目页面填入两个必填项「名称、生产环境的路径」，即可完成所有配置和迁移。

ArthurCI的交互清晰。发布过程非常简单和有迹可循，有着个性化的主页和良好的UI，待操作的项目一目了然。

在发布生产以后，ArthurCI还会自动通知负责管理静态资源版本的58 tms系统，实现自动更新cdn缓存路径，无需手动操作。

稳定可靠

使用云化构建。构建平台由58云系统统一提供接口，不再受构建者的系统、软件版本、稳定性等影响；同时使用了全局的模块缓存，对于react-native/node-sass等依赖较大的第三方模块有着成倍的速度提升。

ArthurCI有详细的发布日志。如果构建出错，将第一时间反馈，便于定位问题，快速判断和修复后，重新构建。每次构建完成，自动对构建产物进行持久存储，便于后续的调取。当生产环境出现问题，ArthurCI支持应急方案：可以快速地一键回滚或选择指定历史版本直接部署。

三.ArthurCI将要做的

未来，ArthurCI将利用数据智能做好服务。

对构建的数据进行分析，根据成功率等数据定期生成报表。

对部署测试的数据进行性能分析，智能化预测发布生产后的影响。

四.结语

58架构线开发了ArthurCI，使用工程化方法改进前端上线流程，并从效率、易用性、稳定可靠等方面进行了若干思考和建设。系统UI简洁，使用者可以完整的掌控整个流程，控制发布质量，了解源代码与发布版本之间的关联等等。如果大家对持续集成、快速交付有更多思考，欢迎留言交流。