Serverless 的前端开发探索

  • 1
    关注“腾讯产业互联网学堂”公众号加群互动有好礼相送
  • 2
    向学习君回复口令 “SF”
  • 3
    获得课程福利包
腾讯产业互联网学堂微信公众号
“腾讯产业互联网学堂”微信公众号

讲师简介

陈涛

Serverless Framework 社区专家

参与 Serverless 社区及开源的相关研发工作。拥有丰富前端、JavaScript 技术经验,以及网站及小程序等项目开发经验,腾讯云 Serverless 系列课程特约讲师。

简介

Serverless 的前端开发探索,详细介绍Serverless 是什么?Serverless 前端变革,Serverless 前景与机会以及部署支持数据库操作的全栈网站。

讲义

  1. Serverless 是什么?
  2. Serverless 前端变革
  3. Serverless 前景与机会
  4. 部署支持数据库操作的全栈网站

1、Serverless 是什么?

我们在讲Serverless是什么之前,首先我们要先去讲解到这几个比较重要的一个架构。

那么第一个架 构其实就是我们的单体架构,它只是最原始的站点的架构模式,比方说我们用一个单一的VPS做我们的服务的一个业务支撑,那么这个就是我们的单体架构。

其次的话还有还有一个是我们SOA架构,SOA在我们现在的企业中用的也是比较多的,它其实是我们通常比较常用的一个架构,就是通过各个服务模块将我们比较复杂的业务做一些业务拆分治理的工作,这个就是我们的SOA架构。

第四是我们的容器架构,就是相当于是我们更好SOA的一个载体,他其实是对于底层计算的革新,但是还是会比较强依赖自身运维的一个能力,因为我们在用容器架构的同时应该会同时需要一个类似于这样的容器编排就是我们的CPIS这样的一个容器编排的一个工具,或者是我们运维的那种工具,我们要对节点做一些管理等等。

那么serverless架构其实它是在容器架构之上的,因为他分装了所有的底层资源的管理还有包括我们的系统运维的工作,它可以使我们的开发者更容易的使用我们零基础的一个设施,这个其实就是我们的serverless架构。

总结一下其实serverless架构其实就是封装了的所有的底层资源,他其实是略高于容器架构的一种计算形式。下面的话会有一些SOA的一些企业架构的一些介绍,这边的话是最原始SOA,我们可以看到就是他其实是有一个什么管理机构这样的一个东西去承接我们的服务,这个的话就是我们可以把S的一个边编排,它有一个Master node的一个节点,还有包括很多的Worker的节点来去做容器,去做业务编排这件事情。

这块其实就是我们现在的一个重点就是serverless架构,serverless application是由两部分构成的,第一部分就是我们的Serverless Compute Engine ,就是我们的底层,Serverless 的底层其实在业内看来的话是Docker居多,当然还有基于MVM的,但是Docker的话,可能比方说会有一些类似于开源的东西,那么其实Serverless他其实并不指的是我们的Baas这一块儿,那他其实还有一个比较重要的一个点就是在我们的baas,我们baas其实他是有类似于我们的API网关,我们的COS,我们CMQ,我们的Ckafka,我们的CDB等等一系列的一些Baas资源,那么serverless这个概念其实它是等于我们的serverless 加上我们Baas,就相当于是类似于我们的Serverless Compute Engine 再加上我们的SF服务,类似于一条网关,因为这个可能也是我们后面可能会用到的比较多的资源,那这个其实就是我们的Serverless 架构的一个常见的一个形态。

  1. Serverless 前端变革

我们了解完Serverless 是什么?我们再来看一下Serverless 在前端他到底可以做哪些事情?首先我我们想去了解一个东西就是 一个真正的全栈应用,我从底层开始搭的一个全栈应用,他到底是覆盖了几层或者是他者需要去关注那些东西, 这个经济塔图的话它就可以完全帮助我们去理解的什么是我们的正儿八经的全栈应用,全栈应用下面他到底会包括哪些东西?那么最底层的其实就是类似于我们的我刚刚所说的k8s, 最底层的那种的容器品牌工具,还有一个System Security,还有包括我们的一些回滚,还有包括我们的一些ES,我们的网络安全等等一系列,这个其实是我们在我们金字塔底层我们比较常关注或者是我们比较关心的一些底层资源,那么中间的还有一部分其实就类似于我们的什么

Es我们的一个LB,还有包括我们的logo我们的日志的一些管理等等一系列的一些东西来去支撑到我们的底层做一些运维。那么除了在这在这个基础之上还有包括我们的DB,我们的数据库,就是我们比较经常关心的类似于我们的DB数据库,Framework框架,还有包括我们文件存储以及我们的CDN,这些其实是作为一个全栈应用的稍下的一些资源的一些扩充,然后最后才是我们正而八经的一个比较核心的一个开发工作, 所以我们的前端开发其实应该是在我们金字塔顶部,那么其实有没有考虑过这个问题就是我写代码我其实没有必要去关心我底层应该是怎么样的、有没有一个东西可以让我更加专注的去写代码?不用关心我的DB是什么、我们的容器编排到底是什么或者说我们回滚我们完全是怎样?那么这个答案其实是有的,其实就是我们的Serverless ,所以说我们的Serverless 在前端技术的变革其实就是让开发者无需关心我们核心代码以下的底层的所有的资源,我们Serverless 为他者去提供一个只需专注于自己有开发的一个完整的一个类似于操系统或者是类似于部署平台,那么Serverless 开发模式下,其实里面其实就特别简单就比方说我们应用层应该是我们比较常用的应该是我们API,我们的BFF,我们SSR这样的一个东西,那么应用层的话这块的话是我们需要去自己去构建是要自己写的,那么云服务的话其实呃就是包括API,SSR我们的容器,那么这里面的开发模式其实就是研发团队只需要去关注应用层以上的东西,还有包括一些云服务的一些对接,而无需去关注比较底层的类似于容器编排这样的事情,所以我们在上面图中我们其实可以看到其实研发团队他其实还有一个工作是什么?他还有一个工作其实就是呃连接应用层和云服务之间的东西这个东西怎么连接呢其实就引出了我们的下一个问题

我们到底要不要做框架?我们的框架我们会想要去做这种框架或者是我们怎样去用这个框架?

那么Serverless其实就是帮助我们去解决了框架的这样一个事情,其实是分两块的内容,第一块其实是类似于我们的组件化的一个开发。第二块内容就是我们标准化的相对于云厂商的一些框架的一些支持,所以其实Serverless Framework它的优势其实就是底下的话可以做一些类似于标准化的集成,比方说我底下我可能有N个云产商,然后对这些资源去做一个标准化的一个框架集成,那么对上的话其实就是做了一些组件化开发类似于我们今天可能会讲到的一个DB的工具,它其实就是对我们DB的组件化的一个分装,那么其实组件化的意义就是为了一个东西就是为了可复用,它可以提高我们的复用率来去减少重复开发还有包括我们人员技术站的一些分工,还包括招聘一系列的一些乱七八糟的一些东西,这个其实就是对于开发者来讲组件化的意义,那么标准化的话这块就可以简单他是向下去统一的云厂商的一些标准,使我们业务可以在多留之间去做一些平滑的迁移包括我们的部署,所以我们其实可以在上一个PPT中也可以看到其实Serverless Framework它其实是一个标准化组件化的Serverless 应用开发产品,所以他用这样的组件化和标准化这两个事情去帮助我们衔接了我们上面的应用层以及我们下面的云服务,所以Serverless Framework这个事情其实就是替代了我们第一块所提供的就是说传统的Serverless 开发模式下研发团队他所去做的一个对接工作。这样的话其实对于前端来讲,它其实是更加方便于我们去做一些大的应用,那么其实我们可以看到它其实就是Serverless Framework它其实也是由几块构成,第一块其实是Serverless应用生命周期的一个管理,就是我们的CLI还有我们即将上线的Dashboard,这块的话其实它是有一些类似于服务部署,查看,回滚以及我们调试我们的日志以及我们的DevOps的一些支持,那么Serverless应用的话其实它就是包括了两个部分,包括我们标准化的一个框架还有我们组件化开发,那么Serverless资源这块的话其实它是可以无缝对接到腾讯云的一些Serverless资源,比方说我们刚刚推出的类似于TSQL等一些产品,以及我们可能在后面去对接的一些类似于LB这样的一些Serverless 资源的一些产品,其实这些就是Serverless资源,那么所以想给大家表明的一个立场就是无服务计算Serverless Computing其实几乎分装了所有的底层资源包括我们系统运维的一个工作,它可以使我们的开发者尤其是我们前端开发者更加容易的使用我们的云基础设施,Serverless其实提供一个方式,简化了基于云资源的编程比方说这是从汇编语言到高级语言的转换,Serverless其实就是一个底层初中资源的一个概念。然后它下面可能会有两层,第一层是我们的发型,这块的话狭义的讲就是我们的SOA,还有我们的Baas,这块来讲就是我们所用到的一些周边的云资源,类似于我们的SQL,类似于我们的COS这种云资源的一些集合。

  1. Serverless 前景与机会

我们上面我们只是简单去讲了一下都是在前端的变革,我们接下来看一下就是在前端的前景还有他的机会到底有哪些?首先的话给大家看到一个我们的一个案例,它其实是IVWEB团队在Serverless的一个业务逻辑和业务的一个逻辑,然后这块的话它其实是完全去接入了SF的一个同构环境,然后他是通过一些NTW接入层它包括一些Apigateway网关去做了一些数据库的一些操作,那么这样的话其实可以针对团队来说的话它其实是对免运维,全量日制,多维度统计还有包括API都可以去打通我们的工作流程,来进行我们的业务上线, 那么这块的话维护工作量其实至少是降低了80%,但是这份工作其实我理解这份工作其实我们可以不用关注于它的底层的一些东西,我们只需要去关注于它跨的一个业务逻辑,然后去做一些业务返回,那么当然还有我们的那种直播在B端运营的一些东西,他其实是用Serverless去做了一些创建,删除,上传,回滚的一些操作,那么这样的话它是提高了迭代效率并且可以实现按需取用,用完即走,分离部署,更细致更细粒度的对我们的业务逻辑做更细粒度的一个拆分。那这块儿的话其实有同学可能会提出一个异义就是我们我们用Docker就是也可以做这样的事情但是我们的Docker其实是没有Serverless更高效的,因为我们Docker可能还会去维护容器,还要关心底层资源比方说你的cpu是够用,你的并发量是不是够,那么Serverless的话这块的话其实是完全不用他者去关心这些事情的,他是有一些类似于弹性或松,还有包括我们的并发量的一些设置的一些性质,还有包括我们的一些安全,我们系统安全网络安全我们磁盘安全等等一系列的一些工作,对我们的底层资源做了一个封装,那么这个是我们不完全统计下Serverless的组件化的一些东西,当然有我们的Express.js,React,Vue.js等等一系列的一些操作,那这种组建的话对于开发者来说是非常友好的,因为我们可以只用关注应用代码然后去运行VS就可以实现我们的部署和开发

那么我给大家总结一下就是Serverless Framework所做的事情,它其实是做这样子的东西

第一个是降低了我们的代码的一个编写难度,因为它的代码且有很多都是可以重复的,其次是统一的规范,它统一云厂商的一个框架的一个架构规范。它对上的话其实是做了一些组件化分装,来方便开发者更好去使用Serverless Frameworke的一个资源;第三是降低了门槛还有我们的操作的一个难度,去部署一个很少的一个命令就可以实现我们的整个网站,我们整个前端的一些类似于APP或者是我们静态网站的一些部署;第四是专注于业务的一个逻辑规范,专注于业务的逻辑就比方说我之前给大家所去设置的金字塔图,假如我们不用Serverless那其实这些其实都是需要开发者去重点关注的,尤其是信用安全,网络安全那块东西,其实它的运维工作会特别的繁重;第五其实就是一些社区的优势,因为他是开源的,所以假如有一天我不满足某个社区,其实开发者可以完全自己去写一个自己的社区,去实现自己的业务逻辑,那么第六其实就是业务的维护,刚刚也给大家有讲到就是Serverless架构其实他是类似于免运维的一个操作,还可以帮助前端开发者基本上几秒钟的时间就可以构建出一个自己的应用,那么最后就是提高我们的效率,因为我们无需去关注底层,所以这块的话其实我们部署起应用来是特别方便并且简易的,那这块的话其实就是一些类似于概念的东西。

  1. 部署支持数据库操作的全栈网站

这块的话和我一块儿来去操作一下我们的这个最佳实践,那么这次这段时间的话给大家去介绍一下如何去部署一个支持数据库操作的一个全栈网站。

这块的话它的步骤其实特别简单,HEXO其实特别简单其实就三步。

第一步其实就是安装我们的Serverless;

第二步就是配置我们的YML;

第三步就可以部署到我们的腾讯云.

我们来看一下这个全栈网站的运用他到底是怎样的,这块的话其实是有一个仓库它确实是依赖我们的三个东西,第一个东西其实是Serverless的API,它通过元素和API网关去构建一个express的一个框架,去实现restful API的一个操作;其次是静态网站的一个构件部分,那么这块的话我们使用的是Vue系统,然后这块儿Serverlesst 的一个组件,通过托管Vue.js静态文件到对象存储来去实现我们这个网站的一个呈现;第三个部分就是我们Serverless Postgresql 然后这块的话就是依赖我们刚刚发布的一个Postgresql的Componment,那么最后的话其实是Serverless的一个VPC的一个操作,然后这块的话其实是为了统一数据库,还有包括元素就是我们在一个API里面去做一些更改还有包括我们的数据同步以及我们的安全的一些东西,那么这里给他分一点就是我们现在的Postgresql 它只能通过API进去访问,所以说我们应该是必须要拥有就或者是我们必须要去使用我们的VPC才能去做这样的一个构建。

那这里的话我给大家就开始简单演示一下,这个仓库的话我看到已经发到我们频道里面了,然后

我先给他去简单去咱讲解一下里面它有什么东西,首先是我们的一个API, 然后这块儿的API其实是有一些创建删除的一些操作,他其实是对我们的Postgresql去做的一些东西,那么其次的话它它还有一个是我们的DB的一些东西,这里可能会用到一些参数的存储和添加,最后的话就是我们静态的一个部分,这块是我们的一些静态的一些组件。

我们简单过了一下其实这里面其实啊特别简单,我一会儿部署完之后给大家去讲一下,然后部署的时候的话,可以参考一下这里面的文档,然后我们可能要先去安装一个Serverless的一个框架。 这个的话其实我已经安装过了,然后我跟他去演示一下,

当然我们的API其实是必须的,我们需要下载Serverless 的一个东西。

这里假如果大家之前有安装过的话,我还是建议大家去重新安装一下,因为最近是更新了一个版本。

整个构建过程可能会比较长,然后我看到聊天室里面有人说这个数据库是付费的吗?这个数据库其实是免费的,具体这个收费东西,具体这个什么乱七八糟的一些介绍的话,可以去仓库里面去看一下他的一些简介。等待它部署完成,然后部署的同时给大家去介绍一下这块和之前有不同的地方。 这块是用.evn去注入的,所以我们可能要去做两个东西,第一个就是去声明我们的S-ID和S-KEY,这块知识可以去在腾讯云官网去直接拿到。

那这块的话是我们的一些配置文件,然后这块的话其实是有几个区域好像是暂时不支持的。我建议大家的话就直接选到北京区吧。就是这里的一个.evn的这个文件

其次的话是我们Serverless 一个VPC的一个使用,然后具体的简介的话也可以去他的详情里面去看然后这就不做一些介绍了。

这里的话其实我们就可以直接去配置一下我们的YML文件,yml文件是把一些环境变量去写死的,比方说我们的bucketName以及这个地域的这个操作,它只是用我们变量去做的这个传参,这里的话我们更改的地方也比较少,主要是配置好.env就可以了

然后我们去做一些部署,可能还有一个操作是我们需要去执行这一块的命令去帮助我们做一些依赖的一些打包,我们先去打包一下我们的依赖,这个过程可能根据自己的网速会有一些长,因为现在的网速也不是很快,所以大家可能要稍微等一下。那么具体打包哪些东西我们可以直接去看一下整个的源码他其实都写的比较明白,打包完成之后我们其实就可以运行我们的Serverless Debug命令,当然这块的话也可以写成Serverless Debug, 大家可以等待我们这块的一个部署完成。

那这块的话其实我们就可以看到我们现在的所有的一个代码其实是都已经部署完成了,它其中包括我们的API网关的一个访地址,这些API网关其实是主要是去做一些数据库的操作,它包括我们数据库, Postgresql 的一些地址,还有我们地域的一些信息,我们Password的那些其实都是有的。

那么VPC的话指的是我们的VPC的一个网络环境,这个的话其实大家也可以去关注一下,因为vpc还是比较重要的。然后这块儿的话我刚看了一下好像这块其实是有一些和和配置的东西

比方说我们的VpcName其实的话是可以去做一些配置的,当然我是建议大家还是先去创建一个默认的一个地址应该就是可以了。

那我们来看一下我们整体的一个效果吧,这块儿其实就是我们构建完成的一个页面

呃那么这里的话呢给大家去演示一下它是怎么去操作的。然后我们随便去写一个邮箱,还有包括我们的site,随便去写一个然后发送,那么这里是List到我们 Postgresql 的这个信息 ,其实这个信息的话我们其实在刷新我们依然是可以看到的。因为他是直接存到数据库的并不是存到我们的前端,再给他想去试验一波,他是直接去查询我们的list,那么这个其实就是我们一个非常简单的 Postgresql 去构建的一个应用。那么这里的话是比较简单的,然后大家也可以去看一下,也没有什么比较有难度的东西。

这块儿的代码其实呃给大家简单去看分析过。这块代码其实也是比较简单的,它其实就是他这块是有一些环境变量,然后去做一些拉取还有包括封装的一些操作,这块就是我们所在API在我们元素所去请求的这个API地址,其他的话是一些大体的index的这个逻辑,他是直接到了环境变量去取得一些名称,做一些数据库的连接。

那么这里的话其实就是我们刚刚所部署的一些代码的命令,然后这里是它的一个具体的一个逻辑,

然后我们的静态部署其实是在COS,我们直接筛地域是北京,这里其实就是呈到的是我们的静态的一些东西,他对我们静态资源去做了一些剖离,现在的Postgresql好像是必须通过VPC作的一些链接,所以现在是不可以被其他服务器所访问的,但是你要假如你放到同一个VPC下,我理解是可以的。

5、 Q&A问答:

Q1:数据库是付费的吗?

A1:数据库这块应该是有免费额度的 对然后具体的免费额度的一些情况的话,大家可以去个官网里面去查看一下相关的一些介绍。

Q2:不同云厂商的YML可以复用吗?

A2:其实我理解这块儿应该是不可以复用的,因为yml有一些变量是定制的。有可能有一些层没有,但是大部分的顶层应该是可以共用的。

Q3:清明搞了三天然后死活连不上数据库怎么回事?

A3:我觉得这个报错的话可以给我们去反馈一下,然后我们的相关同学看到之后会为大家去做一些详细的解答。

Q4:Serverless Framework具体作用能简单讲一下吗?

A4:这里的话其实有很多好像刚刚也讲到了他其实做的一个事情就是向上去做一些组件化的一些开发 ,类似于我们之前大致介绍的Express.js,website,next.js这些其实就是组件化的开发。然后他对下去做一些标准化框架的构建,类似于我们的debug,我们的deeply一些全流程的Serverless 的监管。 然后这块儿的话其实最关键的是对于Serverless 的整体应用生命周期的一个管理。

Q5:Serverless 需要去买哪些配件?

A5:然后这块儿买什么配件,其实就应该说的事我们之前为大家去做一个介绍,就是我们的一些Baas服务,Baas服务我们比较常用的有我们的deeply,API网关,还包括这次用到的一个cos,然后最快的创建完成之后的话为大家有一个统一做的一个简单需求

全部评论
讲师/助教

评论

直播日历