饿了么张龙：前端基础设施的建设之路

原创
作者：赵立京 2017-10-27 15:44:24

云计算

新闻 2017年12月01日-02日，由51CTO主办的WOTD全球软件开发技术峰会将在深圳中州万豪酒店隆重举行。本次峰会以软件开发为主题，数十位专家级嘉宾将带来多场精彩的技术内容分享。届时，饿了么高级技术经理张龙先生将在前端开发实战分会场与来宾分享”饿了么前端基础设施的建设”主题演讲，为大家详细阐述饿了么团队打造前端基础设施的历程。

【51CTO.com原创稿件】2017年12月01日-02日，由51CTO主办的WOTD全球软件开发技术峰会将在深圳中州万豪酒店隆重举行。本次峰会以软件开发为主题，数十位专家级嘉宾将带来多场精彩的技术内容分享。届时，饿了么高级技术经理张龙先生将在前端开发实战分会场与来宾分享”饿了么前端基础设施的建设”主题演讲，为大家详细阐述饿了么团队打造前端基础设施的历程，以及在实践中获得的一些经验和思考。51CTO诚邀您莅临大会，与我们共享技术带来的喜悦。

51CTO记者对即将参加大会演讲的张龙老师进行了专访，让我们先睹为快，探听一下他是如何解读前端基础设施建设的。

同时服务于开发团队和用户

当今，软件开发技术日新月异，其中，前端基础设施的建设意义重大：一方面在于获得更好的用户体验，从而留存用户，另一方面是为了加快开发速度，提高开发效率，为公司创造更大的价值。

当一个公司的前端工程师超过 50 人之后，如果没有一个团队提供工具和服务来提高效率，就会造成一定程度的资源浪费。因为每个前端开发小团队都会有公共的需求，如果有专业的团队来支持这样的公共需求，就比每个小团队做这些重复的工作要高效的多。另外，基础设施的性能和稳定性也会影响终端用户的体验，更需要专业团队的开发和维护。

为服务型的平台保驾护航

“饿了么”是中国知名的在线外卖订餐平台，已覆盖中国数百个城市，数千万用户，聚集了数十万家餐饮商户，为中国广泛地区的用户提供丰富多样的便捷生活服务。在饿了么高级技术经理张龙老师看来，作为一个服务性的平台，饿了么前端基础设施建设服务的***对象是用户，其次才是前端开发者。对于终端用户，前端基础设施的建设可以保证出色的用户体验，例如访问速度的改善以及服务的稳定，让用户感受到产品的魅力。对于开发者，前端基础设施的建设可以为他们提供一些配套的工具或服务，以提高他们的开发效率，更好的与他人沟通合作。

饿了么前端基础设施的建设之路

据张龙老师介绍，在他刚加入饿了么的时候还没有大前端这个部门，只有一些代码及协作规范。大前端部门成立之后，他带领架构与机动组解决团队的一些痛点需求。

首先要解决的就是开发不重复劳作的问题。张龙老师带领团队研发了两款基于 Vue.js 的组件库 Element(PC 端)、Mint UI (移动端)，并对外开源，在开源社区取得了一些影响力。

之后要解决的问题就是上线简单且自动化，于是饿了么大前端团队开发了一套发布系统，这套发布系统提供不同的测试环境和生产环境，可以将前端业务的静态资源发送到不同的环境。测试环境供开发人员自测或者测试人员根据 PRD 进行测试，生产环境供终端用户使用。通过这套系统，发布时间从原先的7天缩短到了如今的5分钟。

接下来要解决的问题是想要更快的访问速度。于是饿了么大前端团队抛弃了原先配置繁碎的 CDN 服务，在发布服务的基础上推出了一个可以直接拉取 Github、Gitlab、NPM 资源的 CDN 服务，大大简化了 CDN 的使用流程。

***，为了保证服务的稳定可靠，针对页面性能、报错、Nginx 以及 CDN 层面都做了监控，以确保终端用户的使用。

在饿了么前端基础设施的建设之路上，张龙老师和他的团队遇到了很多困难，张龙老师简单介绍了他们今年遇到的一个比较大的问题：“发布系统”的稳定性。

饿了么服务链路中的某一个环会在运行一段时间后莫名其妙的挂掉，然而当一个产品所依赖的服务愈发庞大时，就很难定位到产品问题的根源。虽然这个产品仅供内部前端开发者使用，但是问题得定位和解决占用了大量时间，极大地影响了开发者的使用体验。因此，痛定思痛之后，饿了么大前端团队做了两件事：

1. 事前预防：把所有的服务都加上监控，在用户报问题之前，可以主动的发现问题。

2. 事后恢复：为关键服务加入灾备，当出现故障时可以迅速切换到正常的服务上，并根据梳理好的服务架构、文档对事故服务进行快速恢复。

发布服务构架

发布服务流程

稳定为王

***，张龙老师表示，纯粹的前端基础设施工作并不多，因为前端、移动端、后端的基础设施建设的思路大同小异。张龙老师认为“稳定”是决定一个服务是否被用户接受的重要因素。“你要想清楚三点：为什么我的服务会挂?服务挂了我怎么定位?定位到了怎么恢复?保证了稳定性你就已经赢在了起跑线上了。”

【讲师简介】

[[207856]]

张龙，工作近 10 年，现任饿了么大前端部高级研发经理。在加入饿了么之前，有 5 年的时间负责一款商业产品的前端组件研发工作。15 年初加入饿了么大前端，担任架构与机动组负责人，带领团队研发了两款基于 Vue.js 的组件库 Element(PC 端)、Mint UI (移动端)，并对外开源，在开源社区取得了一些影响力。除此之外，还带领团队创建了一些前端基础设施，提升了前端项目的开发、部署的效率。

使用优惠码[2017WOTDSZ]，和我一起去WOTD全球软件开发技术峰会。8折优惠，仅限72小时!详情点击wot.IDC.NET

【51CTO原创稿件，合作站点转载请注明原文作者和出处为51CTO.com】