字节跳动基于Serverless的前端研发

1. 字节跳动基于 Serverless 的前端研发模式升级字节跳动 Web Infra - 王磊

2.

3. 王磊字节跳动 Web Infra 成员，在组件市场、多端可视化搭建、发布渲染系统等方向有过⻓期的专注和沉淀。目前负责字节跳动通用前端部署平台 Goofy Deploy 中的 Web 部署部分。

4. 目录 1. 大前端时代前端职责和挑战 2. 字节跳动常⻅的业务形态 3. 传统研发模式与挑战 4. 基于 Serverless 的研发模式 5. 监控 & 运维 6. 总结和展望 2

5. 大前端时代前端职责和挑战 1. 前端职责的转变 2. 前端面临的挑战

6. PC 时代前端工作切图、写样式、写交互、兼容各种浏览器等组件化、前后端分离等专注于浏览器相关的事情

7. 移动互联网时代前端工作跨端：移动端 Web（H5）、React Native、Flutter … 工程：基于 Node 的前端工程浏览器领域 —> android & ios（端） + 前端工程

8. Serverless 时代前端工作 CSR、SSR、BFF、一体化、微前端、跨端、Serverless Serverless 从单端到多端，从 Client 端到服务器端涉足领域广，对前端要求更高，前端全栈化

9. 大前端时代前端职责和挑战 1. 前端职责的转变 2. 前端面临的挑战

10. 前端面临的挑战知识体系工作内容基础知识：JS、CSS、Node 前端框架：React、Vue 打包工具：Webpack、Vite 微前端：qiankun、Garfish 跨端工程：RN、Flutter 后端框架：Koa、Express 后端知识：Redis、MQ、进程/协程、文件存储、监控报警偏向前端：写组件、写⻚面、兼容、性能优化、跨端工程等偏向后端：写 BFF、写 SSR、监控运维、集群管理等前端全栈化，涉及大量后端知识和工作，挑战大

11. 目录 1. 大前端时代前端职责和挑战 2. 字节跳动常⻅的业务形态 3. 传统研发模式与挑战 4. 基于 Serverless 的研发模式 5. 监控 & 运维 6. 总结和展望 2

12. 字节跳动常⻅的业务形态全球部署 CSR SSR BFF C 端业务首屏性能要求高前后端胶水微前端后端管理系统

13. 目录 1. 大前端时代前端职责和挑战 2. 字节跳动常⻅的业务形态 3. 传统研发模式与挑战 4. 基于 Serverless 的研发模式 5. 监控 & 运维 6. 总结和展望 2

14. 传统研发模式与挑战 CSR + BFF

15. 传统研发模式与挑战静态 Server 回源 CDN上传服务文件存储文件服务上传 CSS / JS / 图片等开发登陆认证业务代码 CSR AB 灰度系统运维 … 域名接入 … AB 管理 … BFF 服务部署 HTML 静态 Server 集群部署静态集群调用权限管理系统运维前端全栈化：除了业务逻辑，需开发很多基础服务流量管理部署系统开发 BFF BFF 集群部署 BFF 集群项目管理发布系统路由管理

16. 传统研发模式与挑战研发知识运维挑战沉淀资源人力 01 研发：研发成本高，不仅需开发业务，还需要开发基础服务 02 运维：运维成本高，要关注 QPS、内存、机器数量等数据 03 资源：流量无法精准估计，需准备充足机器，资源使用率低 04 人力：对研发同学的能力要求高，招聘难度大 05 沉淀：业务自建，没有体系化，无法沉淀最佳实践 06 知识：需了解后端知识，研发模式不符合前端，对前端不友好

17. 目录 1. 大前端时代前端职责和挑战 2. 字节跳动常⻅的业务形态 3. 传统研发模式与挑战 4. 基于 Serverless 的研发模式 5. 监控 & 运维 6. 总结和展望 2

18. 基于 Serverless 的研发模式 1. 策略和架构 2. DevOps / CICD 3. 前端实践

19. 策略框架 FaaS … BaaS 监控运维研发业界前端 Serverless Serverless 一体化云函数线上运行部署 SSR 单点研发调试基于 Serverless 打造一站式前端解决方案前端全生命周期

20. 策略 2 个目标基础能力平台化友好的开发体验无需关注前端基础服务，平台提供，开箱即用，简单配置即可无需感知 SSR、BFF 开发差异，开发和 CSR 一样轻松；支持 CSR 到 SSR 到一体化再到微前端渐进式开发。

21. 基础能力平台化部署能力 AB / 灰度全球部署监控运维系统集成微前端人群策略国内日志工程方案 SPA 百分比美国 Metrics 发布系统 MPA Header 新加坡报警通知研发工作台 SSR Query 欧洲指标大盘 LowCode 前后端一体化客户端版本国内测试断点调试服务编排 CDN UA 国外测试性能分析前后端调试 … … … … …

22. 友好的开发体验 JS 上传 CSS 图片 … CLI & 框架前端简单配置和开发即可支持传统前端 + 框架能力 BFF 和SSR，和开发CSR + 平台能力 = 全栈前端一样轻松云编译开发 & 调试全球化 HTML 路由配置 SSR 产物微前端配置发布控制台 BFF 产物 AB/灰度配置 … … Serverless

23. 整体架构线上运行研发 & 配置 & 部署上层产品 Web部署服务一站式前端工作台搭建系统 DevOps 流水线服务 … 接入层原子服务 OPEN API 工程方案 CLI Jupiter 开发协议部署协议 SSR 协议限流项目分发分流策略登陆认证流量统计负载均衡安全防控差异抹平 … Eden BFF 协议统一接入层 TLB 网关 … 静态 Web Server SSR Server 微前端 Server BFF Server Server 基础协议 … 部署系统项目管理路由管理 AB 管理监控报警 CSR 发布 SSR 发布 BFF 发布微前端发布 … 监控平台打点日志 … 监控报警缓存服务对象存储配置服务 …. BaaS Node 运行时 V8 运行时 FaaS 基础 Node SDK 运行时基础服务

24. 基于 Serverless 的研发模式 1. 策略和架构 2. DevOps / CICD 3. 前端实践

25. DevOps & CI / CD 编译代码检测线下 / AB / 灰度测试人工卡点各种检查，比如性能人工卡点线上部署

26. 基于 Serverless 的研发模式 1. 策略和架构 2. DevOps / CICD 3. 前端实践

27. 前端实践 Serverless CSR Serverless SSR 无需感知 SSR、BFF 开发带来的差异，和 CSR 开发一样轻松。支持 CSR 到 SSR 到一体化再到微前端渐进式开发。 Serverless 前后端一体化 Serverless 微前端

28. CSR 开发流程 CSS 上传文件存储 JS 前端开发 CSR 云编译 .html 部署控制台数据配置部署 .es6.html Web Server 路由配置 AB 配置前端只需要开发业务逻 … 辑，简单配置即可上线

29. CSR 案例

30. CSR 运行流程回源 JS 文件存储服务 CSS AB 处理 CSR HTML 网关项目分发处理限流 html 获取文件文件存储服务 ES5、ES6 识别 .es6.html … Polyfill UA 处理按需返回浏览器需要的 Polyfill

31. 前端实践 Serverless CSR Serverless SSR 无需感知 SSR、BFF 开发差异，开发和 CSR 一样轻松。支持 CSR 到 SSR 到一体化再到微前端渐进式开发。 Serverless 前后端一体化 Serverless 微前端

32. SSR 开发流程 CSS 开发 SSR 文件存储 JS 简单配置即可实现 SSR 前端上传云编译 .html 部 Web Server 署 Bootstrap.js 控 SSR RUNTIME 制台缓存配置编译 SSR Server SSR RUNTIME SSR 启动文件

33. SSR 案例

34. SSR 运行流程 SSR 超时或失败 SSR HTML 网关处理渲染处理 Redis 缓存策略 SSR 服务发现 SSR Server CSR ⻚面

35. 前端实践 Serverless CSR Serverless SSR 无需感知 SSR、BFF 开发差异，开发和 CSR 一样轻松。支持 CSR 到 SSR 到一体化再到微前端渐进式开发。 Serverless 前后端一体化 Serverless 微前端

36. 前后端一体化开发流程 CSS 上传文件存储 JS 前端开发一体化云编译 Web Server .html 部署控 Bootstrap.js 简单开发即可支持一体化（BFF）制 SSR RUNTIME SSR Server 台 BFF RUNTIME BFF Server 编译

37. 前后端一体化案例配置同 SSR 一样，BFF 发布默认探测

38. 前后端一体化运行流程 SSR 超时或失败一体化 HTML 网关处理渲染处理 Redis 缓存策略 CSR ⻚面 http 调用 SSR 服务发现 RPC 调用 SSR Server BFF Server

39. 前端实践 Serverless CSR Serverless SSR 无需感知 SSR、BFF 开发差异，开发和 CSR 一样轻松。支持 CSR 到 SSR 到一体化再到微前端渐进式开发。 Serverless 前后端一体化 Serverless 微前端

40. 微前端开发流程简单开发一个主应用，接入已有子应用即可开源地址：https://github.com/bytedance/garfish

41. 微前端开发流程前端开发 CSR 子应用云编译 CSR 产物控制台部署 Web Server 前端开发 SSR 子应用云编译 SSR 产物控制台部署 SSR Server 前端开发一体化子应用云编译一体化产物控制台部署一体化 Server 主子模块关系前端开发微前端主应用 CSR、SSR 或一体化项目云编译主应用产物控制台微前端菜单微前端 Server 其他

42. 微前端案例

43. 微前端案例

44. 微前端运行流程微前端主应用网关处理获取 HTML 注入到 HTML CSR 主子模块关系 SSR 菜单处理前后端一体化 … 请求子应用子应用 HTML 处理微前端 Server

45. 目录 1. 大前端时代前端职责和挑战 2. 字节跳动常⻅的业务形态 3. 传统研发模式与挑战 4. 基于 Serverless 的研发模式 5. 监控 & 运维 6. 总结和展望 2

46. 监控 & 运维 1. 业务监控和指标大盘 2. 日志系统 3. 运行时监控和调试

47. 业务监控和指标大盘

48. 监控 & 运维 1. 业务监控和指标大盘 2. 日志系统 3. 运行时监控和调试

49. 系统日志

50. 监控 & 运维 1. 业务监控和指标大盘 2. 日志系统 3. 运行时监控和调试

51. 运行时监控和调试

52. 目录 1. 大前端时代前端职责和挑战 2. 字节跳动常⻅的业务形态 3. 传统研发模式与挑战 4. 基于 Serverless 的研发模式 5. 监控 & 运维 6. 总结和展望 2

53. 总结 & 展望 Runtime FaaS + BaaS Serverless + 底层 Runtime 进一步优化，解决完善 FaaS 生态，和现有 BaaS 服在 FaaS + BaaS 的基础上，提供从冷启速度不够快的问题，更好对应务能够有更好的结合，为上层建设框架到开发，从开发到部署，从部突发流量。提供基础。署到线上运行等一站式研发平台。

54. 团队介绍团队招聘团队公众号

55. 谢谢