Serverless 架构在前端应用领域的价值|学习笔记

简介: 快速学习 Serverless 架构在前端应用领域的价值

开发者学堂课程【Serverless 架构在前端应用领域的价值:Serverless 架构在前端应用领域的价值】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/845/detail/14015


Serverless 架构在前端应用领域的价值

l 前端发展史简介

l 前端的诞生

1990 年,第一个 Web 浏览器诞生,1991 年万维网诞生,标志着前端技术的开始。

l 前端的应用场景变迁

l 前端开发语言能力的变化

l Serverless 又给前端带来了什么?

思考三个问题:

Serverless 跟前端的关联在什么地方?

Serverless 跟做客户端开发的有没有关系?

Serverless 带给 web 开发的改变是什么?

 

l Serverless跟前端的关联

Javascript、python 这类解析执行型的语言,天然对 Serverless 冷启动有着友好的支持,成为 Serverless 语言开发的主力。

58% 的用户使用 Python , Node.js 则占据了 31% 的份额,Java、Go、.NET Core和 Ruby 的份额均未超过 10%。

小型的 lambda 运行环境中,Nodejs 份额高于 Python,企业级组织中,Python 的使用频率则是 Nodejs 的4倍。

l 站在 Serverless 肩上

前端工程师构建服务的能力无限加强

前端工程师的生产力也大幅提高。

快速交付

u 不用再搭建服务器,不用为保障高可用,安全编写非业务代码,可以大幅缩短项目交付的时间

运维无忧

u Serverless 服务可以完成自动扩缩容,不用担心大规模流量冲击完备的监控告警体系和链路追踪能力方便故障定位

成本降低

u 用完即走的特性可以帮助避免计算资源的浪费

l Serverless跟做客户端开发的有没有关系?

图片8.png

传统的客户端想操作服务器上的数据库必须经过服务端。

图片9.png

客户端跟网关的通道建成后,可以透明化对服务逻辑的调用,可以让客户端看起来可以直接操作数据库,文件存储,登录注册等服务端的功能。

l Serverless 带来新的客户端访问服务端形式

Serverless 让通用的服务端能力形态沉淀成 BAAS,再通过 graphql 建立数据通道来让不同的客户端直接访问,可以进一步提升前端应用的开发效率,这也会成未来端侧访问服务的新形态。


l Serverless 带给 web 开发的改变是什么?

传统的 web 站点的开发流程:

图片10.png

l 传统 web 站点开发的问题

1. 耗时长:从设计开发测试部署上线往往经历数周甚至数月才能有上线。

2. 访问体验一般:SEO,站点加速等都需要单独专项做,一般新手不太容易搞定。

3. 更新迭代慢:每次更新重新部署上线的周期长,更新内容如果是动态的研发时间也会比较长。

 

l 现代化Web 站点构建介绍

l 建站演示

准备工作:

1. 进入 Serverless devs官网,下载桌面开发工具 Serverless Desktop (支持windows 和 mac 版)。

2. 申请注册阿里云账号,并开通阿里云函数计算产品(免费开通)。

创建演示步骤:

打开 start—jamstack,点击下载,在本地选择一个合适目录,填写预置参数时写用户自定义域名确认配置,点击执行,启动应用,回到工作空间,点击应用信息部分的域名,站点创建完毕。

打开基本信息面板,点击图标,使用任意 IDE 打开项目,进入 serverlessdevs-website 项目下进行应用安装,启动会自动打开一个预览环境,然后在源代码目录下做一次源代码更新,对当前源代码进行构建,生成一个静态的目录。回到配置信息面板,再执行一次部署,可以看到应用已经完成一次更新。

动态编程操作:

站点是纯静态的怎么具备一些动态能力?

打开代码,contributor 目录,在命令行输入

scli kv put contributor.json_kv/contributor.json  现在已经成功把 contributor 的内容做了一次上传,而 contributor.Json 这个名字有一个可以直接访问的能力。具体怎么通过站点去访问 contributor 的内容呢?官方提供了一个固定的路径

就可以访问到刚才上传上去的内容。

l 端云调试

调试始终是 Serverless 应用的最棘手的部分,我们开发的应用是在本地,部署的应用是在线上。并且线上的环境跟本地开发环境有着巨大的差异,通常我们只能通过在线打印输出,然后还得通过日志平台查看日志判断问题,再回来本地修改代码,一来一回耗时非常巨大,而且效果也不好。Serverless Devs 提供了自己的解决方案,我们巧妙的设计了一个在线的辅助函数,辅助函数完整复刻线上代码,然后通过本地跟辅助函数建设通道实现本地的代码调试效果。

基于这样的能力我们再来看看具体怎么在 Serverless Hub 实施的, 本次演示使用的是 Serverless Desktop, 大家可以尝试跟着我的操作步骤进行使用:

1. 新建一个 Serverless 应用,并把它部署到线上

我们可以通过 Serverless Desktop 的应用市场搜索 xxx 应用模板,然后加载到本地,然后通过可视化配置部分修改相应的服务和函数内容,进行部署。

2. 进入工作空间->应用管理->应用详情->端云调试

按照提示准备好前置条件,比如安装docker demon 指定调试端口,启动资源准备,这个时候会创建辅助函数,同时构建 vscode 的 debug 文件。

启动好之后,使用 vscode 打开工程目录,查看debug配置文件.vscode/launch.json

以这个启动 debug 模式

3、发起调用

切换到"本地调试配置"面板,点击"发起调用"

可以发现  vscode 触发调试

调试结束回到 Serverless Desktop 页面,我们可以看到输出效果:

这里我们发起调用是向这个服务的根目录发起,如果我们想向其他的路由地址发起调用该怎么操作呢?我们可以复制发起调用后输出的基础地址。

然后贴到 postman, 再往后拼接上我们的测试路由地址,比如,想访问"/appCenter/getSpecial",可以拼接成"<基础地址>/appCenter/getSpecial"然后"Send"这个请求。

通过这样的方式我们可以深入细节知道每一行代码的调用问题到底出在哪里,极大的提高了我们的开发效率。

4、清空环境

调试结束后不要忘了清楚调试环境,包括关闭本地的容器地址,以及清理线上的函数。

综上我们完成了一次完整的调试过程。


l 总结

新一代的 web 研发范式:

1. 研发阶段:按需的动态化

站点保持静态化可以有很多优势,诸如安全,访问快速,搜索引擎友好等。但动态化是不可避免的,只不过动态数据可以按需设定,并非纯粹API。

2. 部署阶段:动静态部署分离

最大化的利用云服务的优势静态资源存储到 OSS 上,并借由 CDN 加速实现极致访问,动态接口则托管到 Serverless 平台,最大限度的利用其单性伸缩,安全容错的优势。

3. 上线交付阶段:交付优先,极致体验

站点可以快速提供线上预览能力,上线后,访问性能,安全,搜索优化等都需要具备。

4. 持续集成:敏捷开发,迭代快速

功能的开发到更新优化实现流程自动化,需使用。

相关实践学习
函数计算部署PuLID for FLUX人像写真实现智能换颜效果
只需一张图片,生成程序员专属写真!本次实验在函数计算中内置PuLID for FLUX,您可以通过函数计算+Serverless应用中心一键部署Flux模型,快速体验超写实图像生成的魅力。
从 0 入门函数计算
在函数计算的架构中,开发者只需要编写业务代码,并监控业务运行情况就可以了。这将开发者从繁重的运维工作中解放出来,将精力投入到更有意义的开发任务上。
相关文章
|
7月前
|
前端开发 JavaScript 应用服务中间件
在Docker部署的前端应用中使用动态环境变量
以上步骤展示了如何在 Docker 配置过程中处理并注入环墨遁形成可执行操作流程,并确保最终用户能够无缝地与之交互而无须关心背后复杂性。
361 13
|
12月前
|
存储 运维 Serverless
千万级数据秒级响应!碧桂园基于 EMR Serverless StarRocks 升级存算分离架构实践
碧桂园服务通过引入 EMR Serverless StarRocks 存算分离架构,解决了海量数据处理中的资源利用率低、并发能力不足等问题,显著降低了硬件和运维成本。实时查询性能提升8倍,查询出错率减少30倍,集群数据 SLA 达99.99%。此次技术升级不仅优化了用户体验,还结合AI打造了“一看”和“—问”智能场景助力精准决策与风险预测。
1081 69
|
11月前
|
数据采集 运维 监控
Serverless爬虫架构揭秘:动态IP、冷启动与成本优化
随着互联网数据采集需求的增长,传统爬虫架构因固定IP易封禁、资源浪费及扩展性差等问题逐渐显现。本文提出基于Serverless与代理IP技术的新一代爬虫方案,通过动态轮换IP、弹性调度任务等特性,显著提升启动效率、降低成本并增强并发能力。架构图与代码示例详细展示了其工作原理,性能对比数据显示采集成功率从71%提升至92%。行业案例表明,该方案在电商情报与价格对比平台中效果显著,未来有望成为主流趋势。
447 0
Serverless爬虫架构揭秘:动态IP、冷启动与成本优化
|
12月前
|
Cloud Native Serverless 流计算
云原生时代的应用架构演进:从微服务到 Serverless 的阿里云实践
云原生技术正重塑企业数字化转型路径。阿里云作为亚太领先云服务商,提供完整云原生产品矩阵:容器服务ACK优化启动速度与镜像分发效率;MSE微服务引擎保障高可用性;ASM服务网格降低资源消耗;函数计算FC突破冷启动瓶颈;SAE重新定义PaaS边界;PolarDB数据库实现存储计算分离;DataWorks简化数据湖构建;Flink实时计算助力风控系统。这些技术已在多行业落地,推动效率提升与商业模式创新,助力企业在数字化浪潮中占据先机。
610 12
|
人工智能 前端开发 JavaScript
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
AI程序员:通义灵码 2.0应用VScode前端开发深度体验,在软件开发领域,人工智能技术的融入正深刻改变着程序员的工作方式。通义灵码 2.0 作为一款先进的 AI 编程助手,与广受欢迎的代码编辑器 Visual Studio Code(VScode)相结合,为前端开发带来了全新的可能性。本文将详细分享通义灵码 2.0 在 VScode 前端开发环境中的深度使用体验。
2180 2
AI程序员:通义灵码 2.0应用VScode前端开发深度体验
|
人工智能 前端开发 Java
DDD四层架构和MVC三层架构的个人理解和学习笔记
领域驱动设计(DDD)是一种以业务为核心的设计方法,与传统MVC架构不同,DDD将业务逻辑拆分为应用层和领域层,更关注业务领域而非数据库设计。其四层架构包括:Interface(接口层)、Application(应用层)、Domain(领域层)和Infrastructure(基础层)。各层职责分明,避免跨层调用,确保业务逻辑清晰。代码实现中,通过DTO、Entity、DO等对象的转换,结合ProtoBuf协议,完成请求与响应的处理流程。为提高复用性,实际项目中可增加Common层存放公共依赖。DDD强调从业务出发设计软件,适应复杂业务场景,是微服务架构的重要设计思想。
|
Kubernetes 监控 Serverless
基于阿里云Serverless Kubernetes(ASK)的无服务器架构设计与实践
无服务器架构(Serverless Architecture)在云原生技术中备受关注,开发者只需专注于业务逻辑,无需管理服务器。阿里云Serverless Kubernetes(ASK)是基于Kubernetes的托管服务,提供极致弹性和按需付费能力。本文深入探讨如何使用ASK设计和实现无服务器架构,涵盖事件驱动、自动扩展、无状态设计、监控与日志及成本优化等方面,并通过图片处理服务案例展示具体实践,帮助构建高效可靠的无服务器应用。
|
存储 消息中间件 人工智能
基于 Apache RocketMQ 的 ApsaraMQ Serverless 架构升级
基于 Apache RocketMQ 的 ApsaraMQ Serverless 架构升级
331 0
|
人工智能 前端开发 JavaScript
详解智能编码在前端研发的创新应用 | 领通义灵码蛇年红包封面
详解智能编码在前端研发的创新应用 | 领通义灵码蛇年红包封面
|
6月前
|
人工智能 运维 Kubernetes
Serverless 应用引擎 SAE:为传统应用托底,为 AI 创新加速
在容器技术持续演进与 AI 全面爆发的当下,企业既要稳健托管传统业务,又要高效落地 AI 创新,如何在复杂的基础设施与频繁的版本变化中保持敏捷、稳定与低成本,成了所有技术团队的共同挑战。阿里云 Serverless 应用引擎(SAE)正是为应对这一时代挑战而生的破局者,SAE 以“免运维、强稳定、极致降本”为核心,通过一站式的应用级托管能力,同时支撑传统应用与 AI 应用,让企业把更多精力投入到业务创新。
680 30

热门文章

最新文章

相关产品

  • 函数计算