字节跳动 Web 研发面向 Serverless 的探索与实践

1. 字节跳动 Web 研发面向 Serverless 的探索与实践 — 杨尚斌

2. 个人介绍 • 杨尚斌 • 字节跳动基础架构部研发工程师 • 现：面向字节跳动全业务线提供前端部署的基础能力和相关服务 • 曾经：营销场景选搭投、前端性能、稳定性、工程化

3. 大纲 • Web 研发模式的演进和 Web 研发面临的问题 • Web 研发面向 Serverless 要解决的问题与遇到的挑战 • 字节跳动 Web 研发面向 Serverless 的落地

4. Serverless 研发效能 Web 研发模式的演进 RN/Weex Hybrid Electron YUI Wordpress jQuery 小程序 Modern.js WebApp Kissy Umi SSG React SPR Angular Vue Next.js Remix BFF 应用开发 ESR NSR 微前端 Lowcode Full Stack SSR 应用开发 Backbone MV* / 大前端 Volocity JSP Template Ajax 前后分离模板渲染服务端开发工程师（兼 UI 开发）前端工程师大前端开发工程师应用开发工程师

5. Web 研发所面临的问题 • Web Server 从哪来？Nginx？OSS？自己写？ • 流量突增怎么办？ • 开发环境能跑的代码，怎么部署上去？部署上去是最佳方案么？ • 如何部署 SSR、BFF，如何最佳部署 • 如何控制部署版本？ • 如何控制微前端版本依赖关系？ • 如何快速预览？ • 如何安全生产，如何分流 / AB？ Code GitLab Cloud Build Deploy

6. Web 研发所面临的问题 • 应用流量存在高峰，业务开发不期望过于关心流量带来的运维问题 • 技术选型越来越复杂，逐渐依赖大型框架 • 开始往 API 层涉猎，但往往依旧是前端视⻆，相对欠缺服务端思维 • 研发框架与应用托管存在割裂，最佳实践断层

7. 解法：Web 研发面向 Serverless

8. 定义：Web 研发面向 Serverless • 极速扩容，低感知 QPS 流量压力 • 基础 BaaS 能力供给

9. 定义：Web 研发面向 Serverless • 各托管场景最佳实践沉淀 • 与研发框架协同配合 • 极速扩容，低感知 QPS 流量压力 • 基础 BaaS 能力供给 + • 简单易用的可观测能力 • 平台级的分流、灰度能力。满足业务灰度上线、AB 等基础诉求

10. 需要解决的问题与挑战 • 极速扩容能力，业务低感知流量带来的运维问题 • 各托管场景的最佳实践需要沉淀，且默认最佳（尤其是复杂模型下） • 与研发框架有机配合，Develop 与 Prod 行为一致 • 友好的可观测能力，“欠运维”也能运维 • 平台级的预览、灰度能力，安全上线保障

11. 字节跳动 Web 研发面向 Serverless 的落地 — 面向 Web 研发的一体化应用托管平台

12. 大流量 / 峰值流量问题充分利用节点缓存静态 CDN 源站只承接相对少量的回源流量 LB 只使用 CDN 的优质线路动态CDN 源站 / OSS 承接所有流量 LB 多功能源站 😁 抗流量不存在问题 😵💫 CDN 匮乏的可编程能力 😵💫 难以做复杂的分流 😵💫 无法承接千人千面的 SSR 等 😁 分流、AB 都能支持 😵💫 源站压力大 😵💫 提前感知流量，扩容扩容扩容 😵💫 怕业务间相互影响做独立部署，又引入了巨大的资源浪费 😵💫 源站如何实现？😵💫 部署最佳实践？😵💫 版本管理？ 😵💫 快速预览，AB？ 😵💫 SSR / BFF ？ 😵💫 微前端？

13. CDN 按需缓存 • 特定 PATH 配特定缓存规则 • 根据源站响应头做缓存 • 带特定 Header 访问不缓存 • 依据业务形态，CDN 层「或许」有层缓存

14. 源站 Worker 级的真极速扩容能力，解决峰值流量问题

15. 源站 Worker 级的真极速扩容能力，解决峰值流量问题 • 去 Pod 化：V8 Isolate 同进程运行多 JS App • 抛弃启动基础实例、下载用户代码、启动用户进行 • Snapshot 机制，抛弃解析、字节码生成、Top Level Execution 等，加载快照直接执行 • Worker 资源池业务级物理隔离，公共资源池兜底 • 足够轻量，可部署在边缘环境（直接源站放在 CDN 「旁」） Cold Start Latency

16. 大流量 / 峰值流量解决方案业务收益某高流量业务：经常需要预览、分流；经常存在尖峰流量；源站为防止宕机预览大量机器 4W - 5W RMB 之前 VS 3000 RMB 现在

17. 研发框架协同问题前端框架部署 Build + CLI Dist 部署平台

18. • CSR 研发框架协同问题 • 描述路由映射信息，是否是 SPA • 描述 rewrite 规则 • 描述 response header • … • Node Server / SSR / BFF • 描述 Server 版本 • 描述环境变量 • 描述启动脚本，监听端口 • … build + Html / Assets 部署平台

19. 研发框架协同问题 • 创建项目时，平台主动探测应用信息，0 配置完成项目创建与部署 • 与平台 UI 配置能力⻬同的文件协议描述能力 • 与公司主流框架协同，默认构建出文件协议

20. 快速预览，AB /分流，安全生产 😵💫 测试环境数量有限，并行需求无限？ 💬 发布到测试环境 💬 发布到一个新的地址 😵💫 新地址被人访问到怎么办？ 😵💫 能按照 UserID / Device ID 分流么？ 😵💫 能百分比上线么？ 😵💫 能力是平台化的么？

21. 快速预览，AB /分流，安全生产上线前多泳道测试 PC: 浏览器插件携带 header 客户端：测试包可直接切泳道 Server 1 Server 2 平台分流 GateWay 线上分流/ AB Server 3 部署平台 … 携带各种信息：ua、userId、 did、query、cookie 等手动点击部署 Git Trigger 自动触发开发者

22. 快速预览，AB /分流，安全生产 • 与 Server 无关的平台级多种分流能力 • 多分流优先级排序 Trigger 自动触发预览环境部署 • Git （Auto Preview）（测试环境→线上泳道→线上百分 • 安全生产部署流程比→线上全量）

23. 在线调试 • 预置的 Runtime（Debug 服务、观测服务注入等） • 在线观测实例信息 • 指定实例，直接进行 Debug

24. 可观测能力 • 平台自身的 Metric 埋点、图表输出 • 用户业务代码埋点建议 • ⻜书报警能力

25. 可观测能力 • 日志输出（简洁版、Kibana） • 链路追踪

26. 基础运维干预能力 • 调整实例 • 机器配置 • 限流设置 • Service Mesh 按照项目启动的部署能力，按需打开

27. 常⻅部署模式最佳实践 • Full Stack App • 微前端

28. 常⻅部署模式的实践提供 — Full Stack App TOS Proxy Worker Node.Js / Worker CSR Web Server SSR Server Fallback 路由匹配分流计算 CDN Gateway CSR Web Server SSR Server Node.Js / Worker 访问者 BFF Server BFF Server 执行部署操作应用托管者

29. 常⻅部署模式的实践提供 — Full Stack App • 部署实践方案提供 • 易用的对接规范（构建产物符合规范 + 可选的文件协议） • 框架无关，平台级的分流、AB 能力 • 平台级的运维能力提供

30. 常⻅部署模式的实践提供 — 微前端 TOS 根据注入的数据，Adatper 成微前端框架需要的数据 @deploy/gar sh-sdk @deploy/umi-sdk 路由匹配分流计算 HTML CSR Web Server Gateway 主子工程关联关系微前端主子模块关系计算子模块分流版本计算 Micro Module CalCulate 注入: window.gfdata = { moduleList: [{ Name: ‘xxx’, bundleUrl: ‘//xxx.com.js’ Con g: {…} }] } 执行部署操作操作主子模块关联行为应用托管者

31. 常⻅部署模式的实践提供 — 微前端 • 微前端部署实践提供 • 框架无关的对接方式，Adapter 层适配数据差异（Gar sh/Qiankun） • 主、子工程均可独立部署，独立分流、AB，互不干扰 • 主子模块关联审核能力应用托管者

32. 探索：Custom Server • 场景： • 需要在⻚面中注入登录信息（不同业务登录态不统一） • 需要实现不同域名访问，HTML 中的 <Meta /> 有变化（SEO） • 某某 Header 请求时，渲染引用了 ES6 的 HTML • 渲染前需要判断 XX 逻辑，某种情况下 Redirect 到 XX ⻚ • ……

33. 探索：Custom Server 特定干预逻辑前端 JS 代码真 Server 😵💫 相关逻辑放置到前端代码里 😵💫 Proxy Server 自身的特定干预逻辑 Proxy Server 真 Server 运维问题

34. 探索：Custom Server 平台自身的高可用 Server + 特定 Hook 下的干预渲染逻辑写法受限制、声明周期受限制 = ❤

35. 探索：Custom Server • Custom Server 提供业务干预⻚面渲染的 Hook • 与框架合作，保障 Dev 时能力对等，写法更加简单 • 与平台 Server 部署一起部署在 FaaS Worker 中

36. 业务落地效果高流量 CSR 微前端 + SSR CSR + BFF

37. 展望 • 底层保障：更加极致的调度策略、灾备策略、冷启响应、轻量级 Runtime、标准制定（wintercg） • 上层产品：更好的开发者体验，更多的部署场景，CICD 场景更无缝的结合

38. Q & A