先出文字版本，再出语音版本吧。

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

阅读结束的感受#

大厂果然是大厂，很坦诚很真实，玩的深入。

自己吹牛逼也越来越好了，能猜到他们在说什么了。开心！