美团基于 Serverless 的前端研发体系建设和业务实践

1. 美团基于 Serverless 的前端研发体系建设和业务实践张方成美团·基础技术部·前端技术中心

2.

3. 个人简介 2016 年加入美团，曾负责美团私有云平台前端建设，目前负责美团 Node.js 基建、Serverless 前端方向以及静态网站托管服务建设，关注前端工程化、云化、 Serverless 架构等技术领域。

4. 目录 • 背景 • 美团 Serverless 前端建设 • 前端交付实践 • 未来规划

5. 背景：为什么做Serverless？业务复杂度不断增加

6. 背景：为什么做Serverless？技术架构演进基础设施服务化业务研发平台服务化业务研发业务应用业务逻辑托管服务化业务研发业务应用业务逻辑 2019上线 Serverless平台业务应用底座运行时、框架平台软件平台软件存储、数据库、中间件存储、数据库、中间件基础设施机房、网络、服务器平台研发基础设施机房、网络、服务器平台研发 Serverless 使业务开发者聚焦业务逻辑开发平台软件存储、数据库、中间件基础设施机房、网络、服务器平台研发

7. 背景：Serverless可以为前端解决什么问题？业务特点与痛点美团Node.js应用占比业务特点 • B端产品：系统复杂，更关注效率 • C端产品：访问量大，更关注稳定性 B端 30% 工具 40% • 工具型产品：访问量极低，更关注机器费用业务痛点 C端 30% • 研发效率低：资源申请、基础服务集成、发布耗时 • 运维成本高：集群扩缩容、机房容灾、节点隔离 • 机器费用高：冗余部署、资源利用率低

8. 背景：Serverless可以为前端解决什么问题？使前端开发者聚焦业务逻辑开发策略 Serverless 架构下按需使用、集群扩缩容、机房容灾、节点隔离基础设施对象存储日志文件存储机房操作系统数据库内容加速服务器网络安全机器申请、维护平台软件监控高并发软件稳定性高可用高性能统一接入SDK 框架服务高可用、高性能、高并发业务应用底座运行时集成基础组件SDK 函数粒度发布更快业务逻辑

9. 美团Serverless前端全景业务解决方案中后台系统解决方案前端服务编排平台一站式SSR平台小程序运营配置平台 …… • 提升业务开发效率 • 架构和稳定性保障 FaaS 平台研发套件研发框架管理视图触发源 HTTP MQ 应用网关 RPC 事件网关适配器路由限流/降级流量统计发布工具 WeIDE 基础组件沙箱 SDK加载器存储数据库 Node 函数运行时实例中间件 …… Java 函数运行时运维

10. 目录 • 背景 • 美团 Serverless 前端建设 • 研发套件建设 • 基础组件建设 • FaaS平台建设 • 前端交付实践 • 未来规划

11. 美团Serverless 前端建设：研发套件建设研发流程中的工具面临重构开发不适合、用不了了调试构建部署线上运维云函数调试函数粒度的项目部署运维工具研发框架 Era Remo Nami 开箱即用的框架 Node-server Express Next.js Next.js Koa 公司常⻅研发框架有10+种

12. 美团Serverless 前端建设：研发套件建设整体方案思路开发研发框架集成沉淀业务实践通过开放能力集成框架云端开发体验探索调试构建部署本地调试部署组件服务监控弹性伸缩远程调试灰度部署链路追踪容灾建设触发器调试函数部署性能诊断限流降级提供研发流程中必要工具线上运维

13. 美团Serverless 前端建设：研发套件建设通过开放能力集成框架研发框架 Koa Express Era Nami …… • 合作共建 • 业务框架遵循规范规范定义研发套件架构规范部署规范运维规范目录规范构建规范监控规范资源托管发布规范日志规范降级规范变更审批压力测试容灾规范。。。性能测试开发调试构建部署线上运行

14. 美团Serverless 前端建设：研发套件建设云端开发体验探索在线的开发协作模式协作效率在线开发项目开发项目调试在线调试开发效率一键初始化项目创建提供一致的环境配置灰度部署项目部署独立开发共享开发环境项目运维监控大盘、数据分析实现开发周期的闭环实现高效的团队合作

15. 美团Serverless 前端建设：基础组件存在的痛点 PaaS 图片服务消息队列配置管理 … 中间件任务调度数据库存储 MySQL 对象存储故障演练传输平台 KV存储性能诊断分布式数据文件存储 … … 学习和使用成本高，SDK很多、配置零散运维原有方式监控引入SDK 日志配置链路追踪初始化变更管理调试密钥管理

16. 美团Serverless 前端建设：基础组件策略：简化组件的使用方法触发源消息服务、对象存储、应用网关、定时器方式一：基于事件模型使用 • 配置启用组件，无需引入SDK 事件网关函数实例 API方法 FaaS 管理端

17. 美团Serverless 前端建设：基础组件基于运行时使用函数实例方式二：基于运行时使用 • 配置启用组件，无需引入SDK 函数运行时 Function Function Function 基础组件SDK加载器：加载基础组件基础组件依赖监控日志数据库对象存储配置管理分布式缓存运行时集成基础组件SDK 从上下文中读取基础组件实例

18. 美团Serverless 前端建设：FaaS平台整体架构设计运行态 • 如何应对高并发触发源 • 如何降低机器费用事件网关 HTTP 适配器 MQ 路由管理系统应用网关限流/降级 RPC 流量统计 • 稳定性保障建设函数管理发布管理场景管理实例业务函数 Function Function Function Function Function Function Function Function Function 函数沙箱监控大盘资源池管理 SDK集成配置管理监控 Kubernetes 日志 …

19. 美团Serverless 前端建设：FaaS平台如何应对高并发 Nginx 网关 • 弹性伸缩 • 支持快速扩容事件网关支持快速扩容的关键就是减小冷启动时间实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例实例高并发下

20. 美团Serverless 前端建设：FaaS平台冷启动时间优化包含美团定制流程请求触达容器调度镜像下载业务代码下载容器启动函数运行时启动代码加载请求执行业务代码初始化 20s+ 实例初始化 30s+ 消除实例初始化时间减小业务代码体积大应用拆分、提供平台依赖、删除不必要的代码以及第三方库依赖实例预热请求触达池化资源调度 500ms 业务代码下载代码加载 2.1s（2+0.1）请求执行请求完成请求完成

21. 美团Serverless 前端建设：FaaS平台如何降低机器费用？ Nginx网关 • 单实例多并发 • 减小沙箱配置事件网关 • 实例缩容为0 • 合并部署实例实例函数沙箱函数沙箱函数沙箱函数沙箱 0.25C0.25G 配置 * C* G配置

22. 美团Serverless 前端建设：FaaS平台合并部署实例实例沙箱服务A 沙箱服务A 实例实例沙箱沙箱服务A 实例服务A 沙箱沙箱服务A 服务A 沙箱沙箱服务A 服务A 单实例内运行 1个沙箱演进到多沙箱机器需求：2C4G * 4 机器需求：2C4G * 1

23. 美团Serverless 前端建设：FaaS平台稳定性保障稳定性建设下沉，使业务专注于解决自身的挑战

24. 美团Serverless 前端建设：FaaS平台稳定性保障全景图产品使用规范软件研发软件开发和产品发布容量规划变更管控预案与演练最佳实践项目管理高可用架构容量评估弹性伸缩单元测试应急响应可观测性技术评审研发流程规范资源池保障持续集成链路容量质量及运营事后总结和根因分析故障识别、⻛险规避和故障处理技术指导服务压测灰度发布变更审批故障复盘预案建设预案执行监控稳定性保障模型故障演练日志响应机制性能诊断故障处理告警

25. 美团Serverless 前端建设：FaaS平台高可用架构 Nginx 网关部署架构事件网关 • 业务线隔离、地域隔离、多机房部署通用集群弹性伸缩 • 定时伸缩、预留实例、提前扩容容灾降级北京机房金融集群上海机房北京机房上海机房 • 业务降级、限流、熔断上海北京函数实例实例实例实例实例实例实例实例实例

26. 美团Serverless 前端建设：FaaS平台示例：SSR场景降级策略 FaaS平台前端项目构建产物业务集群客户端请求响应 Serverless事件网关 Nginx七层网关主动感知被动兜底实例实例部署SSR服务 SSR服务实例实例降级降级实例对象存储部署CSR⻚面 CSR⻚面

27. 美团Serverless 前端建设：FaaS平台可观测性建设定位 • 发现问题：服务监控 • 定位问题：服务日志与性能诊断稳定性发现止损

28. 美团Serverless 前端建设：FaaS平台可观测性：服务监控系统监控 • CPU、内存、磁盘、网络等应用监控 • 访问量、QPS、错误数、响应时间进程监控 • CPU、内存、GC

29. 美团Serverless 前端建设：FaaS平台可观测性：服务日志用户端日志 • 全链路日志函数平台日志事件网关 App、Web和小程序函数运行时 • 链路分析前端日志SDK 服务端日志SDK 日志系统日志分析链路拓扑前端日志系统全链路日志服务端日志系统业务日志业务函数执行

30. 美团Serverless 前端建设：FaaS平台可观测性：性能诊断告警告警条件监控平台提供内存表现异常性能诊断平台提供定位性能问题

31. 美团Serverless 前端建设：FaaS平台灰度发布策略类型 Serverless事件网关 • 流量百分比 • 自定义条件 header、cookie、query 90% 10% 特性 • 平滑发布 • AB 测试 • 0 秒回滚原分组实例实例实例新分组实例实例实例实例实例

32. 美团Serverless 前端建设：美团Serverless前端全景业务解决方案中后台系统解决方案助力Web前端服务上云前端服务编排平台落地效果管理视图 • Node服务覆盖度：50% 发布工具 • 研发效率提升： 30%-40% • 运维成本：业务免运维 WeIDE • 资源利用率：40%以上小程序运营配置平台 FaaS 平台研发套件研发框架一站式SSR平台基础组件触发源 HTTP MQ 应用网关 RPC 事件网关适配器路由限流/降级流量统计实例函数运行时中间件存储数据库 Function Function Function Function 运维 SDK集成配置管理监控日志 …

33. 目录 • 背景 • 美团 Serverless 前端建设 • 前端交付实践 • • 案例一：流量波动较大的服务 • 案例二：低频访问SSR⻚面场景未来规划

34. 前端交付实践：业务案例一流量波动较大的服务业务特点 • 平时流量小 • 高峰流量大，QPS 最高/最低差距达 30 倍 • 传统容器部署Node 痛点 • 服务器成本：流量上下波动剧烈，高低峰期间流量相差大。现有的部署方式只能按最高业务峰值来进行申请，在流量低谷，大部分机器资源是冗余的，资源利用率低 • 运维成本高：业务研发需要人工运维，机器替换申请等，影响业务开发效率 • 应急响应不及时：线上出现问题时需要人工干预，处理成本高、不及时 SSR/API 服务

35. 前端交付实践：业务案例一低成本迁移事件网关事件网关函数实例服务器应用 Web适配器函数实例函数实例函数1 函数运行时函数运行时函数运行时函数2 函数1 函数1 函数2 应用函数2 传统架构平滑过渡过渡阶段引导升级 Serverless架构

36. 前端交付实践：业务案例一接入Serverless架构后带来的改变 • 实例自动伸缩：自动扩容、定时扩容 • 全面的监控：系统、流量、性能数据监控的一站式解决方案收益 • 服务器成本降低：资源利用率由10%提升到 35%以上 • 运维成本降低：一站式监控，迁移后零运维； • 应急响应：秒级发布、实例异常自动隔离。系统层面的紧急情况由平台承担。实例随着QPS增加自动扩容

37. 前端交付实践：业务案例二低频访问SSR⻚面场景业务特点 • ⻚面粒度部署服务A-⻚面1 服务A-⻚面2 服务A-⻚面3 • 日常流量较小 • 流量有波峰波谷服务A-⻚面4 服务A-⻚面5 函数沙箱实例 1C1G 多⻚面-单沙箱-单实例服务A-⻚面6 痛点 • ⻚面间隔离性差 • 发布回滚耦合、时间⻓

38. 前端交付实践：业务案例二部署架构演进收益服务A-⻚面1 服务A-⻚面2 服务A-⻚面3 沙箱沙箱沙箱实例 1C1G 实例 1C1G 实例 1C1G • ⻚面间隔离性提升 • 发布效率提升痛点服务A-⻚面4 服务A-⻚面5 服务A-⻚面6 沙箱沙箱沙箱实例 1C1G 实例 1C1G 实例 1C1G 多⻚面-多沙箱（单实例） • 资源利用率低，～10%

39. 前端交付实践：业务案例二部署架构演进原来服务A-⻚面1 服务A-⻚面2 服务A-⻚面3 沙箱沙箱沙箱服务A-⻚面4 服务A-⻚面5 服务A-⻚面5 沙箱沙箱沙箱实例 1C1G 多⻚面-多沙箱-单实例 • 发布/回滚时⻓：10分钟 • 隔离性：⻚面间耦合现在 • 发布时⻓：5s，回滚时⻓：0s • 隔离性：⻚面间沙箱隔离

40. 前端交付实践：业务案例二 SSR运行时解决方案 • 函数运行时支持插件能力 Vue2 • 业务定制SSR运行时 Vue3 多框架支持 …… MRN React 沙箱 SSR 运行时 Node.js 函数运行时 • 支持多框架扩展 • 冷启动时间降低

41. 未来规划 65%+ 工具建设组件集成函数运维提升资源利用率提升研发效率面对运维挑战

42.

43.