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

怼烎@ 2022-10-04 14:54 151阅读 0赞

![edb336af2a7a54a41e98701676ff2af4.png][]

点击上方 程序员成长指北，关注公众号

回复1，加入高级Node交流群

大家好，我叫王磊，来自于字节跳动 Web Infra，今天由我给大家分享《字节跳动基于 Serverless 的前端研发模式升级》。

![a2ccaf207ff08c7643d390ef866e0489.png][]

接下来将从以下 6 个方面介绍今天的内容，首先总结一下大前端时代下前端的职责和挑战。然后介绍字节跳动常见的业务形态，以及字节跳动传统的研发模式和挑战。之后介绍我们是如何基于 Serverless 对前端的研发模式进行升级的。为了保证稳定性，我们在监控运维方面也做了不少工作。最后简单做一下总结和展望。

![2f84a34e3b37a6f65c7740b906f82c6d.png][]

首先让我们看下大前端时代下前端的职责和挑战，随着前端的演进，前端的职责在不断的变化。

![249d001b1b814c45582a6404fc1587f1.png][]

PC 时代，我们的工作主要在于切图、写样式、写交互、兼容各种浏览器等，此外还会做一些组件化、前后端分离的事情，总体而言还是专注于浏览器领域。

![b725dfe15f62b18fcdcb0aa34bbafaf1.png][]

随着移动设备的兴起，我们进入了移动互联网时代，整体工作分为跨端和工程 2 个方面。跨端主要做一些移动端 Web（H5）、React Native、Flutter 等工作；工程主要基于 Node 做一些方案。总体来看，这个阶段我们已经跨出了浏览器，迈向了 Android、iOS 和前端工程。

![a2c455d6bf6133026366845da2a7155b.png][]

当下进入到 Serverless 时代，前端的工作变得更加丰富，包含 CSR、SSR、BFF、微前端等开发工作，从单端到多端，从 Client 端到服务器端，涉及的领域变得非常广，对前端要求变得更高，整体上是向着“前端全栈化”的方向发展。

![950d35dcf373287341617eb0023ad9a9.png][]

在这种职责转变下，看下我们面临了哪些挑战。

可以从 2 个角度来看，一个是知识体系，一个是工作内容。

在知识体系上，除了传统前端知识 JS、CSS、Node，前端框架 React、Vue、打包工具 Webpack、Vite，微前端，跨端工程等。还会涉及后端领域，框架有大家熟悉的 Koa、Express；知识包含 Redis、消息中间件、文件存储、监控报警等。

从工作内容上来看，也分为 2 块，一块是偏向前端的工作，一块是偏向后端的工作。偏向前端的工作有 写组件、写页面、兼容、性能优化、跨端工程等；偏向后端的工作有写 BFF、写 SSR、监控运维、集群管理等。

整体上来看，前端向着全栈化的方向发展，涉及大量后端的知识和工作，对前端的挑战非常大。

![728b481edc8f3f519613448b076a4676.png][]

在介绍完大前端时代下前端的职责和挑战后，让我们看下字节跳动有哪些常见的业务形态。

![6c8be9103f6397d51c4bc37a9bbfcc8a.png][]

字节跳动常见的业务形态抽象成前端领域可以分为 4 个部分，其中 CSR 和微前端占大部分，CSR 是一些 C 端业务，微前端是一些中后台管理系统。此外还包含一些 SSR 页面和 BFF，SSR 是为了提升性能，解决首屏问题。BFF 主要解决前端 UI 模型和后端数据模型存在 Gap 的问题，主要写一些胶水代码。此外值得注意的是，字节跳动作为一家全球化的互联网公司，业务可能会部署到全球各地。

![b1b3da26973e5ef73d7943fb47f294f2.png][]

介绍完字节跳动常见的业务形态后，让我们看看字节跳动传统的研发模式以及遇到的问题。

![13be7ece8be24720239eba2dc50b262b.png][]

拿一个包含 CSR + BFF 的项目举个例子。

![1890d5307e24b4af90bc777451e26f51.png][]

从 CSR 讲起，针对一个 CSR 页面，我们除了开发业务，生成 CSS、JS、图片等静态资源和 HTML 之外，想要把页面部署到线上稳定运行，还需要开发很多基础服务。

比如需要开发一个 CDN 上传服务，将静态资源上传到 CDN 上。此外还需要开发一个静态 Server 托管 HTML，静态 Server 可能包含文件服务、登陆认证、AB 灰度等功能。开发完毕后还不够，我们还需要申请机器和域名，把项目部署到集群里面，CSR 页面才能运行起来。

想使用 BFF，需要开发一个 BFF 服务，这个服务可能包含权限管理、系统运维、域名接入等各种功能。同样需要申请机器和域名，把项目部署到集群里面。

为了方便业务能够稳定上线，还需要开发一个部署系统，这个系统可能会包含 项目管理、发布系统、路由管理、AB 管理等功能。

从工作内容上来看，针对一个简单的 CSR + BFF 业务，除了关心黄色方框中和业务相关的内容，还需要开发各种基础服务，对于前端同学实在太难了。

![8e6f5331e2f3af52844c779bae899f9d.png][]

这种研发模式有什么问题呢？总结为以下 6 点：

第一：研发成本高，不仅需开发业务，还需要开发基础服务；

第二：运维成本高，需要关注 QPS、内存和机器数量等指标；

第三：流量无法精准估计的情况下，需要准备充足的机器，资源使用率低，举一个线上真实的案例，从图中可以看出流量有明显的波动，需要准备比流量高峰还要多的机器，低峰时机器不能很好的被利用；

第四：从人力上来看，对研发同学的能力要求会更高，由于招聘本身就很难，这样会进一步加大招聘的难度；

第五：由于各种基础服务都是业务自己建设，很难像工程团队那样进行体系化建设，无法沉淀最佳实践；

第六：这种研发模式不符合前端习惯，需要了解很多后端知识，对前端其实是非常不友好的。

![a0a44658c46f077b557c3f862da77de5.png][]

为了解决这些问题，我们基于 Serverless 来对前端的研发模式进行了一次升级。

![23ed52d86335cd741ddcff0cefdafb26.png][]

接下来将从以下 3 个方面去介绍，首先讲一下策略和架构。

![ae9a5b80d5f67a8cd94917476a356617.png][]

在介绍我们的策略之前，先看下业界前辈们在 Serverless 方面做了哪些工作：首先是基础 FaaS 的建设，比如调度、冷启动等；然后是将现有 BaaS 服务和 FaaS 结合在一起，打造更好的生态；此外还有云函数、Node 框架、Runtime 等。综上所诉，可以发现前辈们主要还是在解决 Serverless 下的一些单点问题。

在这些单点研究的基础上，我们的目标是围绕着前端的整个生命周期，构造前端 Serverless ，包含前端框架、研发流程、调试、部署、线上运行、监控运维等各个环节。用一句话来总结的话：基于 Serverless 打造一站式前端解决方案。

![45674cde5bf00b466f0a1fafee3ec986.png][]

基于 Serverless 打造一站式前端解决方案有 2 个目标。

第一：基础能力平台化，业务再也不需要关注前端基础服务的开发，平台提供，开箱即用，简单配置即可；

第二：友好的开发体验，用户在开发 SSR 和 BFF 的过程中无需感知到差异性，和开发 CSR 一样轻松；此外支持 CSR 到 SSR、SSR 到 一体化 BFF、一体化 BFF 到微前端的渐进式开发。

![60d596e192e8ed57e81f8a88ba7207d6.png][]

首先介绍一下基础能力平台化，基础能力包含 5 个方面的内容。第一部署能力，支持微前端、SPA、MPA、SSR、一体化 BFF 、CDN 的部署。第二 提供 AB/灰度能力，帮助前端进行上线前的验证和检测，帮助业务进行产品上的实验，这里有人群、百分比、客户端版本等策略。由于字节跳动是一家全球化的互联性公司，我们的业务需要支持全球化部署，比如国内、美国、新加坡等。出于稳定性的考虑，我们需要拥有完善的监控运维系统，包含日志、Metrics 打点、报警通知、指标大盘等。在前 4 个能力的基础上，为了提供更好的用户体验，需要和公司内部各个系统进行集成，比如工程方案、发布系统、一站式研发工作台等。

![d987a5b04edadd7f82b718b07fb4184f.png][]

接下来介绍一下用户体验，想要支持 SSR 和 BFF，只需要简单配置和开发即可，在开发上和 CSR 没啥区别。比如用户想要支持 SSR，只需要开启一个配置；想要支持 BFF，添加一个 API 目录，写一写就行了。然后经过云编译，静态资源会自动上传到 CDN。HTML、SSR 、BFF 等产物经过发布控制台，简单配置一下即可上线。从研发流程来看，用户只需要关注红框框中的部分。用一句话来总结，我们希望传统前端 + 框架能力 + 平台能力 = 全栈前端。

![f536c383758e845e00bb18be467cb843.png][]

为了实现这些目标，我们需要做很多工作，具体分为 2 部分：“研发 & 配置 & 部署”和“线上运行”。

先说第一个，左边部分，从下到上来介绍。最底层提供了一个部署系统，包含项目管理、路由管理、AB管理、监控报警等功能，支持 CSR、SSR、BFF 和微前端的发布。在上层我们有各种协议，比如开发协议、部署协议、SSR 协议、BFF 协议。在协议的基础上我们对接了公司内部的工程方案，比如 Jupiter 和 Modern.js。为了和公司内部各个系统更好的结合，我们抽象了接入层，里面提供 OPEN API、服务编排的原子服务、CLI 等。最后基于接入层打造上层产品，比如 Web 部署服务、一站式前端工作台、搭建系统或 DevOps 流水线服务等。

接下来让我们介绍一下线上运行部分，这个我们从上到下进行介绍。当发起一个 HTTP 请求，首先会经过 统一接入层 到达我们的网关，这里我们会做限流、项目分发、AB 分流等相关的工作。经过网关会到底层各个服务，比如 静态 Web Server、SSR Server、BFF Server、微前端 Server 等。为了保障稳定性，我们提供了完备的监控报警，比如日志、打点等。下面是各种 BaaS 服务和 运行时，比如 Node 运行时，V8 运行时。最后是 FaaS 和 Node 基础 SDK。

![18131c1111b36fcf430e81311ae919e6.png][]

在介绍完策略和架构之后，我们介绍一下 CI/CD，这块我也做了不少工作。

![14e61137f91e94284e5f109c88b67c05.png][]

这是一个简单的例子，当我们开发完代码后，首先会进行编译，之后经过一个代码检查，看看是否会有一些代码问题，比如是否符合 Lint，或者含有安全漏洞等。

接下来通过 “线下、AB 或者灰度进行测试”，测试完毕之后需要经过一个人工卡点，确定没问题，会进行一些线上检查，比如 Lighthouse 的性能检查，这里也会有一个人工卡点。当确定没问题，就会把项目部署上线。

由于这个是一个服务编排，用户可以按照自己的诉求进行个性化定制。

![0652665c7d3b8e606495bc284edce18f.png][]

讲了这么多，可能会比较抽象，接下来举一些实际的例子来说明。

![a10dd4b72f451414d773e7f95b1a8ac2.png][]

会从 CSR、SSR、一体化 BFF、微前端 4 个方面来讲，这里会重点突出 2 点。第一，无需感知 SSR、BFF 开发带来的差异 ，和 CSR 开发一样轻松；第二，支持 CSR 到 SSR 到一体化 BFF 再到微前端的渐进式开发。

![921c7f1477343141dea24500301bbd32.png][]

先从 CSR 开始，左下角是一个很简单的例子，前端开发完，经过云编译，生成 CSS、JS 等静态文件上传到 CDN；此外会生成 2 份 HTML，一份是 ES5 的，一份是 ES6 的，通过部署控制台，经过简单配置就可以把代码发布上线了，整个过程用户只关注开发和配置就可以了。

![7cbe8e4f7038687415ab2302d3839049.png][]

这是我们的一个案例，左边是我们的系统，上线前只需要配置域名，指定某个项目下某个文件就可以了，然后点击“确定”，发布一下，就会生效。CSR 的项目在我们的系统上有很多，比如 “懂车帝”、“西瓜活动页”、“抖音活动页”等。

![3f108c8c5ce0de8e4f9cbfde4931c1eb.png][]

接下来介绍一下线上运行流程，分为 3 块。第一个是静态资源，直接访问 CDN 就可以了；第二个是 HTML，首先会进入到网关，进行 AB，项目分发，限流等处理，这时我们会知道访问的是哪个项目的哪个版本下的哪个文件，再经过 ES5、ES6 的识别，就可以访问到不同的 HTML 了。第三块有点特殊，浏览器的 Polyfill，我们这边提供了一个动态 Polyfill 服务，按需返回浏览器的 Polyfill，减少内容的大小，优化页面的性能。

![9bd2c7dc0c1a8e48e2832c79df10d8af.png][]

CSR 介绍完了，让我们来看下 SSR。

![657d07d81754a2e404a518c6c15b4e73.png][]

假设我们已经有了一个 CSR 项目，想要支持 SSR，我们只需要经过一个简单配置就可以了，把 Server SSR 设为 true，在编译的时候会生成 SSR Runtime 和启动文件。如果我们的项目不是一个千人千面的项目，可以接受缓存，我们还可以在代码添加一个缓存组件，这时在编译产物中会多一个缓存配置。此外相较于 CSR，SSR 的项目在部署后会多一个 SSR Server。

![0563653f535950c9b9dfa2cbb5d91392.png][]

同样，我们看下上线前的配置，很简单，把路由标记成 SSR 就可以了。SSR 项目有“广告的答题赢红包”、“大力智能神灯”和“头条热榜”等业务。

![afcf5ceca2f50964b439bf7df0470211.png][]

看下线上运行流程，访问 SSR，本质上是获取 HTML，请求会经过网关处理，到达“渲染处理”，这个时候看下缓存策略，如果可以缓存，看下 Redis 是否有缓存，有就直接返回，没有的话，通过服务发现访问 SSR Server。在异常或者超时的情况，会兜底到 Web Server 上获取 CSR 页面。

![7cf56a3ed3c804f927fe258aae3f357f.png][]

Ok，假设我们已经有了一个 SSR 项目，想支持 BFF，那么我们该怎么办呢？这就是我们接下来要介绍的一体化 BFF。

![2849cf9d9f2509307ae109ce033f5863.png][]

开发的时候，只需要在项目中添加一个 API 目录，把业务逻辑写好，使用的时候和前端开发一样，直接通过 import 将方法引入，调用就可以了。相较于 SSR，一体化项目在编译后会生成一个 BFF 的 Runtime，在部署后会多一个 BFF Server。

![b96f2be6dc7ae6f046295b24c331e6ad.png][]

看一下例子，公司内部的一个“研发工作台”和我们的一个教育平台“你拍一”就是典型的案例。在配置上，前后端一体化项目和 SSR 是一样的，BFF Server 的发布是通过默认探测实现的。

![b12db04dba08448b90028ca5d1912ed1.png][]

运行时，相较于 SSR，一体化 BFF 多了 一个 BFF Server，在 SSR 的时候，我们会通过 RPC 进行调用，在 CSR 的时候会通过 HTTP 方式进行调用。

![0d1916dc61288adaa87dfcbd7c4ee505.png][]

介绍完了前面的 CSR、SSR 和一体化 BFF 项目，最后介绍一下微前端。

![771b620a2d4a36a22affcf65fe0c7318.png][]

假设我们已经有了一些项目，开始只有 1 - 2 个同学维护，随着业务的不断发展，项目变得越来越复杂，需要 10 个乃至上百个同学、甚至跨团队开发，不同团队使用的技术体系可能还不一样。这样一个原本的小项目就变成了一个巨石应用，开发和维护的成本就变得非常高，那我们该怎么去解决现有问题?

微前端会是一种比较好的选择，我们团队提供了一套解决方案 —— Garfish，它解决了跨团队协作难、技术体系多样化、复杂度日益上升等问题。从架构层面出发可以将多个独立交付的前端应用组成一个整体，这些前端应用能够 “**独立开发”**、**“独立测试”**、**“独立部署”**，但在终端用户来看却是一个内聚的产品。目前 Garfish 已经开源了，大家有兴趣可以去了解一下 https://github.com/bytedance/garfish。

那么我们如何把现有项目，变成一个微前端呢？只需要开发一个主工程，注册子工程信息，在运行时交给框架即可。

![a5ba612c04c7471eacc72d7da12806fb.png][]

让我们看一下开发流程啊，由于是微前端，需要分为主工程和子工程，子工程可以是前面介绍的 CSR、SSR、一体化 BFF 项目的任何一种。主工程也可以是 CSR、SSR、一体化 BFF 项目的任何一种，开发流程和前面介绍的一样，唯一不同的是，在发布控制台需要配置“主子模块关系”和“微前端菜单”等。

![bd8fba4fb91c3f9b5010a66533e4bf87.png][] ![a91f51743a97b38ae906a8c76d81a60c.png][]

看下配置界面，这是一个主工程，下面挂载了 3 个子工程，然后可以配置主工程的菜单。

![5db6782a2995c64301879d45869541c1.png][]

看一些正式的案例，比如幸福里的后台管理系统，我们公司的 toB 项目，火山引擎等。

![3c3e0bab5e5902898e2a50d1ed0cd7a7.png][]

运行过程也比较简单，当请求进来的时候，先是主应用，进入网关处理，获取 HTML。与此同时请求微前端 Server 获取“主子模块关系”和菜单等，获取后注入到 HTML，避免在浏览器多发一次 HTTP 请求，优化一下性能。返回到浏览器后，判断当前需要访问哪个子应用，获取即可。

![536d2b4e78381ffa54aaaf293027875f.png][]

功能实现了，稳定性这块也是非常重要的，这块我们也做了很多的工作，主要在监控运维方面。

![f0bbb664a131fce214e23099d0a98548.png][]

这块分为 3 个部分，第一部分是业务需要关注的，后面 2 个是我们系统维护者需要关注的。

![97fdc64d3e76e8aab7c36c6c338b0e97.png][]

用户可以在系统内进行一些简单的配置，比如 404、5xx、SSR 降级的 QPS 阈值，超过阈值后就会在飞书（打个广告，飞书体验&功能超赞）上收到报警通知，并提供了文档，帮助用户排查问题。

![dd1a1e4ba43d6b98eed790384d3365e8.png][]

另外我们提供了一个业务指标大盘，这里可以看到项目的 QPS，访问耗时，SSR 渲染耗时等数据。

![c65e00979636805368891cbdc0561f95.png][]

接下来介绍一下日志系统。

![805c62342848723dd98ee347fa55c84e.png][] ![549c55002266f59bc690361763c788ff.png][] ![9d14700f81e356532f7eeb54e5155c6a.png][]

为了帮助排查问题，和公司内部的日志系统打通，可以通过关键字查询，对日志进行聚类分析，也可以调查某次调用过程中整条链路上的日志。

![d2848538b7f23e68b4906d04d68fd045.png][]

最后对于服务的运行时监控和调试，我们也做了不少工作。

![8246bb3522d0fd2d1bb52575af05c3a7.png][] ![4747ac9be58164b90ab292f03d977ea4.png][] ![cf8a2a5d0540bce993a18a6ad59d8714.png][]

团队内做了一个类似 alinode 的产品，这里可以查看 Node 运行时的各种指标数据，比如内存、CPU、GC 情况等；此外如果通过日志排查问题比较困难，可以通过断点调试的方式进行调查；如果发现有内存泄漏或者性能问题，可以通过 Snapshot 或者 CPU Profile 进行分析。

![c02868c4af826bfacd5a60c57505e998.png][]

最后做一个简单的总结和展望。

![ea41add512ac6a1de7e20b191ec08878.png][]

对于 Serverless 方向，个人觉得将来会朝着 3 个方向去发展，第一个是 Runtime 部分，这块主要解决 FaaS 冷启问题，更好应对突发流量问题；第二是 FaaS + BaaS，更好的完善 Serverless 的生态；第三是 Serverless+，在 FaaS + BasS 的基础上，构建各种从框架 - 开发 - 部署 - 线上运行的应用视角的一站式研发平台。

![f792a5629834d6f3e8d6854873b710d0.png][]

最后我们来做一个总结，今天主要介绍了我们字节跳动是如何基于 Serverless 进行前端研发模式升级的，希望这次分享能够对大家有所帮助，在自己的业务场景中遇到了类似的问题，有所启发。非常感谢。

**如果觉得这篇文章还不错**

**点击下面卡片关注我**

**来个【分享、点赞、在看】三连支持一下吧![48cec767fa0237a1e916ec7a6af47f3e.png][]**

![401f2a83cd5d4d42d17762ae886027cf.png][]

**“分享、点赞、在看” 支持一波**

[edb336af2a7a54a41e98701676ff2af4.png]: /images/20221004/2c11df5c2f8c46a7b52ea5c0ad039c5c.png
[a2ccaf207ff08c7643d390ef866e0489.png]: /images/20221004/69248beb5e974182887f50427da2175c.png
[2f84a34e3b37a6f65c7740b906f82c6d.png]: /images/20221004/1325bd8a1675418db7b0e0640d869e01.png
[249d001b1b814c45582a6404fc1587f1.png]: /images/20221004/6e7f13089312402d81adcdbe5abcfd23.png
[b725dfe15f62b18fcdcb0aa34bbafaf1.png]: /images/20221004/bffce3c8f30f4c29bd367d705b1fe974.png
[a2c455d6bf6133026366845da2a7155b.png]: /images/20221004/d4547b5da0f345a38a0249e1a46224f1.png
[950d35dcf373287341617eb0023ad9a9.png]: /images/20221004/ef0db3a0888e481aa039d04388d5b2c5.png
[728b481edc8f3f519613448b076a4676.png]: /images/20221004/0a5bb049a6fe449cafda224045943e50.png
[6c8be9103f6397d51c4bc37a9bbfcc8a.png]: /images/20221004/d2bbab35d54740b3a695160e324f8c18.png
[b1b3da26973e5ef73d7943fb47f294f2.png]: /images/20221004/938e3ff1470248d7b58731ec1f049cb5.png
[13be7ece8be24720239eba2dc50b262b.png]: /images/20221004/98a784cd46644ee88befa0f136f2dfc2.png
[1890d5307e24b4af90bc777451e26f51.png]: /images/20221004/fd7eec7e09e045df9e518d7e2c53e8fd.png
[8e6f5331e2f3af52844c779bae899f9d.png]: /images/20221004/6fb1b82a50fc456ba879163ed1a9b9c2.png
[a0a44658c46f077b557c3f862da77de5.png]: /images/20221004/720d0e6ad7014b85a3a45d1b35a64183.png
[23ed52d86335cd741ddcff0cefdafb26.png]: /images/20221004/5d46e11a67e74bb69d626a75fa05c8f7.png
[ae9a5b80d5f67a8cd94917476a356617.png]: /images/20221004/5e6de9877ab14e8ea5dc365e98267de2.png
[45674cde5bf00b466f0a1fafee3ec986.png]: /images/20221004/3a908118cd3b405e860d75029d7737f7.png
[60d596e192e8ed57e81f8a88ba7207d6.png]: /images/20221004/5454af58a2e646d8911a5d31fbbb500d.png
[d987a5b04edadd7f82b718b07fb4184f.png]: /images/20221004/3ac047f99b794f0494dca7b443a19894.png
[f536c383758e845e00bb18be467cb843.png]: /images/20221004/2d9c4d099c55433eb8643263b47dd3d6.png
[18131c1111b36fcf430e81311ae919e6.png]: /images/20221004/b6076fbcdeff4c6ca4c66fa6bfa70d4c.png
[14e61137f91e94284e5f109c88b67c05.png]: /images/20221004/116f1bde1ff04e429d0fba3ec1e4a3c8.png
[0652665c7d3b8e606495bc284edce18f.png]: /images/20221004/02bb2e775f974b8db04cdc9e67c3c42e.png
[a10dd4b72f451414d773e7f95b1a8ac2.png]: /images/20221004/2689767f8a734a9b98231b5ba515f9c0.png
[921c7f1477343141dea24500301bbd32.png]: /images/20221004/b9632c041a464acaa39202ca69ca1a9a.png
[7cbe8e4f7038687415ab2302d3839049.png]: /images/20221004/011a259c918842d596a61fc6197cc074.png
[3f108c8c5ce0de8e4f9cbfde4931c1eb.png]: /images/20221004/a9a63e42cac241639d902eb9e9465788.png
[9bd2c7dc0c1a8e48e2832c79df10d8af.png]: /images/20221004/1868f1c4e9d746ea88158439c1fb679a.png
[657d07d81754a2e404a518c6c15b4e73.png]: /images/20221004/47468fb5e8a24c7b8d5e5070c8edc245.png
[0563653f535950c9b9dfa2cbb5d91392.png]: /images/20221004/a5bddb4488bd47abbda3680e997fe837.png
[afcf5ceca2f50964b439bf7df0470211.png]: /images/20221004/cc7370205d4b442983f11b0e815cf307.png
[7cf56a3ed3c804f927fe258aae3f357f.png]: /images/20221004/85fb2efc589c42a7a19ff4d8cae0a8b2.png
[2849cf9d9f2509307ae109ce033f5863.png]: /images/20221004/1ad8449e4ee24ae6afba875d64b68c81.png
[b96f2be6dc7ae6f046295b24c331e6ad.png]: /images/20221004/c8a3ff236b724801b4df7a6f20a063b4.png
[b12db04dba08448b90028ca5d1912ed1.png]: /images/20221004/ec2cf5ea3bc44d66bb424cc8c728641b.png
[0d1916dc61288adaa87dfcbd7c4ee505.png]: /images/20221004/6eb4f792464a4391b4d6258d6064200a.png
[771b620a2d4a36a22affcf65fe0c7318.png]: /images/20221004/6d60337a4af34323acd525f6ed56fbb1.png
[a5ba612c04c7471eacc72d7da12806fb.png]: /images/20221004/3fb343bc09fb493eb9753b7eb4a03eeb.png
[bd8fba4fb91c3f9b5010a66533e4bf87.png]: https://img-blog.csdnimg.cn/img_convert/bd8fba4fb91c3f9b5010a66533e4bf87.png
[a91f51743a97b38ae906a8c76d81a60c.png]: /images/20221004/70105c8a5b6149a2b1f1a8dced75c471.png
[5db6782a2995c64301879d45869541c1.png]: /images/20221004/805cfc5ffe354f4a9c0f494a7602c51a.png
[3c3e0bab5e5902898e2a50d1ed0cd7a7.png]: /images/20221004/4885eff5df3e4ca1a4136600c0c9d2eb.png
[536d2b4e78381ffa54aaaf293027875f.png]: /images/20221004/ba253ac1edab4dda8d764e06b7855a12.png
[f0bbb664a131fce214e23099d0a98548.png]: /images/20221004/b2f6d94942d142f6bdb466a26f43b23d.png
[97fdc64d3e76e8aab7c36c6c338b0e97.png]: /images/20221004/b6ca39951dd845629e332c81db408ba3.png
[dd1a1e4ba43d6b98eed790384d3365e8.png]: /images/20221004/410e24cab0ce47bb80b0733493228cce.png
[c65e00979636805368891cbdc0561f95.png]: /images/20221004/a3d483cb4c4543c6bbf0ea2e56475890.png
[805c62342848723dd98ee347fa55c84e.png]: https://img-blog.csdnimg.cn/img_convert/805c62342848723dd98ee347fa55c84e.png
[549c55002266f59bc690361763c788ff.png]: https://img-blog.csdnimg.cn/img_convert/549c55002266f59bc690361763c788ff.png
[9d14700f81e356532f7eeb54e5155c6a.png]: /images/20221004/e5f1022bbac14c1eac1ba0974b887c28.png
[d2848538b7f23e68b4906d04d68fd045.png]: /images/20221004/84f43673e129439c9ea256f144aed4fe.png
[8246bb3522d0fd2d1bb52575af05c3a7.png]: https://img-blog.csdnimg.cn/img_convert/8246bb3522d0fd2d1bb52575af05c3a7.png
[4747ac9be58164b90ab292f03d977ea4.png]: https://img-blog.csdnimg.cn/img_convert/4747ac9be58164b90ab292f03d977ea4.png
[cf8a2a5d0540bce993a18a6ad59d8714.png]: /images/20221004/0c819cc2ffa84612b29e0434f0e05cce.png
[c02868c4af826bfacd5a60c57505e998.png]: /images/20221004/3ff5b74577cd49d39c8ef54038a3d7cc.png
[ea41add512ac6a1de7e20b191ec08878.png]: /images/20221004/ebbfbd948b5c4fce9a5f72613a414e07.png
[f792a5629834d6f3e8d6854873b710d0.png]: /images/20221004/1b46ea2b6062427fa3d0051465286598.png
[48cec767fa0237a1e916ec7a6af47f3e.png]: /images/20221004/fe602efc71c84f60990922c375d99d1b.png
[401f2a83cd5d4d42d17762ae886027cf.png]: /images/20221004/be7c80a3790c4d0588a067c847afe9c0.png