流行的web框架_web前端三大主流框架

大家好，我是霍大侠，这个系列课程我们通过部署流行web框架，来学习掌握serverless的技术和架构。课程主要从实践介绍，实践演示，分析详解三个大的章节来一步一步学习。

前言

进入实验室-动手实践

下面链接进入阿里云实验室：https://developer.aliyun.com/adc/scenario/fa580aeba6947fc5ec327e4ba1

实践介绍

视频学习-实践介绍

https://www.bilibili.com/video/BV1Ha411u7ob?spm_id_from=444.41.list.card_archive.click&vd_source=17aa179c58fa645e55de646d98

这里从Serverless演变；函数计算优势；Serverless应用场景3个方面来学校serverless。

声明注意：本实验中使用的函数计算FC，对象存储OSS是流量产品，域名服务是预购产品。会产生流量费用和购买费用。请根据自身情况慎重使用。如产生费用，请自行承担。当然也可以纯粹阅读学习使用。

Serverless演变

Serverless，函数计算（Function Compute）到底是什么？

Serverless，又叫无服务器。Serverless 强调的是一种架构思想和服务模型，让开发者无需关心基础设施（服务器等），而是专注到应用程序业务逻辑上。Serverless 也是下一代计算引擎。比如阿里云平台Serverless产品主要包括函数计算；Serverless应用引擎SAE；Serverless工作流。

所以你可以理解Serverless是一种架构思想。

我认为Serverless的核心是函数计算，它是一个事件驱动的全托管 Serverless 计算服务，您无需管理服务器等基础设施，只需编写代码并上传，函数计算会为您准备好计算资源，并以弹性、可靠的方式运行您的代码。

通常人们说的云函数也就是指Serverless。

目前互联网流行的应用架构主要是从单体架构，到流行的微服务，和现在快速发展serverless架构。可以看到3种架构的一些特点，单体架构耦合度高，弹性，扩展性差；微服务改善很多，更灵活，但是运维学习成本也很高。serverless通过事件驱动模式，具有弹性高可用等特点；包括按需付费；免运维都是其强大之处。我相信随着技术不断的发展，serverless一定是将来非常流行的技术架构。

我们从这个阿里云官方介绍中可以看到serverless针对不同场景的不同形态。随着FaaS出现的标准模板，付费的定制化FaaS模板，我相信也会逐步发展起来，也许最终是通过低代码配置直接AI智能生成函数，让我们拭目以待。

Serverless优势

免运维：不需要管理服务器主机或者服务器进程。

弹性伸缩：根据负载进行自动规模伸缩与自动配置。伸缩范围零到无穷大。

按需付费：根据使用情况决定实际成本。

高可用：具备隐含的高可用性。

另外云函数不能保存状态，但是可以通过其他计算服务配合来完善这个，比如用redis或者本地cookie可以保存用户状态信息。

Serverless最核心的一个优势就是丰富的弹性策略，和灵活调用策略。我们可以从图中看到，它可以灵活配置基础指标CPU，内存，实例上下限等等。

函数计算同时可以联合云计算的大部分产品服务，形成非常灵活的，低耦合绑定，随用随拿。通过事件，http，触发器多种形式调用。这个官方流程图清晰的阐述了函数计算的整个流程。

Serverless应用

大部分行业都可以用serverless架构。比如游戏，在线教育，电商，SaaS产品，小程序等等，通过核心函数计算和其他serverless产品形成强大的支持。

从这里我们可以详细了解函数计算的应用细节。感兴趣的截图保存。

我们最后来讲一个简单web网站案例。很多人有疑惑，云函数只是一个函数计算，相当于一个API接口，那我如果想结合数据库，存储和其他的功能应该怎么办？从这个简单的结构图大家可以看明白，云函数是需要配合各种云计算服务才能完整的部署我们的复杂的应用程序。我们可以通CDN服务来加速展现，可以通过OSS来存储文件资源。你也可以理解为云函数部署了你的网站代码，用Redis来保存用户的会话状态，重要数据存放到Mysql或者mongoDB等等。如果需要队列，日志服务，我们都可以通过平台提供的产品快速接入，可以满足大部分常用的应用程序。我们接下来一步一步来学习。

通过实践介绍这个章节我们学到了什么是serverless，它的优势和应用场景。

serverless技术架构还在快速发展，阿里云，华为云，腾讯云，亚马逊等都在发展自己的serverless产品。

如果上面内容有不合适的地方，还请大家给我评论留言，我们一起交流学习。

下一章，我们来学习怎样在serverless上部署流行的web架构。

实践演示

视频学习-实践演示

https://www.bilibili.com/video/BV1tB4y187rA?spm_id_from=444.41.list.card_archive.click&vd_source=17aa179c58fa645e55de646d98

这一章我们来开始实践，在这个章节我们也是从3个方面来学习，

先学习函数计算的产品功能；接着部署web框架springboot；最后实践部署nodejs框架express的案例。

函数计算产品功能

废话不多说，先来看阿里云函数计算的功能都有哪些？

声明注意：这里需登录自己阿里云账号开启函数计算服务，函数计算服务属于流量计费，有可能产生流量费用。请慎重使用。如产生费用，请自行承担，也可以纯粹阅读学习。

1 登录阿里云网站，顶部登录，输入用户名和密码。

2 然后左上角产品，在产品服务中找到Serverless类别，下面的函数计算PC，接着就可以看到函数计算的主面板。（如果没有开通服务的，直接同意开通即可。)

3 下面一步一步学习体验函数计算的产品功能。概览展示了整体函数计算的调用数据和运行环境。

我们接着看菜单中第二项应用，我认为这个是一个很好的功能，极大的方便了用户的门槛，我们可以通过这个功能，快速创建自己的站点和应用。

应用包含了从模板创建和仓库导入2种方式，后面我会主要演示模板创建的案例。

仓库模式也可以从你的github,gitee等常用仓库中拉取部署，这里不过多赘述。

什么是服务？服务是函数计算资源管理的单位。创建函数前必须先创建服务，同一个服务下的所有函数共享一些相同的设置，例如服务授权、日志配置。从业务场景出发，一个应用可以拆分为多个服务。从资源使用维度出发，一个服务可以由多个函数组成。例如一个数据处理服务，分为数据准备和数据处理两部分。数据准备函数资源需求小，可以选择小规格实例。数据处理函数资源需求大，可以选择大规格实例。

函数计算的资源调度与运行以函数为单位。函数必须从属于服务，同一个服务下可以创建多个函数，这些函数共享一些相同的设置，例如服务授权、日志配置，但彼此相互独立，互不影响。本文介绍函数的属性和运行环境，以及如何通过函数计算控制台创建、配置和删除函数。

我们可以创建服务后，在其下面创建函数，函数中具体代码就是你的业务场景的实现。可以从标准runtime；平滑迁移web server；容器镜像；模板创建4种形式来创建。

这里展示的是我们之前写过得一个抽奖大转盘云函数代码，主要是通过小程序调用云函数，云函数再调用MongoDB数据。因为当抽奖人多时候，需要很好的并发性，所以我们采用了MongoDB和云函数结合。让用户在抽奖时候没有任何卡顿现象，同时用户少的时候也能节约硬件费用，云函数很好的满足了我们的需求。

任务其实就是管理异步函数的地方。提供了一个完全托管的，开箱即用的，可观测友好的大规模任务处理平台。当您上传代码包/容器镜像创建任务处理函数后，就可以提交、查看、停止和重试任务。也可以暂停/恢复处理函数的执行。这里查看更多详情。

高级功能中，主要包含了监控，域名，弹性管理，层管理。监控大盘如图所示是整体数据的监控。

域名很容易理解就是绑定自己的云函数应用，可以Web应用，可以是API接口。
弹性管理是配置云函数的资源使用上线，防止费用过多。同时还可以配置最小实例，降低冷启动次数。
层管理提供了公共依赖库，运行环境等等，函数之前可以共享，减少代码包体积。
其他更多功能中的审计日志，权限助手，还有工作流，应用引擎功能产品，这里也不在过多阐述。

感兴趣朋友可以在开发自己云函数时尝试一下。

什么场景需要使用自定义域名？当您的函数使用 HTTP 请求触发时，您可能需要使用您自己的自定义域名来访问您的函数。例如，您创建了一个函数作为 Web 应用，您希望用户通过固定的域名访问这个 Web 应用，这时候您就可以为该 Web 应用绑定自定义域名。除此之外，您还可以为该域名设置 CDN 加速功能，将部署在函数计算的应用作为源站，把源内容发布到边缘节点，使终端用户能快速读取所需内容。这里查看更多详情。
什么是弹性管理？函数计算为您提供了按量模式和预留模式两种实例使用模式。您可以配置最大实例数来控制单个函数的资源使用上限，来防止单个函数过度调用导致的实例占用，保护后端资源，避免预期外的费用开销。同时可以通过配置最小实例数来激活预留模式实例，函数计算系统将根据配置的最小实例数为该函数常驻实例，来快速响应函数调用请求，降低冷启动的发生次数，为时延敏感的在线业务提供更好的服务响应。按量模式和预留模式计费方式不同，这里查看更多详情。
什么是层？层可以为您提供自定义的公共依赖库、运行时环境及函数扩展等发布与部署能力。您可以将函数依赖的公共库提炼到层，以减少部署、更新时的代码包体积，也可以将自定义的运行时，以层部署在多个函数间共享。层默认部署在函数执行环境的/opt目录下，作为函数可额外附加的代码目录。当函数配置多个层时，这些层的内容将被合并至/opt目录。这里查看更多详情。

产品功能就讲到这里，大家可以从中领悟和梳理下函数计算的操作性和特性点。

部署Web框架SpringBoot

接着上面章节的产品功能，我们在左侧菜单中“应用”。

左侧菜单应用，选择通过模板创建应用，选择springboot模板。创建前最好先仔细阅读下详细中的说明。
然后立即创建，进入到详细页面，这里我选择直接部署。

应用名称直接按默认的走，然后创建。

我们会看到创建的一个过程。创建完毕后，可以看到框架已经生成，是不是非常的简单和傻瓜式啊。

访问域名就可以看到网站页面了。这是生成的框架首页，云平台自动为我们配置了一个子域名。

上面创建页面的查看全部，可以看到创建过程的日志信息。

部署分为4个部分，前置环境；资源同步；资源检查；执行部署，感兴趣的可以仔细阅读，对了解整体过程还是有一定帮助的。

通过底部函数资源中的服务和函数去查看具体内容。

当服务web-framework时候，就跳转到具体的服务和函数信息里面了，这时候可以看到通过模板创建的springboot框架已经部署成果，感兴趣的可以查看框架代码，并且修改代码。

到这里，我们就全部完成了部署SpringBoot框架到函数计算平台，大家可以自己实验一下。

部署Web框架Express案例

继续来部署Node.js语言Express框架的TodoList案例。还是在应用中找到Express的TodoList案例。

选择热门应用，选择对应模板案例，然后详情。

我们可以在右侧弹出的层中阅读安装说明。记得这里我们不用立即创建，我们回到本机来用客户端创建应用。

这次我们采用开源工具Serverless Devs本地部署应用。安装Serverless Devs客户端前，你本机需要已经预装了npm，也就是需要安装Node.js环境，可以在其官网下载node.js https://nodejs.org/zh-cn。一定要选择默认Paht加入全局变量中，然后打开CMD，检查node安装是否正常，输入下面命令到cmd中。

node -v

如下图出现版本号，就是正常的，如有其他问题，请自行百度安装npm包环境。

先安装Serverless Devs，直接从图中官方文档可以安装即可。

https://docs.serverless-devs.com/serverless-devs/install?spm=5176.fcnext.0.0.c8Pc78am

$ npm install @serverless-devs/s -g

代表安装成功。

然后我们通过命令行来配置自己的密钥，密钥阿里云右上角头像图标，在出现弹层中，选择“AccessKey管理”，可以找到自己key和secret。

我们打开windows的cmd命令提示符工具，来配置密钥，输入下面命令：

s config add

根据提示选择Alibaba Cloud，一步一步选择粘贴即可。（在输入s命令前，记得根据上面文中说明，安装好Serverless Devs的客户端，这里不做详细指导）

初始化模板项目，输入下面命令，可以看到模板下载到了我们本地中。

s init todolist-app -d todolist-app

进入本地目录，部署云服务到阿里云函数计算平台中。输入命令：

cd todolist-app && s deploy

可以在左侧看到生成的domain就是访问域名，触发器形式为http形式。包括云函数的名字和配置都一目了然。这里提醒一下，本地用客户端工具部署的云函数不会在阿里云平台的应用列表中出现。

部署后在控制台可以看到生成域名，复制域名在浏览器上访问，就会出现此页面了。如果你修改本地代码，然后再次运行部署命令，我们的serverless应用就会更新了。

回到云平台，在左侧菜单“服务及函数”中可以看到部署的服务，点进去就是刚才的函数。

怎么样，到这里是不是觉得云函数也不是很难吧。

另外大家记得，如果只是练习学习部署应用，可以在学习完成后删除掉对应的应用或者服务，防止产生额外的费用。

回顾一下，两个框架的部署都完成了，超乎想象的简单哦！

这里提一杯，我还是比较满意阿里云的函数计算产品的，尤其是应用这个功能的上线，让入门者学习，部署更加简单。

上面的章节中，学会了怎样部署web应用到函数计算平台中。

分析详解

视频学习-分析详解

https://www.bilibili.com/video/BV1eV4y177/?vd_source=17aa179c58fa645e55de646d98

这个章节我来手把手教大家怎样部署一个属于自己的Web IDE工具，包括怎样把官方生成的域名配置成自己的域名。

介绍开源Web IDE工具

实操之前，我们还是先简单了解下这个web ide工具。

它是基于 Serverless 架构和 Vscode 的即开即用，用完即走的轻量 Web IDE 服务。具有海量插件；数据实时保存；低成本等特点。

它用golang语言实现反向代理访问，它是基于开源的openvscode-server，提供了vscode web ide的功能。

感兴趣并且会golang的朋友，可以了解下本地调试的方法。

通过基本流程，我们可以学习到这个开源工具的运行原理，便于调试和二次开发。

这里重点说下开发调试，如果你需要在本地环境中搭建，要仔细阅读这里，了解目录结构和相关配置信息。

开源工具介绍完毕，我们趁热打铁进行实践吧！

制作自己的Web IDE工具

开始制作自己的Web IDE工具，按下面的步骤一步步执行即可。

从官方模板中找到serverless vscode webide的模板，立即创建。

声明注意：对象存储OSS服务属于流量计费，会产生流量费用。请慎重使用，如产生费用，请自己承担。当然也可以单纯阅读学习。大家需要注意一点，这个web ide工具需要创建OSS对象存储，OSS便于存储用户的数据。创建应用时候，创建新的OSS存储桶，跳转到OSS产品后，直接创建一个oss 的bucket即可。红框下面的创建新的OSS存储桶。

跳转到了对象存储OSS的产品页面，我们左侧Bucket列表，然后创建Bucket，填写一个名称webidepractise，保存即可。也可以通过这个链接提前创建好OSS的存储桶。https://oss.console.aliyun.com/overview

回到应用创建页面，刷新，选择刚才创建的OSS，切记云函数和OSS需要在同一个region。创建成功后，就会在应用列表中出现。

上图中的配置，可以看到下面页面，了解下函数的配置情况。红框中就是我们选择的OSS，也可以调整为适合自己的配置。

列表中的访问域名，这里就可以看到的web ide工具了，你可以在这里打开github仓库上的代码，直接在线编写程序，是不是非常方便。

配置自己的域名（如果没有购买过阿里云域名，可以忽略下面内容）。声明注意：这里需从阿里云平台购买域名，域名会收取费用。请慎重使用，如产生费用，请自己承担。左侧菜单域名管理，添加自定义域名，就可以看到这个页面，在这里配置子域名，然后复制公网CNAME域名，云解析DNS控制台来配置域名。

云解析DNS控制台后跳转到了域名解析产品页面，选择自己购买过得域名，在域名解析中，我们解析设置就可以配置公网的CNAME。

添加了一条ide的cname的子域名记录，记录值是从云函数复制过来的，这样就形成了映射关系。添加完毕，我们回到刚才的云函数域名配置页面，选择对应的路由配置，选择你域名对应的服务名称，函数名称，版本名称，创建，大功告成。

接着在浏览器中输入自己的域名，我们的Web IDE工具出现了，到这里你是不是有了一丝的兴奋。

到这里，我们就学会了制作自己的Web IDE工具了，感兴趣朋友可以二次开发完善自己的在线工具。

本次实践所有学习和实践的知识都已经讲完。

回顾一下整体的知识，从了解serverless概念，架构，应用场景，到学习操作函数计算的产品，到部署流行web框架，最后我们还制作了一个自己的web ide工具。

相信对一个入门学习者来说，你能跟着我学习和实践完成，证明你已经基本掌握了serverless。

后续可以把你的产品迁移部署过来，也可以在函数计算上开发部署自己的新项目或者新产品。

思考总结

这里给大家几个问题，思考总结一下：

Serverless，函数计算是什么关系？
你喜欢本地部署还是在线部署？
研究一下函数计算怎样配置实例，怎样设置最大实例限制？

原文链接：http://click.aliyun.com/m//

本文为阿里云原创内容，未经允许不得转载。