60 分钟，现场开发交付小程序 + Web

前端早早聊大会，前端成长的新起点，与掘金联合举办。加微信 codingdreamer 进大会专属内推群，赢在新的起跑线。

第十四届|前端成长晋升专场，8-29 即将直播，9 位讲师(蚂蚁金服/税友等)，点我上车👉 (报名地址)：

正文如下

本文是前端早早聊的第 43 位讲师，也是第六届 - Serverless 专场，来自腾讯云开发 CloudBase 团队的赵兵的分享 - 讲稿简要整理版（完整版请看录播视频和 PPT）：

大家好，我是来自腾讯云开发 CloudBase 团队的赵兵，⽬前负责云开发 CloudBase 平台的基础能力和技术生态的建设工作。在加入云开发团队之前，我是一名前端开发者，现在是一名面向前端开发者的前端开发者。在整个前端经历里，我一直在追求前端的工程能力和效能提升，之前主要是在团队内推进组件化、工程化，Node.js 的 BFF 建设，前端同构 SSR 以及 Node.js 服务的容器化改造等。加入云开发平台做一名 CloudBase 平台的建设者，也是希望能帮助更多的前端开发者进行研发效能的提升。

今天我的分享是“如何 60 分钟交付小程序 + Web”。我会演示如何基于云开发 CloudBase 平台，开发一个包含小程序 + Web 网站 + Flutter 移动端 + 接口层 + 管理后台的全栈项目，让大家对云开发 CloudBase 平台的能力有一个直观的了解和认识。接着会带领大家深入了解云开发 CloudBase 平台，了解云开发如何做到让开发者快速开发和部署应用，无须关心运维，就可以获得高性能、质量稳定和安全的线上服务。最后会探讨前端工程师如何借助 Serverless 技术来构建自己团队的应用中台，实现自己的业务价值和技术价值。

Case Study

首先，我们来看看云开发能做什么，通过一些企业项目来快速了解企业和开发人员如何使用云开发。

深圳机场项目

第一个演示的是深圳机场的项目，大家有在深圳机场乘坐飞机的话，应该有使用过这个应用（可以使用微信扫描下面的小程序码来体验）。

整个深圳机场项目的应用层都是架构在云开发上，包含小程序和 Web 两部分，小程序端通过加密通信与云开发上部署的机场应用层进行通信。应用层主要包含云函数、微信云调用等，承载着脱敏，组装，监控，日志，运营逻辑以及与微信对接的业务逻辑。

借助云开发的 Serverless 框架，省去了传统的服务器购买和运维，可以直接进入开发，节省运维人力。通过使用云开发内置的日志系统、获取用户登录态、手机号等多种原生微信云调用能力，帮助业务大幅提升开发效率，以获取登录态、获取手机号功能为例，能从 1 天缩短到 5 分钟。日志系统无需自己搭建拿来即用，节省了至少 5 天人日。Web 端则通过云开发的 JS SDK 连接应用层，进行各项业务的管理。

幻灯片3.png

央行 “钱袋子保卫战” 项目

第二个演示的项目是央行的钱袋子保卫战小游戏（大家也可以扫描小程序码来体验）。开发团队使用云开发的云函数轻松实现游戏“炮塔攻击怪物”、"宝典"等游戏逻辑的搭建，在客户端侧，利用云开发的实时数据库，对用户游戏阶段进行实时的存储和同步。同时，借助完善的监控分析、统计分析等能力，让开发团队可以随时根据小游戏数据情及时调整业务。实时数据库是云开发提供的开箱即用的数据库的实时同步能力，客户端可监听数据集合的变更来实现很多时效性很高的业务，例如游戏、聊天、下发通知等等。

幻灯片4.png

Show Me The Code

接下来我们正式进入第一个环节，演示如何基于云开发快速搭建 Serverless 应用，我们会开发一个 HackerNews 的全栈 demo，会用云开发来开发应用后端，使用 Taro + Flutter 来开发前端。

幻灯片6.png

源代码下载

这个 Hacker News 示例应用的源码也已经在 Github 开源

项目地址： github.com/binggg/tcb-…

大家可以把项目下载到本地，然后安装一个 VSCode 的 CodeTour 插件，可以按照下面图中的交互式效果，一步步地通过代码旅行的方式，带领大家了解如何渐进式地开发一个多端全栈应用。

搭建小程序

这一步我们完成了微信小程序前端界面的样式和基本的交互，接下来我们需要为页面增加数据拉取的逻辑。

使用云开发开发后端

新建数据库集合 hackernews
开发 HackerNews API 云函数，代码如下图所示
一键部署上线
- @cloudbase/cli 工具 docs.cloudbase.net/cli/intro.h…
- VS code 插件 docs.cloudbase.net/vscode/intr…
- 微信开发者工具

幻灯片8.png

几行代码实现订阅消息

我们刚才演示是一个比较简单的后端拉取数据的场景，还可以用几行代码就可以在云函数内实现很多很强大的功能。比如下面的例子里，我们只需要几行代码就可以实现发送微信订阅消息的功能，而传统的云服务实现整个功能非常麻烦，不仅需要关心服务器的搭建和运维，还需要处理鉴权，缓存等等逻辑。

幻灯片9.png

云开发在小程序场景下都可以用这种简单的免鉴权的方式无缝使用小程序的开放能力，基于云函数免鉴权使用微信开放接口的能力，称之为云调用

服务端调用
开放数据，例如获取运动步数、手机号，这种来自于客户端的开放数据
消息推送

服务端调用是云调用中目前开发者使用最多的能力，例如订阅消息、数据分析、OCR识别等，按照业务角度划分目前有 14 类 60 多个 API 可供开发者使用。

近期云调用重磅支持了微信支付能力，开发者无须关注证书、签名逻辑，仅需几行代码就可以实现微信支付的服务端逻辑。

幻灯片10.png

云开发不仅可以和微信无缝结合，跟腾讯云上的其他产品也可以无缝集合。例如我们可以在云开发中通过安装扩展的方式，可以开箱即用地使用腾讯云上的很多功能，包括像图像处理、图形水印、盲水印、发送短信等等。

在使用这些腾讯云的能力时，我们也可以像下图所示几行代码可以直接在云函数内免鉴权调用。

幻灯片11.png

支持 Web 访问

接下我们会把前面的小程序一键支持 Web 访问。前端界面上我们就不用额外开发了，因为 Taro 本身是一个跨端的框架，它的界面的部分是可以编译成 h5 这种模式。

我们唯一需要做的改动就是将调用云开发的方式进行适配即可, 具体的适配代码如下面的截图所示

这里我们引入了云开发的 JSSDK github.com/TencentClou…。在 Web 端我们需要登录才能调用云函数。这里的话为了演示方便，我们用了匿名登录的方式。云开发支持很多登录方式，我们可以打开腾讯云的控制台，在登录授权里面可以看到有微信公众号、微信开放平台、匿名登录以及比较开放的自定义登录方式。

幻灯片12.png

Flutter 移动应用

如果想基于目前的后端能力开发一个 Flutter 应用，该如何做呢？我们只需要调用 flutter create 来创建项目，然后引入云开发的 Flutter SDK 即可，在项目中引入。具体可以参考下面的示例代码和 Demo 代码。

幻灯片13.png

一键安装一个 CMS 扩展

接下来会演示一个不用开发代码的能力，基于我们的扩展能力，这种可以一键安装一个 CMS 系统，来管理我们刚刚搭建的应用。

幻灯片14.png

我们在云开发的后台的扩展管理界面，可以一键部署这样一个 CMS 内容管理系统，具体的安装教程可以参考官方文档： cloud.tencent.com/document/pr…。

下面是 CMS 扩展的工作原理，扩展的本质是应用逻辑加上云函数、云数据库、云存储等等云资源，可以理解成一种微全栈的应用的编排方式。

一键部署 CMS 之后，我们就可以基于这套系统来管理我们整个应用的数据了，不需要额外的开发工作，并且提供了管理员/运营者的鉴权方式。

演示代码项目总结

总结一下，我们用了短短的半个小时，演示了如何开发一个具有 **小程序 + Web 网站 + Flutter 移动端 + 接口层 + 管理后台 **的全栈项目。我们在这个过程中学习使用了云开发的云函数、云存储、云数据库、扩展能力、身份登录和云调用等能力，只需要很少的代码量，就实现了具备很多比较强大的功能的全栈应用，比如多端调用，支持微信云调用，支持管理平台等等。

幻灯片15.png

Dive In Deep

前面的演示让大家对云开发 CloudBase 平台的能力有一个直观的了解和认识，接下来着会带领大家深入了解云开发 CloudBase 平台，了解云开发如何做到让 50 万开发者快速开发和部署应用，无须关心运维，就可以获得高性能、质量稳定和安全的线上服务。

幻灯片16.png

什么是云开发

云开发是 Serverless 概念的核心实践，云开发（CloudBase）平台采用了 Serverless 架构，提供云函数、云数据库、云存储等基础资源服务。免环境搭建，免运维，同时提供静态托管、命令行工具（CLI）、 VS Code 插件，Flutter SDK 等能力，极大降低应用开发门槛，助力快速构建小程序、Web 应用和 App。

幻灯片17.png

云开发整体产品架构

云开发的整体产品架构如图所示，在底层基础能力之上，云开发还提供了云开发的各种后端服务能力和扩展能力，同时提供了多端的 SDK 产品和开发工具，方便多端应用接入云开发。

幻灯片18.png

云开发基础能力

云开发在 FaaS 层面提供了云函数这种在云端运行的代码环境，开发者可以非常简单的去编写后端逻辑和后端接口，同时具备弹性伸缩的能力。在 BaaS 提供了Serverless 化的数据库和存储，大家可以在前后端方便的去读写用云数据库、上传和管理文件，前端加速访问资源等。云开发的基础能力很好地解决了应用开发的基本问题。

幻灯片19.png

云开发工程能力

云开发平台是如何做到让 50 万开发者快速开发和部署应用，无须关心运维和扩容问题就可以获得高性能、质量稳定和安全的线上服务呢？仅仅通过解决应用开发基本能力是不够的，主要得益于云开发平台的工程能力建设。

云开发工程能力的建设工作主要包括以下几个方面：

效率
质量
安全
多端的建设

幻灯片20.png

工程能力之效率

在效率方面对比传统服务器开发，云开发无须关心服务器，同时提供了开箱即用的各种能力，很多场景前端工程师都可以闭环，带来了研发人力和沟通成本的大大降低。

幻灯片21.png
幻灯片22.png

比如在身份体系方面，内置支持了微信登录等身份系统，不用做额外的开发就可以获取统一的身份信息，省去了很多重复低效的开发工作。

幻灯片23.png

工程能力之质量

在提供了这些高效的开发方式之外，我们还要考虑很重要的一点，就是我们的应用如何从 Demo 变成生产环境的应用？这里还要还要考虑性能和质量的问题，怎么样在开发者免运维不关心服务器的情况下去保证我们应用的性能的质量？

资源和性能的保证

首先是资源和性能的保证方面**，云开发可以提供了一个很大的资源池，在业务流量洪峰时可以秒级自动扩容，保障业务的高可用。例如在云函数方面，云开发目前为开发者提供单个云函数 1000 并发的能力支持，假设云函数的执行时间为 50ms，单个云函数可以达到 20000 QPS，这已经可以满足大部分用户场景的需求了， 50 个云函数的总 QPS 将可以达到 100 万 QPS。而这个过程中开发者无须担心机器问题，资源会自动按照请求量进行伸缩，开发者也无须为闲置的资源付费。

截止目前，云开发的日调用次数已经超过 7 亿次。
幻灯片24.png
幻灯片25.png

云开发数据平面的技术架构和优化

接下来我们会深入了解一下云开发数据平面的技术架构和优化，从图中可以看到用户的一次服务调用需经过多个中间层服务，最终到达客户资源层，云开发服务的高可用高性能从大的层面上可分为 “数据链路” 和 “底层资源” 两个方面。目前，云开发系统 “数据链路” 和 “底层资源” 均超过 99.99% 以上的可用性。

数据链路为用户提供端侧和云资源侧的连通能力，数据链路也并不仅仅进行数据转发和传输，还包括一系列的处理逻辑，如微信登录鉴权、票据生成与校验、数据编解码、云账户身份鉴权、集群路由、云资源信息绑定、安全规则、数据签名与校验、上下文环境信息注入、访问记数、并发控制等多方面的能力支持模块。

幻灯片26.png
云函数的可用性和性能优化

云函数在执行性能方面，也做了非常多的优化。熟悉云开发的开发者应该了解，函数在一次调用中会涉及到函数的启动，启动又可以分为冷启动和热启动，热启动是非常快速的，而冷启动则相对较慢。

冷启动的过程如图所示，对比可以看出，冷启动需要创建函数实例，创建过程又包含多个子任务，如下载函数代码、部署函数等，通常需要几百毫秒的耗时。

目前函数侧做了很多的优化：

优化代码下载耗时，在虚拟机内和可用区内建立多级缓存，提升下载云函数代码包下载速度；
优化函数网络部署策略，降低部署耗时；
优化容器启动，降低启动时间；
基于用户请求量变化趋势和周期性的请求量变化规律，对云函数并发量进行准实时预测，提前进行扩缩容量；
支持版本别名，用户更新代码，以 Rolling Update 方式进行新旧版本替换，保证热启动率；
优化函数实例预留时间，保证整体的低冷启动率。
云函数底层也采用了腾讯云自研的轻量级虚拟化技术，MicroVm 启动时间缩短至 90 毫秒，函数冷启动减低至 200 毫秒，并且支持上万台计算节点同时扩容；

目前，经过函数底架构上和性能上的不断优化，部署云函数实例的各阶段耗时也在不断减少，进而云函数的冷启动时间不断降低。为客户提供更高的可用性和性能支持。

幻灯片27.png
云数据库的高可用优化

从架构图中可以看到，云数据库接入层进行了分层设计并支持水平横向扩容，所有用户请求会被分配到不同的主机上，每个主机都独立的维护用户数据库连接，这种方式保证了数据库接入层能够大规模进行水平扩展。另外，在部署上也进行了多集群的策略部署，集群内部能够自动发现故障主机并剔除。不同用户分配到不同的接入集群，用户请求可在多集群上进行灵活调度，以应对可能出现的服务故障，提供更高的可用性和更短的恢复时间。

在发布策略上也能做到更加可靠，按集群进行进行灰度，影响范围小。
数据库引擎实例也均进行了跨主机的多数据库实例的部署，在单数据库实例故障时能够进行自动化的转移。
数据为每个数据实例进行每日的全量备份并保存到对象存储中，以保证用户数据安全，当用户数据出现问题时，可进行数据回档，也间接的为用户提供了一定的业务可用性支持。
数据底层也将支持在线热迁移，在出现主机负载过较高时，自动在线热迁移用户实例到负载低的主机，此过程用户几乎是无感知的。热迁移同时也能够支持全局的数据库主机间的负载均衡。
数据库目前也已经提供自动加索引能力，自动化的分析用户慢查询请求并针对性的进行自动索引优化，能够在用户无感知的情况下优化用户查询性能，使开发者可以更少的关心数据库性能优化就可以有优良的性能体验，降低客户负担，更加专注于自身的业务逻辑。

幻灯片28.png

工程能力之安全

幻灯片29.png

云开发侧对于资源的安全访问做了很多的工作

微信的私有协议传输，通过票据认证来保证链路的安全
函数，数据库，存储都支持安全规则，可以精细化配置资源的访问权限
对于 Web 场景，提供了 Web 安全域名机制防止跨域请求，同时配合安全规则和身份认证保证资源安全
在移动应用场景，通过移动安全来源（比如 SDK 会获取应用的包名）来确保安全调用
对于通过 HTTP 协议访问函数服务的场景（例如回调、页面渲染），也支持访问的调用鉴权

幻灯片30.png
幻灯片31.png

工程能力之多端

最后，云开发内置支持了微信小程序、 QQ 小程序、 Web、 Flutter、 C# 等多种客户端的 SDK，也提供了 Node.js、 PHP/ Java 等服务端 SDK，社区还提供了大量的 SDK , 完整的列表可以查看 www.cloudbase.net/sdk.html 页面。无缝打通了端应用和云服务，调用云服务变得像本地一样自然和简单，大大降低开发者开发多端、跨端应用的成本。

幻灯片32.png

Serverless ❤️ Frontend

最后聊聊 Serverleess 为前端带来的变化，我认为 Serverless 和 Frontend 非常契合，Serverless 让前端工程师的职责范围有了更大的可能性。

幻灯片33.png

前端发展史

从前端的发展历史来说起，让我们回到前端的史前时期，也可以叫做切图仔时期，这个时候前端同学主要负责视图层的逻辑，其他的渲染、 HTTP API、业务逻辑都由后端同学负责。

幻灯片34.png

然后进入到前端的工程化时代，这个时代开始非常关注前端的性能优化，页面的渲染工作逐渐交给前端同学负责，前后端逐渐地开始分离。

幻灯片35.png

接着， Node 的出现让一部分前端同学开始承担 BFF 接入层的开发，逐渐开始负责一些创新项目的全栈开发，对外提供 HTTP API 。

幻灯片36.png

职能变化带来的机遇和挑战

随着职能的变化，带来了机遇，也带来了新的挑战，如何保障服务的高可用、高性能、质量稳定性？对于前端同学来说，这是一个全新的领域，从浏览器端到服务器端，很多新的领域知识需要去了解和学习，那么是否一定要具备了大量的服务器端知识才能开始服务端业务的开发呢？

幻灯片37.png

Serverless 的应用中台解决方案

Serverless 为前端开发同学提供了一种新的解决方案，通过 Serverless 这种架构，底层平台层承担了基础架构的工作，许多底层技术和能力逐渐下沉，开发者不再需要上层关注基础设施的运维和扩缩容等问题。前端同学通过强大的底层架构，可以快速实现业务的开发，帮助业务实现快速实现业务价值。

除了业务价值的实现，前端同学在这一轮变革中还可以收获到新的技术价值，比如将一部分通用业务能力进行下沉，通过 Serverless 架构进行编排和交付，使企业和团队可以复用这些全栈能力，逐渐完善企业和团队的应用开发能力，逐渐沉淀出企业和团队自己的应用中台。

幻灯片38.png

总结

本次的分享通过演示如何快速开发一个包含小程序 + Web 网站 + Flutter 移动端 + 接口层 + 管理后台的全栈项目，让大家对云开发平台的能力有一个直观的了解和认识。

然后带领大家了解了云开发是什么，为什么云开发是 Serverless 的核心实践，云开发如何做到让开发者快速开发和部署应用，无须关心运维，就可以获得高性能、质量稳定和安全的线上服务。

最后探讨了前端工程师如何借助 Serverless 技术来构建自己团队的应用中台，实现自己的业务价值和技术价值。

幻灯片39.png

最后，希望对云开发 CloudBase 有兴趣的同学可以关注云开发的社交平台账号和官方网站来进进行进一步的交流。

我个人的知乎： www.zhihu.com/people/bing…
云开发官网： cloudbase.net/
云开发 Github： github.com/TencentClou…
云开发公众号：见下图二维码

幻灯片40.png

本文使用 mdnice 排版