前端搞 Serverless | 俊杰 - 如何借助 Serverless 从前端走向全栈

前端早早聊大会-与掘金联合举办-全年学习

一、讲师介绍

来自腾讯云 sls 团队，Serverless 技术专家，十余年互联网研发经验，负责 Tencent Serverless 技术在全栈应用开发的方案设计工作。主要研究 Serverless 与传统开发语言及开发框架相结合、Serverless 全栈应用开发模式、传统业务 Serverless 上云方法实践，Cloud Native App 的 Serverless 开发方法。

二、开场白

大家好，非常开心，能够参加前端早早聊大会，就像刚才 Scott 说的一样，听了两场下来，感觉我们的大会真的是非常的干，非常多的技术细节，我的演讲跟前两位讲师的分享可能都不太一样，会比较湿，希望能让大家稍微的轻松一下。

首先自我介绍下：我大概在互联网行业从事有 10 多年的研发经验了，现在在腾讯 Serverless 团队负责全栈应用开发的技术工作。之前也在百度做过一段时间的研发和技术经理，不知道在场的听众有没有之前我团队里的同学，可以在微信里说一下。这张照片是我非常喜欢的，因为它背后的是什么？是第一台电子计算机 ENIAC，当时很有幸能跟它进行一个合影。今天我的演讲的主题是《如何借助 Serverless 从前端走向全栈》，主要目的是想给大家解决一些问题。

三、Serverless 三个问题

首先，大家做前端都知道：

• 现在前端的知识、框架架构太多了，我已经学不动了，Serverless 又是一个新出来的东西，要不要投入时间去学，怎么来决定这个问题？
• 其实我们要搞清楚我们现在说的 Serverless 跟前端到底有什么关系？跟我现在做的工作到底有什么关系？换句话说是不是能够支持未来的技术和职业的发展？
• 当然 Serverless 是不是未来也是需要去讨论的东西，你们天天说这个东西是不是未来？

除了这三个问题，我相信所有接触 Serverless 的同学都还有另外一个最大的问题：Serverless 是什么？我们会听到很多人都在说：我们都在做 Serverless，但是感觉每次听着每一个人讲的又不是这么的一样，那 Serverless 到底是什么？

四、分享目录

今天我也想给大家解决这个问题，演讲分为五个部分：

• 第一部分讲一讲前端走向全栈的过程。
• 第二部分我希望大家能够从前端这个领域跳出来，所以说第二部分是讲云计算。
• 第三部分是一个最简单的 use case，现在大家都知道 SSR 很火对吧，那么如果一个 Serverless 在这儿需要怎么做？需要几步？大家可以猜一下。
• 第四部分讲关于 Serverless 的框架，给大家做一个简单的介绍。
• 最后部分总结全栈 Serverless 的一个开发的技术栈。

五、从前端，走到全栈

希望今天我的演讲能给大家一个跳出来这样的一个视角，从历史的角度来看看，Serverless 在现在这个时代出现，它到底是意味着什么？从整个软件或者互联网研发流程，跳出前端来看，Serverless 又是一个什么样的位置？这大概是一些比较宏观的部分，在后面的专题是由我们团队陈涛带来实操的部分。

这个是北大保安三问：前端是谁？从哪里来？到哪里去？

Web 之父

首先给大家看一个人物，在座的小伙伴如果有听过我的演讲的，应该知道这个人是谁。为什么要放他呢？因为咱们讲咱们的行业，首先还要拜一拜祖师爷对吧？他生活的时代我们叫做 Web1.0。

他最大的贡献就是发明了 Web，可以说没有 Web 何来 Web 前端，这个人是 Tim Berners-Lee，他在 2016 年获得了图灵奖，获奖原因就是他发明了 Web。什么时候发明的呢？在 1989 年的时候发明，那个时候它只是有 Web 的 idea，之前大家访问互联网的方式都非常奇怪，直到 World Wide Web 发明了以后，大家才会用 HTTP 方式来访问我们的网站。在 1993 ～ 1999 年是一个萌芽期，这个时候已经有雏形了，HTML 语言 4.0 的发布是在 1999 年，同年中国百度搜索引擎也成立了。

还记得我的第一个个人网站，纯粹是通过记事本写 HTML 的这种写法，个人网站也没有 IDE，我也不会用。应该是在 2000 年的时候做的第一个网站。网站叫做绿色幻想，因为当时还是一个 17 岁的青葱少年，所以说名字也很轻松，但是现在想想这个颜色好像不太对，这是题外话。2004 年的时候，我们知道有一个技术 Ajax 的兴起，然后迎来了 Web2.0 的时代。10 年以后，HTML5 发布开启了一个移动的 Web 时代。2015 年 Alex 第一次提出了 PWA 的概念，因为当时的 Web 和 Native App 的体验差距，已经到了阶段性的情况。2017 年，所有主流浏览器支持了，2017 年一个新形态的前端应用微信小程序也上线了，这就是一个前端简史。但是在这个过程中，其实有很大的声音一直在说一个事儿：Web 将死。

Web 将死？

Web 将死绝对不是在移动时代才说的话，在 Windows 时期，早就有很多讨论说 Web 不是最好的，没有用，一定要做 Native。

整个的过程出现了很多次。在 2001 年，当时有一个叫做 Windows XP 操作系统，大家应该知道这个操作系统它跟之前的 Windows 98 和 Windows 2000 来讲，是一个很大的改善，包括一些间接性的菜单和一些动画都支持了，大家会认为这种 Native 的体验也到了一个提升。当时还发布了一个划时代的东西，叫做 IE6.0。

可能你们会觉得这个东西是一个非常老古董的东西，但是在当时做 Web 的人心里，这是一个非常划时代的东西，为什么？因为你的 HTML 怎么写和有什么错误它都可以解析和执行，但这个后来就变成了很多人诟病的一个东西。所以说微软就干了一件事儿，微软认为 Web 肯定要死了，就解散了 IE6 的团队只留下维护人员去，扩大了它的 Visual Studio 的产品团队。

但在 2004 年 Gmail 发布了，Gmail 是通过 Google 证明了一个事情就是基于 Ajax 的 Web2.0 能有和桌面版一样的体验。大家现在感觉这种异步 Web 是个很正常的事情，但那个时候是一个非常非常震惊的东西。在 2008 年，Chrome 又发布了，因为谷歌意识到，如果要是想提升到 Web 的体验，必须要从渲染层面，我觉得在前端一定要关注底层东西。同年微软为了补救它在 2001 年做出的错误决定，发布了一个叫 IE 8.0，IE8.0 依然是很多前端同学的噩梦。

后来，PWA 的概念提出了，这个时候可能就有一种更增强的技术来让 Web SPA 能够和原生网站能有一样的体验或者更好。但目前看起来好像在国内并没有得到一个很大的发展。2017 年离我们就很近了，微信张小龙发布了微信小程序，它其实是一个有 Web 开发的方式，来获得 Native 的用户体验的方式，但是这里边为什么只有红色的部分被我挑出来了？

因为在 2001 ～ 2008 年，我第一次找前端的工作是 2009 年，因为那个时候根本没有一个职位叫做 Web 前端，你搜不到 Web 前端工程师，你只能搜到 Web 工程师，为什么？因为在传统的 Web 开发里，一个 Web 工程师他本来就是要负责前端展现，所有的 Sh 或者说是一些后端的这种逻辑、数据处理，甚至还要会数据库技术 CRUD，所以那个时候大家只有 Web 工程师，但一般我都会去学一门后端语言、一门前端语言和一门数据库，然后再会一点什么 Apache、Linux 和 Nginx 就可以用 LAMP 这个架构干活了。

但因为 Web2.0 技术的出现，它把很多工作从后端每次和服务器要交互的这种状态，变成了在前端数据处理，其实也是放在前端页面重绘。以前都没有这些东西，也放到了前端，所以说那个时候就催生了一个新的工程师，叫做 Web 前端工程师，叫 FE，即 FrontEnd。

FrontEnd

这其实就是前端工程师的由来。前端工程师在由来的过程中，它是来解决分工细化的问题，但是分工细化有的时候带来效率提升，但是有的时候并不是这样。为什么？

大家可以看到现在前端的发展是非常迅猛的，前端的一些组件化 MVVM 的这种框架，包括一些脚手架或者是工程化的工具，发展得非常好。

但很多时候跟后端去协作，就会发生不愿意发生的问题。可能很多的团队都有过，因为团队之间的隔阂、或者一些接口约定又或者是因为人员的不靠谱，很多的事情会造成一些很大程度上由于沟通和协作成本而加持让业务的效率降低，而且工作也很不爽。

FullStack Developement

所以说，Web 工程师在分化为前端工程师的时候，非常想说既然之前在做这种事情，现在能不能再回到全栈工程师的这样一个角色？这就是为什么谈 Serverless 会帮助前端工程师到全栈工程师这样的一个背景。讲了一下前端的简单的发展历史，但是这里边大家会看到一个红色的文字是什么呢？Backend。今天的讲话就因为今天是前端的场次，大家会觉得 Serverless 是前端的，但是从我们的角度来讲，思维不是前端的，因为 Serverless 从出生的第一天起，它就没有说是为了前端技术而出生的，只是说 Serverless 在现在前后端分工的场景下，可能会对前端的收益会更大一些。现在在我们这边用 Serverless 的很大一部分其实是后端工程师，因为现在的前端构建也不是这么的麻烦。这么多的脚手架、组件化和 UI 框架，搭一个 UI 也很方便。所以说以后谁抓住了这种风口，谁就有可能会成为这种 FullStack Developement。

我们传统意义上的全栈这个词已经很老了，讲了好多年了。其实这就是我刚才说的最早的那种 Web 工程师的概念，到会前端技术、会后端技术和会一门数据库，就可以做一个全栈工程师。但实际上是这样吗？其实远远不是。这就是我为什么要跟让大家跳出来看这样的一个问题。你把前端的事解决了，把数据的事解决了，把业务逻辑的事解决了，但是在这底层有很多的东西其实是你还没有解决的，你可以说这些东西咱也不想碰对吧？因为有很多东西大家刚才也说了是运维方面的一些东西，但是有些东西也不一定是运维方面的东西，比如说业务上的这种监控，包括一些可扩展性，包括成本的规划，有很多时候我们所说的这种前端，全栈它还是集中在一个对业务逻辑完全 Cover 的这样一个层面。所以目前来讲，这种情况下是肯定达不到这种全栈的效果的。

六、What is Serverless，Why Serverless

我希望从云计算的角度再跟大家讲一讲 Serverless，把 Serverless 的根给它挖出来，看一看到底什么东西才是真正的记忆，就是大家所说的最原始的 Serverless。

算力、算法和数据

讲到这里又提到了三个东西，如果大家是计算机专业毕业的，大家其实对这三个东西应该会很熟悉。第一个算力，算力是什么？算力就是代表你当前计算机有多强的计算能力，包括 CPU 的主频、核心数、指令集 GPU 或 CPU 什么的。算法是你的计算方法，是从问题到求解的这个过程，这里边可以是回归，也可以是其他的方式。数据是什么？数据是在你一定的程度上，能够获得到总体的大数据的集合。举一个很简单的例子：为什么之前 IBM 深蓝打不过人，但是 AlphaGo 却能打过人在围棋上，它其实就是一个算力、算法和数据。从整体上来讲，它其实是一个提升，从以前的这种减值的算法到现在这种机器学习的算法，云计算要解决的是什么问题呢？

云计算

我们来看一下云计算最经典的一个发展历程，经历了大概是 4 个阶段。

第一阶段裸金属。裸金属是说从最底层的那台机器开始，包括上层的虚拟化操作系统容器运行时，你都要去解决。大家觉得买一台机器就已经解决这些问题了吗？不是，这个叫 1 级，0 级是什么？0 级是你要开始建机房，机房有多难建，机房要防火，要有水要有电，整个的过程可能都是需要一个企业来承担。

第二阶段 IaaS。IaaS 其实是云厂商去建一个大的这样的机房，一个计算中心，你需要多少这种主机的配置，我通过虚拟化的方式提供给你，然后你需要多少来买多少就可以了。

第三阶段 PaaS。PaaS 是你觉得你虚拟机还不够，因为虚拟机你还要自己运维自己的操作系统，还要去
运维自己的各种运行环境，我觉得很麻烦，这样的话 PaaS 就出来了。它直接给你提供运行环境力度的这样一个支持，你只用管你自己的业务和应用这样一个方式。

第四阶段 Serverless。也就是大家所说的这种 FaaS，它是连应用这一层我都可以帮你解决，大家记住这一句话：应用这一层我都可以帮你解决。怎么解决的下面我会说，你只用关注到自己的业务，什么叫自己的业务？Function 和 Services 是你自己的业务，所以随着云计算的发展，对于我们来讲，其实是对于这个产业来讲，它是投入，因为客户的投入越来越少，研发的成本会越来越低。

所以说 FaaS 到底是一个啥？函数计算 Lambda、Cloud、Function 这些东西它到底是个啥？大家可以看到为什么讲刚才的几代云计算的发展，云计算发展是个啥？云计算发展归根结底它就是一个给你分配算力力度的发展。最早的时候你去买裸机器，对不起，这台机器物理就这么多，给你了你想我是切一半用，比较麻烦对吧？你要是想扩展算力，你再买一台物理机。虚拟机是什么呢？算力把 CPU 的内核，把这些内存切分好，按照你的需求给你，但是我给你的是一台整个的机器，你 CPU 有忙时有闲时，我不管我卖给你几核，这就是你要给我付的费用，按照核心的东西来付费。

到容器时代。你不用管这个核有多少了，你不用管这个内存是多少，我按你的应用收费，你起一个多少应用，我就收你多少费用，粒度进一步降低。到函数这个时候，你有多少个函数，你函数执行了多少次，我就按给你计费，我就按这个收你的钱。

所以说云计算的整个的发展过程，云计算要解决的就是一个算力，合理分配的问题。整个云计算的发展就是一个算力分配方式的变化。

Serverless 可以看到从过去的 5 年在 Google Trends 上面，是一个非常迅猛的发展。Serverless 是什么时候提出的呢？Serverless 最早的时候，其实在 2006 年就提出了一个叫做配 “pay as you go“ 的这样的一个概念，这个概念不光是 Serverless 的，而是整个云计算的。云计算就是你需要的计算资源，能像你家的电你家的水一样打开就能来，想用多少就用多少，用了多少就付多少，这就是云计算最根本的一个概念。

2012 年，Iron.io 提出了一个 Serverless 的概念，但这个 Serverless 和现在的 Serverless 完全不是一个东西。这是一家公司，它开发了一个叫做 Ironworker 的一个东西，这是一个基于容器的分布式按需工作平台，它其实是发布了这样一个产品，而真正意义上大家认为的 Serverless 的起源是以 2014 年在发布了一个叫 Lambda 的这样一个产品，Lambda 在前两年的时候很孤独，大家看不清这个东西到底是啥。

在 2016 年的时候，Azure、GCP、IBM 都发布了自己的产品，然后在 2017 年的时候，国内的两家云厂商也发布了自己对应的函数计算的产品。由此可以看到，基本上来讲国内的产品比国外的 Lambda 的话慢了三年？所以我们有一个趋势的推断，就是在国内的应用，很大程度上可能也会慢一些，但是可能到不了三年的这样一个情况。到 2018 年就是刚才今天的第一位讲师说的小程序微信云开发，用 Serverless 的方式，支持了微信小程序的开发。2019 年 Serverless Framework 发布了，这个是 Serverless 一个整体的发展情况。

The Berkeley View on the Serverless

我们要寻根去看一看 Serverless 它到底是一个啥？听了我演讲的人知道我又要讲这篇论文了，为什么？因为这个论文的分量真的是太重了。云计算白皮书 The Berkeley View on the Serverless Computing。有谁知道它的姐妹篇呢这篇文章？这篇文章的姐妹篇叫做 A Berkeley View on Cloud Computing，Berkeley 的视角去看云计算。

这篇文章发布在什么时候？发布在 2009 年，国内的两家云计算厂商，头部两家运营商厂商成立之前 Berkeley 大学加州大学 Berkeley 分校发布了这样的一篇文章，大家可以去搜一下这篇论文，这篇论文几乎预测了从 2009 年到 2019 年整个云计算市场的发展状况。然后在 2019 年的时候，他们又写了一篇文章，云计算白皮书 A Berkeley View on Serverless Computing。这里边做了一个广告，大家可以看到右下角的一个网址，china.serverlessdays.io 这个是在 6 月 19 号中国国内第一届 Serverless 大会，我们邀请了很多国内国际的 Serverless 专家，包括 BBC、谷歌、腾讯，So It’s Computing。这里边做了一个广告，大家可以看到右下角的一个网址，china.serverlessdays.io 这个是在 6 月 19 号中国国内第一届 Serverless 大会，我们邀请了很多国内国际的 Serverless 专家，包括 BBC、谷歌、腾讯，Austen Collins，Austen Collins 是 Serverless.com 的 CEO，他也会参加这个会议，这篇文章讲了什么呢？

这篇文章在他们的最摘要的部分，大家都知道你的摘要其实是要非常概括的高度去讲你这一篇论文讲了什么，他摘要里面有这样一句话，也是一段英文，咱也不读了，翻译成中文，大概就是这个意思：

Serverless Computing

Serverless Computing 无服务器计算，几乎封装了所有底层资源的管理和系统运维的工作，使开发者能够更容易的使用云设施，这句话很难懂，然后他举了一个例子，它提供了一个方式，极大的简化了基于云服务的编程，犹如汇编语言到高级编程语言般的转换。我估计听咱们直播的肯定有很多计算机的这种专业的学生对吧？你可能没用过汇编语言？你不是搞单片机的，但是你肯定学过会汇编语言，你知道汇编语言是什么？汇编语言他要直接的去操作 CPU 的指令，操作内存的地址，操作每一个接口，这是什么？这是计算机体系结构的底层，对吧？高级语言操作是什么？高级语音操作的是数据类型，是对象，是方法、属性，一些高度抽象化的东西，你还会管语言，在机器上到底是怎么样去执行的，当然一些底层的研发他会管，但大部分的业务研发不会管这样的一个事情。所以说无服务器计算 Serverless Computing 就相当于你之前基于所有云做的事情，你要了解云有三个产品，这个是提供了 Web 服务器服务的，那个是提供数据库服务的，这些东西都相当于是底层的资源，你都不需要关注，你需要关注什么？你需要关注说我的业务中有多少的用户，有多少的页面，有多少的流程，要去管理这些东西。 这就是 Serverless Computing 给大家带来的好处。

简而言之这不算是一个定义，一个最基本的理解，也就解释为什么像刚才说了两个议题，还有之后的三个议题，大家肯定是说会有那个问题，为什么大家都在讲 Serverless，但是我看着它就是不一样，是因为 Serverless 它是对底层资源的封装和操作，让开发者更专注于业务逻辑，如果在这个过程中你会觉得很爽，我天天就只要关注我的业务，其他什么都不用管了，其他什么我一会说有哪些东西你不用管，那些东西就是一个 Serverless 的方式。

但如果说，举个例子我用了一个云函数，但是我用了云函数以后，我发现我好像还是有很多的这种底下的东西需要我去管，只是说我原来是自己起了一个 Nginx 现在是用的 API 网关，我之前自己搭了一个 Node.js 现在是用的云函数，只有这点区别，你不叫 Serverless，你一定要看你的这种新的模式有没有让你更加的去专注业务逻辑。

刚才说了有哪些事情呢？之前我们介绍过一种方式，就是叫前端工程师的到全栈，大家还记得说我们关注业务逻辑，那个时候相当于你只关注业务逻辑了以后，你就有了左边这个东西，我们叫一个 ProtoType 或者是叫一个 Demo，一个原型。但它不是一个产品，为什么？因为从一个 Demo 到一个产品化中间，还有很多的事情要做，哪些事情呢？

• 第一个，用户界面交互功能、业务功能，展现交互和业务逻辑。
• 第二个我们叫做产品化，什么叫产品化？

这个是功能有了，但是你现在要做的是什么？你的速度是不是符合预期？你的可靠性行不行？会不会用户一多就挂了？你的安全性好不好？别老是出那种不好的事情对吧？泄密、用户隐私之类的，扩展性行不行？有些人 CPU 很好，但是一发现大量用户来了以后，发现我们的系统没法水平扩展，这就悲剧了。最后就是一些跟运维相关的东西，你的容量够不够，你的业务监控有没有，你的报警有没有？这些东西都是需要去考虑的问题。

对于前端工程师来讲，或者是对于现在大部分的业务研发的工程师来讲，做头一点事情是完全没有问题的。我们的界面，我们的业务逻辑，我们的交互这些东西都没有问题。

但在光鲜的 ProtoType 后面后台的架构来讲是非常复杂的。

界面/交互/业务逻辑

架构解决哪些问题？你的架构是不是可调试？你的架构是不是可重用？你的架构是不是安全？你的架构能不能扩展？你的架构是不是易于理解，易于接手，你的架构是不是可靠，有没有很好的稳定性，能不能做到 5 个角？你的性能怎么样？这些东西都是要靠架构来解决，这是一个物理架构。大家可以想一下，如果你去上线一个产品，要让你从零开始做，你光去搭载，是这样的一个很比如说有负载均衡，有攻防，然后还有一些 Session 服务器有些云数据库有一些缓存集群，这种事情你觉得一一个人可以做完吗？我觉得是非常不可行的。

这个是一个逻辑架构。从逻辑上来讲，我们有基础设施，有虚拟机，网络负载均衡安全，是吧？还有一些资源，还有一些调度，对吧？然后还有一些用户的认证，权鉴，还有一些接入层，还有一些 DevOps 刚才也说了对吧？我们的工程化研发流程怎么考虑？另外还有一点别忘了我们的可观察性，什么叫可观察性呢？你的日志、你的监控、你的告警，这些东西都是命，所有东西都需要你去架构来解决的。

产品化

所以说当你能做到前端功能、后端功能和数据库以后，你要想一想，你的产品化这一块，怎么样才能搞定？

运维

最后一个运维，运维就举一个最极端的例子，扩容。我知道很多研发同学可能会跟着运维同学一起扩容，但是问题是扩容最难的不是扩容那件事情，对吧？不是加机器这件事，是你不知道什么时候加机器机这件事器要申请预算。申请预算还要上架，上架完了以后可能很多的时候你也不知道有流量的高峰什么时候来。原来陌陌开发的一个换脸的视频，给一个视频换脸的一发布，当天晚上就火了，然后就挂了，为什么？就是因为扩容能力对吧？扩容其实是一个非常怎么讲有技术含量的一个事情。还有什么？

你的成本。我刚才说了，这个可能是业务负责人需要去关注的对吧？我们的流量非常小，但是我们每天有一个最高峰的时候，比如说我们发优惠券了，可能每天中午大家吃饭前都来抢优惠券去买外卖，这个业务它可能每天中午就会有一个陡峰，你怎么办？你这时候必须要按照最高规格的这种流量去配置机器，其他的时间你就浪费了。

所以说在 Serverless 的这种体系下，它的计费是完全按照你使用量来计费，你函数执行了多少次，中午执行了 10000 次，晚上执行了 200 次，那一天可能是按照 10200 次这种收费，而不会按照整个虚拟机的这种方式来收费。 上面左图其实大家可以看到这个图黄色部分就是如果你买了一台虚拟机的话，你的费用它是一条水平的线，永远是这么多。但如果您用的是 Serverless 这种按需付费的方式的话，你的费用其实是在你的业务最高峰的时候付费最多。

最后一个事情关于运维，大家觉得上云怎么样？上云可能很多的企业都在慢慢的去上云，我们要上云，但是上云的话其实是一件非常复杂的事情，首先你现在上云你怎么的，你是用主机还是 Kubernetes 对吧？你至少要去学习这些东西，或者请对应的人来帮你搞定这些事情，这个事情真的是太复杂了。

所以说对于业务运维方面的话，从一个 Demo 到一个产品化的东西，一个全栈工程师是绝对搞不定这些事情的，所以说在我们又回到了这张图上来讲，大家看到的全栈工程师还是说我要负责核心业务逻辑的这样的一个事情，越往上跳出来，从行业的角度看，对一个公司的价值最高。因为他天天在做业务，对吧？天天是为了用户服务，为了流量服务，为了业务服务，并不是说底层的东西不重要，而是说为了服务你那点业务，为了服务你的用户，为了服务你的流量，你要花费大量的精力去做底层的事情，知道吧？

所以说最底下的这种事情越往底下，它对于能力的要求可能会更高，对于上层的话，他可以对于业务的价值会更大。大家一定要会看懂这个三角形，Serverless 要干的事情是什么呢？Serverless 要干的事情说白了就是把底下这部分帮你干了，底下所有的 Serverless 帮你解决了，解决的是什么？解决的不是给你提供一个函数，说我原来是在 Node.js 里边写的业务是吧？写 BFF 现在我用函数写了我就 Serverless 了。不是，一定要看你底下的这些东西，是不是所有的东西都已经不用你去关注了，如果你不关注了，那你就是 Serverless 化了。

Serverless 的三个比喻，这个是很多聊 Serverless 的一些感受，我给他汇总了一下。

• 第一个比喻是 Berkeley 的那篇文章里写的，从汇编语言到高级语言，这个我能理解它，对，但是说实话我也没写过汇编。我学过汇编，但我没写过汇编，所以我对他的感受没有那么深。但是第二个第三个我是写过的，所以说我对它的感受是非常深的。第二个东西现在估计大家做前端对这东西不了解。MFC 是干嘛的？我介绍一下这个背景。大家都知道一开始学 C 语言对吧？C 语言最早，然后是 C++。 如果你想写一个 Windows 应用程序带窗口的，你需要干嘛？你要写一个 Win Main 对吧？Win Main 然后完了以后，你会调用很多的这种 Windows API 然后那都是 API 去画这些窗口，去画这些按钮，会去监听这些事件。所有的东西都在跟操作系统的底层打交道，其实直接调用 Windows 的 API 明白吧？MFC 这个东西其实说另外一个东西你就知道它叫 Visual Studio C++ 6.0。怎么讲？它其实就是微软提供的一套标准的类库，Microsoft Foundation，Fundamental Classes，你就通过类库，你就可以直接在你的界面上拖拽你的窗口，拖拽你的按钮，点右键给这个按钮添加事件，然后编写这个事件的代码，听起来是不是特别像现代化的这种编程？之前我在零几年的时候小小做过一段时间 Windows 编程，这个东西对我的感受就是非常大太方便了，我完全不需要管 Windows 有多少 API，我只要手边有一本 MFC 的这种手册，我就可以完全的去做我想做的事情。
• 第二个比喻是 Java，现在还是很流行，最好的语言之一了是吧？但是 Java 刚出现的时候，大家对它的感知其实怎么讲怎么形容。我大概是 2001 ～ 2002 年的时候用的 JDK1.3 的时候，因为之前的话我们做网站的时候，做动态网站的时候，要用 VB 去写 ASP，或者是用 Perl 去写 CGI，CGI 是很老的一种东西，但是 Java 出现了以后，你会觉得它那些流式的这种操作，它的那些面向对象的这种特性，你会觉得它简直就帮你封装了很多系统底层的这种东西，让你直接去管理你那些东西。但是我知道有的同学可能会说 Java 最大的特点是这个 Write Once In Anywhere，但是我是觉得它对我最大的感受是说我用这个 Java 的话，它提供了太多的类库，太多的这种方法不需要我去做底层的管理。所以说现在的 Serverless 对于现在这种感觉，我其实印象最深其实还是 MFC 和 Java 这两个，我觉得其实和那个时候是非常的像。

七、前端搭一个 Serverless SSR 需要几步？

关于 Serverless 的介绍我介绍完了，接下来的时间我们来聊点跟我们业务相关的，这是一个问题。前端搭一个 Serverless SSR 需要几步？大家手头有电脑的话可以去百度上搜一下，你会觉得可能很多步对吧？但是实际上如果我们回到刚才的图。你去关注业务逻辑，Serverless 帮你解决其他事情的时候，用这种模式去思考的时候，搭建一个前端需要几步？

第一步你需要有一个 SSR 的框架，比如说 Next.js 如果这个框架你都没有的话，你就不用说了，因为你标题都俩词：Serverless 和 SSR，你首先得有 SSR 那就是 Next.js。第二步您得有一个 Serverless。第三步是什么？第三步就是把你的业务放在 Serverless 的上面，听起来很简单对吗？但实际上做起来是一个什么样子呢？给大家用 PPT 的方式稍微演示一下。

第一步

我们先做第一步，你首先得有一个 SSR 的这种框架，创建一个目录，然后用 npm init next-app 的这种方式，好了，然后我就开始执行了，下载各种资源：依赖库的安装，然后看红框里头就是我刚才写的那部分命令。我安装了 Next SSR 然后完了以后一会他这个地方弄完了，告诉我已经安装成功了。

第二步

你需要有个 Serverless 框架，刚才说了，以全局的方式 npm install serverless，然后又开始装。

第三步

最关键的那一步，搞清楚这一步，你大概就知道 Serverless Framework 到底是怎么样工作的，我们怎么把 Next.js 装到 Serverless Framework 的框架里，我们配置一个 Serverless.yaml，它是一个 YAML 格式的这样一个文件，这个文件看起来很长，我就让大家看三个地方。第一个地方，你需要指明你用的是哪一个 Component 一个组件这个词，组件用的是要 Next.js 组件，然后底下你要给个 name，这两个是必填的，你总得有个名字，下面几个可以不用管。第二步，Input src 大家会记住我刚才这个命令建的其实是在 src 底下对吧？装到这里是 Next.js。所以说第二步的话我会指定我的代码图片，我的 functionName 就是我说的云函数的名字你需要跟自己起一个，region 所有的云计算你都要选择一个，因为这个东西还是逃脱不了物理特性的，当然是 region 你可以不写，他会给你默认找一个区。runtime 是 node.js@10.15，写完以后最后 environment 这个是一个非常重要的东西。因为我们平时在开发的时候，我们也在维护多套环境，有测试环境，有联调环境，有线上环境，可能还有预发布环境对吧？environment 就是说我当前的 Next.js 需要装到哪一个环境里面，对于云来说别忘了它的资源是可以无限扩展的，所以说你的环境可以任意制定，但是你最好有一个管理对吧？你自己知道哪些是测试环境，哪些研发环境，因为你申请了很多的资源肯定还是有费用的。就这一个 YAML 一个描述性的文件，就把你的 Next.js 界面装到了 Serverless Framework 里面去。

接下来 npm run build 和我们进行一个静态文件的编译，然后进行 sls，这个 sls 是 Serverless 的缩写，你写的Serverless 也是一样的。sls deploy 然后完了以后至少会出现一个神奇的状况，在你控制台里面会有一个二维码，二维码是干什么的，因为你至少要告诉我，我至少跟你申请资源对吗？我需要帮你把这个东西部署到云端，对吗？你至少告诉我你是谁吧，这时候掏出你的微信 scan 一下，这时候 scan 完了以后，直接的会发现，看到 url 已经部署到腾讯云上去了，就把 Next.js 装到这个框架里了。

然后就得到了一个你的 Next.js 最初始的这样一个部署。你说我的业务可能比你这个复杂的多，但是我现在给你演示的是一个最基本的思路，你的业务比我多，可能是因为你的最后的代码量会多，但是整体的思路是不会变。完成了。完成了吗？

没有。为什么？部署完了以后怎么办？我以后还得开发，我还得去下一步的维护，我还要知道我这个程序运行的怎么样？在 Serverless.cloud.tencent.com 直接可以管理你的 Serverless 应用。就会看到你这里边所有列表，点开以后你会发现你的应用在这里边。

八、关于 Serverless 框架，你需要了解的

这个就是一个搭建 Serverless SSR 的方式，我讲这个东西其实还是为了给大家一个认知，Serverless 没有这么复杂，如果你听到一个 Serverless 说我给你 20 步告诉你怎么做一个 Serverless，那肯定不是 Serverless，因为它不符合 Serverless 的本质，没有让你更少的去关注东西，如果你会发现你用了 Serverless 以后，我要关注的东西更少了，我的工作效率更高了，我再也不用加班了，你可能做的是一个真的 Serverless，不然的话你可能要想一想我是不是遇到了一个假的 Serverless？接下来讲一下，Serverless 的框架，你需要了解简单的过一下。

首先用不用框架，这是一个问题，这个问题现在已经不是问题了。

因为在我们前端圈子里面，用不用框架已经不是一个问题，大家天天都能有框架，我不相信你现在没有用框架，有很多的优势。

如果不用框架的话，对于一些上云的企业是一个什么样的状态呢？有很多的业务 RESTful API、BFF、Website。甚至我很多的业务，可能需要使用很多的云上的服务，跳出来想一想，你手底下有三个团队，每一个团队都在用云，但是每一个团队用的云都不一样，是一个什么样的概念？成本特别高没有办法复用，出了问题调人调不了代码动不了。这就是没有框架的坏处。

我们需要一个什么样的框架？对于 Serverless 的框架，我个人是这样预想的，这一块是我们的框架，它至少要包括两个部分。

• 第一部分它要对下层是标准化的，尽量的跟云服务无关，需要我的代码能够写一份就让在 run 在 AWS，或者是腾讯和阿里云上面去，第一个它要朝着这个方向去发展。
• 第二个部分需要有一个组件化的方式，因为前端的同学对组件化从来不会陌生，我们天天都在用组件化的方式去开发，为什么？业务内复用、产品间复用，人员之间随意调配，社区的支持文档什么都是特别完善的这样的一个状况，所以说一个 Serverless 的一个框架，我认为它至少要有两个方面。第一个是它要是一个标准化的框架，第二个它是要是一个组件化的开发方式。所以说 Serverless Framework 的设计思路就是这样子，它首先针对不同的云厂商提供了开发、调试、部署和监控的这种接口，接下来我会演示它在腾讯云上是怎么样去实现的。

然后在上层它对每一个业务都会有一个组件的这样一个概念。一会我要讲组件，组件是这个框架里面一个核心的
概念，如果说你理解了什么叫这个框架的组件，你就理解了这个框架是怎么玩的。

Serverless 组件

什么是 Serverless 组件。Serverless 组件，它是一个基于 npm 标准的模块，这是第一句话。第二句话，它基于 YAML 文件进行配置。第三句话是最重要的，对云服务的资源进行使用和配置。所有的 Serverless 都在干同一件事情，不管他用的组件机制还有什么，其他机制是图形界面的还是 CLI 界面的，都在干这一件事情。它帮你申请云资源。可以看到我们的 COS 是腾讯这边叫对象存储，它会有一个最简单的配置。它用的资源叫 myBucket 第一个存储桶，这个是一个 Express，Express 它需要用到什么？它需要用到 API 网关去做 Web Service 代替 Web Server 是吧？它需要用到云函数提供计算资源，它需要用到数据库去存储数据，所以说它这边就有很多的对他云上资源使用的一个描述，这就是组件机制。

对于组件的开发，Serverless Framework 采用的是云端的一个方式，这是它的一个开发流程。

• 首先你需要对它组件进行代码的标准化的代码编写，刚才说了它其实也是基于 npm 标准的这样一个东西你会写 npm package，你就应该会写组件。
• 第二个要描述它，比方说我组件到底是使用了云端的哪一些资源，然后测试及发布就可以了。最后其他的开发者也可以享用你开发的组件。目前在 Serverless Framework 下面的话，基本上常用的组件都已经支持了。

九、全栈 Serverless 开发的技术栈

刚才我是演示了 Next.js，如果你对 Koa/Express 感兴趣，甚至对 Next.js 感兴趣，你都可以用相同的方式把你的组件、业务和框架装到 Serverless Framework 里面。这样做开发者只用关注自己的业务，第二个 100% 的是基于云端的开发，本地的环境差异就没有了。然后还支持多种语言，Node.js 只是 Serverless 支持的语言之一，还有大量的后端的开发者用 Python 或 PHP，它们也可以用同样的方法去构建后端服务，并且很轻松的用其他的工具完成前端的一些开发。所以 Serverless 不属于某一种特定的人群。Serverless 刚才已经演示了，然后还有一个 Dashboard，我跟大家简单的演示一下。

大家看到这个是一个什么呢？这就是一个 Serverless Framework 在我们腾讯云落地的一个界面，现在拿出我的微信扫一扫，我扫了以后大家可以看到我就已经登录到我的控制台里边了，这里的组件在逐渐的增加，如果我现在选一个 Express 开始部署，我就得到了一个我自己的 Express 服务，它干了什么？我刚才已经讲过了。Next.js 怎么装到 Serverless Framework 里边 123，它做的事情是一样的，接下来你把这个项目代码直接拷贝下载到本地，用你的 Serverless Framework 直接在本地开发，npm run deploy 可以直接把你的代码就 Deploy 到线上。大家可以看到现在这时候已经可以出来了很多的可观察性的东西，你的所有请求都会在这个地方显示出来。这里大概会有一个几十秒到一分钟的延时，刚才刷了几次，出现了几次错误，然后正确的请求是几次？在这里都会有一些显示，一个错误是 Get favicon.ico，这个没有找到，因为我没有部署这样的一个东西。这就是一个 Deploy 这样的一个版本，所以说对于这个框架的使用两个方式，一个是 CLI 的方式，一个是 Dashboard 方式完全一模一样的。

最后讲一下我理解的 Serverless 开发技术栈就结束，非常短。一个全栈的开发，如果 Serverless 帮我们解决了底下所有工作的话，我们其实只要关注到我们自己的业务，这个东西就可以了。比如说我的一个 Full Stack，我用 Express 去搭了一个 RESTfull API 对吧？搭一个 API 的服务，用 Website 部署我的所有静态资源，用 PostgreSQL 实现我的数据库，这就是用 Serverless 的方式去搭建你的一个 Serverless Full Stack 这样一个方式。每一个这里边的东西都可以用我刚才说的那种方式去实现部署。

所以总结起来，如果你全部基于 Serverless 去搭建一个 Full Stack Application 的话，其实你的技术栈是有 4 个：

• 第一个对于所有静态文件来讲，你需要去了解一下 Serverless Website。这个东西是把所有静态文件，不管你是 Vue，React 还是其他类型的静态文件就编译成 HTML、JS、CSS 的都可以用这个东西来解决。
• 第二个是 Serverless HTTP, 所有的 Web Service & API 这种层面的东西，你都可以用 Serverless HTTP 来解决，像刚才写的那些 Express、koa 和 Egg.js 都是属于这个范畴。
• 第三个技术栈是 Serverless Database 数据。包括一些 SQL or NoSQL 的数据库都可以在这个层面来解决。
• 最后就是 Serverless Back-ends，比如说其他的微服务，你自己写的微服务？包括一些其他的比如说人工智能的 API 这种东西，你要用其他的数据接口来实现的。这些东西都可以通过一些 Serverless 的框架或者平台，因为今天我讲的是一个 Serverless 的框架，我们之前第一个同学还有后面的同学可能还会有其他的这种框架和平台，然后来把你的这种技术栈去部署到我们的云端。

最后给大家一些学习的资源，包括 Serverless Framework 的一些官网，还有一个 Serverless Cloud，也就是Serverless 中文的技术社区。还有就是我们的 Github 的地址就是 github.com/serverless。还有一个刚才写的控制台，大家感兴趣的话，也可以直接去访问自己去尝试，大家可以把这块截图保存。然后还有一个就是硬广一下一个社区的广告，就是 ServerlessDays 这个社区第一次来到中国，在 6 月 19 号同样会有一个 Online 的这样的一个会议，大家可以去注册。然后右边是我们 Tencent Serverless 对这一次和大家交流的一个群，大家如果感兴趣的话，可以扫描二维码加入到我们的群里面，我相信大家可能会有一些体验的需求或者一些问题，然后我和小伙伴们都会在这个群里边，然后等待着大家，然后给大家一一的来解答。

十、总结

这就是今天的演讲的部分，讲了很多的这种关于从整个前端的历史来看，Serverless 给前端带来了什么？从云计算的角度上来讲呢，Serverless 又是什么样的一个东西？我希望说目前看起来 Serverless 最大的收益在前端，为什么？就像前两位同学也讲到，Serverless 它帮你把底层的东西全部都给封装了，上面的业务逻辑还是要自己去写。那么所以说在这种角度上来讲，谁现在负责对最大的业务逻辑，谁的收益就最大。但是不同意一种观点就是说之前在知乎上跟别人交流，别人说 Serverless 来了，前端什么都干了，以后后端会不会失业？

我说你先想想你自己会不会失业，开个玩笑。为什么？因为之前说了 Serverless 它是一个云计算的，它是一个算力的分配的东西，谁抓住了这个趋势，未来就是谁的。Serverless Framework 的用户群中有一部分很大部分是前端的开发者，但是后端开发者的比例也是非常的大。其实大家都在做一件事情就是：需要尽快的去丰富业务逻辑，所以说我也希望 Serverless 能够帮助我们的前端的小伙伴们前端到全栈赢得更大的职业发展。

谢谢大家！！

别忘了点下方送稻谷