辛宝Otto

辛宝Otto 的玄酒清谈

北漂前端程序员儿 / 探索新事物 / Web Worker 主播之一/内向话痨
xiaoyuzhou
email

速通-字节跳动关于 Serverless 的演讲 2021 GMTC

image.png

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

GMTC 2021 演讲《字节跳动基于 Serverless 的前端研发模式升级》
微信链接

by 2021-07-07 ByteDance Web Infra 王磊

image.png

下面是我的笔记,一部分是原文,一部分是思考。原文部分我会注明。

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 正是在下)。

那么平台能力都有哪些呢?

image.png
文字解释不用看了。平台化掏出来,DDDD。先谈架构,再谈落地。

这部分和 modern.js 异曲同工。如果在想开启 SSR,一键搞定。其实也难,类似 nuxt.js,提供 CSR/SSR/SSG 模式可选,api 目录自动映射。部署产物使用在线的配置,分配路由和域名。

架构图分层这就来了:

image.png
这里文字东西很多,左边介绍了架构图,右边介绍了生命周期、数据流动。

说完架构,展开聊了下 CICD,这里我基于 Coding 提供的能力看,提交代码 - 编译 - lint - 安全检查 - 会读测试人工审批 - lighthouse 性能检查 - 人工审批上线。

服务编排流水线,配置文件和流程互转。

那么就来到落地了。

CSR 落地#

首先是普通 CSR,产物自动上传到 CDN,一份 es5 一份 es6,为啥要分开,为了 ESM?上线的过程,这里有个平台控制图,似乎是

  • 分配域名
  • 勾选对象存储的文件夹
  • 选择发布

给了一张图

image.png

原来如此,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

阅读结束的感受#

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

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

加载中...
此文章数据所有权由区块链加密技术和智能合约保障仅归创作者所有。