先出文字版本，再出语音版本吧。
GMTC 2021 演讲《字节跳动基于 Serverless 的前端研发模式升级》
微信链接
by 2021-07-07 ByteDance Web Infra 王磊
下面是我的笔记，一部分是原文，一部分是思考。原文部分我会注明。
serverless 不是新概念，对大厂来说更不是新东西，肯定大厂也有自己的 BaaS 体系，毕竟 FaaS 相对好做，背后的基建还是要定制，怀着这个想法来看。
大纲总览#
原文：接下来将从以下 6 个方面介绍今天的内容
- 首先总结一下大前端时代下前端的职责和挑战
- 然后介绍字节跳动常见的业务形态
- 字节跳动传统的研发模式和挑战
- 之后介绍我们是如何基于 Serverless 对前端的研发模式进行升级的。
- 为了保证稳定性，我们在监控运维方面也做了不少工作。
- 最后简单做一下总结和展望。
1 工作内容多#
第一部分不意外，工作内容拓宽，切图仔 - 大前端 - SSR/BFF/ 微前端 / 跨端、一体化、Serverless。
我没太理解 BFF 到微前端的渐进式开发。
知识体系部分，传统框架知识，还需要构建工具、后端。需要补充 redis/mq/ 对象存储、监控告警等。主要还是需要补充后端和运维的知识。
2 业务形态多#
第二部分也不意外，toC + toB，绕不开 CSR+SSR+BFF，微前端他放的位置很高。作为全球公司少不了全球部署，全球部署那就少不了分布式数据同步呗。
3 需求和挑战#
第三部分，举例 web 开发的问题。这里展开看下。
CSR+BFF
- CSR 是前端基础部署，拓展也就是接入 CDN + k8s 集群部署。
- 业务亮点：对象存储的处理、登陆鉴权、AB 会读、集群运维
- BFF 的部署绕不开 k8s 集群
- 业务亮点：权限、运维、流量控制、域名接入 (估计是 dns 一套走)
- 部署系统
- 项目管理、发布系统、旅游管理、ab 管理
这里也没有太多新东西，但是对普通前端来说东西很大，很难。问题就是太庞大了，Serverless 呼之欲出了。
好了，快把东西掏出来吧。
4 基于 sls 的方案#
第四部分，基于 Serverless 的研发模式。
概念对齐和拓展#
Serverless 业界实践：
- 已经有 FaaS，比如调度、冷启动等
- BaaS 结合
- 云函数、Node 框架、Runtime 等
那么一个基于 Serverless 做一站式前端解决方案。所谓解决方案首先要画图：架构分层架构图 + 生命周期路线图。
继续看下去，一站式平台要提供基础平台能力，常见能力开箱即用，DX 友好 (nuxt 正是在下)。
那么平台能力都有哪些呢？
文字解释不用看了。平台化掏出来，DDDD。先谈架构，再谈落地。
这部分和 modern.js 异曲同工。如果在想开启 SSR，一键搞定。其实也难，类似 nuxt.js，提供 CSR/SSR/SSG 模式可选，api 目录自动映射。部署产物使用在线的配置，分配路由和域名。
架构图分层这就来了：
这里文字东西很多，左边介绍了架构图，右边介绍了生命周期、数据流动。
说完架构，展开聊了下 CICD，这里我基于 Coding 提供的能力看，提交代码 - 编译 - lint - 安全检查 - 会读测试人工审批 - lighthouse 性能检查 - 人工审批上线。
服务编排流水线，配置文件和流程互转。
那么就来到落地了。
CSR 落地#
首先是普通 CSR，产物自动上传到 CDN，一份 es5 一份 es6，为啥要分开，为了 ESM？上线的过程，这里有个平台控制图，似乎是
- 分配域名
- 勾选对象存储的文件夹
- 选择发布
给了一张图
原来如此，es6 是为了后面的动态 polyfill，根据 ua 动态返回，有点 https://polyfill.io/ 的意思了，动态填补，果然大厂，想到的都用上了。
SSR 落地#
在分配路由时候，可以选一下 SSR、微前端模块。对应 Nuxt 的配置 mode 变化吧。
用户访问 SSR 还是得走缓存，先看 Redis 否则就通过服务发现 (分布式架构) 的对应服务，异常情况需要 CSR 兜底。
BFF 落地#
哦懂了，关联已有知识，Nuxt 的 Nitro API 目录，刚才的 SSR 就是 SSR。编译之后产物有 bff 文件，表示了对应的服务，部署服务就有了 BFF 服务。
分的比较开，我只能理解到这里了。
SSR 服务发现使用 RPC 调用，CSR 使用 HTTP 调用，常规。
微前端落地#
微前端就是一个页面里去套另一套系统的页面，这里不解释。内部产出到了 Garfish 微前端体系，技术产出可以类比 micro-app/wujie
大厂的目标肯定还是要丝滑，从项目基建上做准备。
目标选择，我需要开发 CSP/SSR/BFF/ 微前端应用，这样开发，一样交付。微前端多了父子模块关系、微前端菜单等功能。
我推测父子模块关系，需要定义 root 容器和对应的 url 路由。他有个页面，申请关联才能统一关联。没太理解作用
我推测后者微前端，就是菜单可配，毕竟菜单才是入口，菜单命中的页面是空的，作为容器引入。毕竟要动态鉴权，想起我曾经的噩梦哈哈哈。
我就理解到这里了，流量进来先到网关 - 容器页面 - 加载微前端。
5 监控运维#
前端玩了这么多东西，还是要看负载和运维，有了 k8s 简单了很多，我推测可以有面板监控、监控报警方案、自动重启和回退、说不定还有火焰图。
首先是定义指标，通过规则引擎设定阈值。
- 404 告警
- 5xx 告警
- qps 超额告警
- ssr 失败告警
有了告警，就得弹窗要处理，有问题了要怎么办
- 知道了，不处理
- 屏蔽半小时，屏蔽 6 小时
- 取消屏蔽
- 这是正确告警、错误告警、需要处理。埋点上报
- 复制内容求助
有了指标就可以做大屏了，我太警觉了。试试看到负载效果。
日志还是要接入日志系统，日志系统对接做单独的管理和筛选。也就是海量数据的信息探查。争取做到链路追踪。
有了问题，如何保护现场和调试？这里有点盲区了，应该还是远程 sourcemap、火焰图分析，他也承认内部有类似 alinode 自定义的东西，node 运行时调试。
对 snapshot/cpu profile 分析就有点黑魔法了，不懂，尊重。
6 总结展望#
未来 serverless 的发展：
- runtime 要更好的处理冷启动、动态扩缩容
- 更好的 baas 做好平台建设
- serverless+ 也就是一站式服务
他们 infra 团队
- apm platform
- test infra
- low code
- 跨端解决方案
- web 开发引擎
- engineering platform
- 移动中台
- serverless
- node.js 架构
- web ide
- 微前端解决方案
- design ops
阅读结束的感受#
大厂果然是大厂，很坦诚很真实，玩的深入。
自己吹牛逼也越来越好了，能猜到他们在说什么了。开心！