Serverless 时代前端避坑指南

本文涉及的产品
函数计算FC,每月15万CU 3个月
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
简介: 本篇文章就是交给大家如何避(快)免(速)踩(上)坑(手),文末还有福利大放送:7天玩转云端开发,免费开发还有多重好礼!速来!

作者 | 张挺

image.png

每个时代,从来不缺机会。

云原生的浪潮席卷而来,从 14 年到现在,上云的声音就没有停歇过,而如今到了 2020,云厂商都已经准备好了,而前端,是否也准备好踏入这纷争的领域,去拥抱时代给予的蜜糖,亦或者是带刺的玫瑰?

大家都或多或少的在现在的云战场上接收到信息,也不免的去学习,对比各家云平台的功能,甚至还会实际调研,考虑用在自己的产品或者业务中,而阿里在内部经过一年的实践和总结,将 Serverless 和现有框架有机的整合到了一起,同时,希望能简化现有社区的云函数开发。

本篇文章就是交给大家如何避(快)免(速)踩(上)坑(手)。

PS.文末福利大放送,7天玩转云端开发,免费开发还有多重好礼!

避坑第一招

而 Web 栈开发框架, 阿里的 Midway 体系也早早在去年就开始了新的尝试。从传统 Web 到 Serverless 体系的转换,没有那么容易,看起来很干净整洁的代码,在 Severless 体系中甚至变为了加锁,步步桎梏。

俗话说,聚是一团火,散是满天星,就拿简单的 Web 请求来说,大家想的是,我一个接口变为一个函数,非常简单。我一个应用,根据路由,可能会分为 1,2,3,4 ... 100 个接口吧。而事实是,一个 Web 请求,从接到数据的那一刻,坑就已经挖好了,等着跳呢。

第一个坑来了,我该选择哪个平台呢?打开搜索引擎,各家云平台的广告接踵而至,为了避免提前选择平台,midway faas 使用的是固定的模板代码,要使用它,需要安装我们的 CLI 工具。

image.png

midway faas 的 CLI "f" 也是 Node.js 写的,大部分前端开发者第一次使用 Serverless 即将从它开始。同时还集成了阿里云、腾讯云等众多云厂商云服务发布,并支持的开发、调试、部署等能力。

我们可以用 "f" 创建我们的第一个函数示例。

image.png

它的 CLI 也是 Node.js 写的,所以很可能大部分前端开发者第一次使用 Serverless 都从它开始。

image.png

midway faas 的代码文件是以 class 的形式,这样所有的方法都可以是一个可复用的函数,并且还可以享受到传统 OO 的能力。

避坑第二招

各个云平台如下的代码宣传深入人心。

image.png

这些简单的宣传函数,相似又有着细微的不同(不建议大家去尝试了), hello world 基本上是通过 callback 或者标准的格式来返回(还有 HTTP response)。

对于前端来说,前后端分离,到 DevOPS,到全栈开发的洗礼,已经相对比较熟悉类似 Koa/Egg 等这一套 Web 开发的套路,到了 Serverless 下,我的代码怎么办呢?

别急,midway faas 已经做好了一切。

image.png

大家会发现,整个写法和传统的 koa 接口一模一样,只要你会 koa,那么,在瞬间即可上手。用上你熟悉的 API,快速的进入开发节奏。

除此之外,你可以用上大部分 Midway Web 开发的装饰器,甚至直接把业务代码拷贝过来即可,整个 midway faas 框架会帮你完成整合和运行。

避坑第三招

这个时候,我们的代码写完了,按照 Serverless 传统的开发模式,要么本地装一个 Docker,按照平台的方式去测试,要么直接打包发布到平台去测试和调试。

在我们的调研中,本地装 Docker 对前端来说太不友好了,每当我们提出要通过 Docker 做一点事情,试用方就会提出能不能轻量一些,开发 Web 能不能像之前的传统开发一样启动服务,刷新浏览器。

为此我们的回答是“能”,通过 invoke 命令,既可以直接调用,也可以启动服务。

image.png

你熟悉的 http://127.1:3000 已经启动,开发和调试,一切都随你心意。

点击查看midway 操作示意图视频

避坑第四招

代码开发完成,也测试完成,我们就可以发布到平台啦,这个时候,阿里云,腾讯云,其实就看你喜好啦。

你想发布到哪个平台,直接配置即可。

image.png

然后执行部署。

image.png

我们广告看的非常多,无运维,按请求收费,低成本,简化逻辑,让 Serverless 走进千家万户。本质和传统应用开发是有 Gap 的,Serverless 通过 yml 配置聚合资源,由平台提供资源服务,而业务只需要编写单一的逻辑代码,而由于逻辑的简化之后,不再需要考虑复用,迭代,乃至维护和管理。

虽然我们的代码可以在编写时不需要考虑多个接口了,但是还有最开始的那个问题没有回答, “接口多了发布、管理怎么办?”。

image.png

midway faas 采用的是接口自定义聚合的模式,根据流量模型,用户可以自己决定部署模式,我们的 f.yml 中可以进行自由配置,你可以决定将所有接口汇聚到一起,部署到一个函数容器中享受整体的扩缩,也可以将热点的接口随意移出单独部署,这一切都不需要修改代码,只需要动 yml 配置文件即可。

点击查看视频

最后的指南

我们总结了下,避坑指南告诉了你几个事情:

  1. 避免提前选择平台,专注于开发
  2. 避免新造轮子,复用传统能力
  3. 避免平台测试,提前本地调试
  4. 避免额外收费,尽可能使用免费方案

就这样,最后我们避开了各种坑,也没有花特别额外的钱(16块买了个域名),就完成了一些简单的 Web 接口(应用),降低了成本(走上了褥社会主义平台羊毛的道路)。

midway faas 是一个帮前端入门 Serverless 的框架,也是未来能力协同,生产上云的框架,这些避坑的处理只是其中的一小部分,他的完整能力其实更强,提供了更多传统的依赖注入,装饰器自定义,业务配置管理,组件化等能力,甚至还有自定义运行时,私有化部署等方案,未来也将一一展现给大家。

我们希望 "Midway will always be with you"。

仓库:https://github.com/midwayjs/midway-faas <-- 戳戳 Star

文档:https://www.yuque.com/midwayjs/faas

最近阿里云云工作台已经将 midway faas 的一些示例做成了云上版本,也对开发进行了深度定制,既有 Web 栈应用,也有 SSR 示例,都只需要点选即可搭建完成,用传统方式开发,支持扩展能力,又有函数接口的灵活,还不花钱,大家还在等什么呢。

image.png

文末福利

玩转云端开发 7 天训练营

提前享受云时代的原生开发环境,Serverless 研发从入门到精通,连续 7 天,每天一个直播,阿里专家手把手教你利用阿里云云开发平台 get 云端开发新技能。0 门槛打开浏览器就可以开发,最快 1 分钟搭建个人网站,免费开发还送代金券、天猫精灵等多重好礼!

识别下方二维码马上入群学习,或点击链接马上参加:

image.png

等等,福利还没停!关注下方公众号转发文章即参与抽取天猫精灵!


image.png
关注「Alibaba F2E」
把握阿里巴巴前端新动向

相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
相关文章
|
6月前
|
缓存 前端开发 jenkins
Serverless 应用引擎产品使用合集之前端的项目部署在镜像里时,页面总是自动刷新,是什么导致的
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
2月前
|
缓存 前端开发 JavaScript
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
|
2月前
|
JavaScript 前端开发 Serverless
前端全栈之路Deno篇:Deno2.0与Bun对比,谁更胜一筹?可能Deno目前更适合serverless业务
在前端全栈开发中,Deno 2.0 和 Bun 作为新兴的 JavaScript 运行时,各自展现了不同的优势。Deno 2.0 重视安全性和多平台兼容性,尤其是对 Windows 的良好支持和原生 TypeScript 支持;而 Bun 则以卓越的性能和简便的开发体验著称,适合快速迭代的小型项目。两者在不同场景下各具特色,Deno 更适合企业级应用和serverless,Bun 则适用于追求速度的项目。
253 1
|
2月前
|
缓存 前端开发 Serverless
前端技术新趋势:从PWA到Serverless架构
【10月更文挑战第1天】前端技术新趋势:从PWA到Serverless架构
57 3
|
4月前
|
前端开发 安全 Serverless
中后台前端开发问题之云服务商在Serverless与低代码融合如何解决
中后台前端开发问题之云服务商在Serverless与低代码融合如何解决
42 0
|
7月前
|
前端开发 JavaScript 小程序
亚马逊云科技 Build On -Serverless低代码平台初体验-快速完成vue前端订单小程序
亚马逊云科技 Build On -Serverless低代码平台初体验-快速完成vue前端订单小程序
100 0
|
移动开发 缓存 监控
基于 Serverless 的大前端轻研发平台
基于 Serverless 的大前端轻研发平台
255 0
|
前端开发 Serverless
Serverless 服务中的前端解决方案——总结
Serverless 服务中的前端解决方案——总结自制脑图
130 0
Serverless 服务中的前端解决方案——总结
|
前端开发 Serverless
Serverless 服务中的前端解决方案——给函数预热
Serverless 服务中的前端解决方案——给函数预热自制脑图
158 0
Serverless 服务中的前端解决方案——给函数预热
|
前端开发 Serverless
Serverless 服务中的前端解决方案——执行上下文重用
Serverless 服务中的前端解决方案——执行上下文重用自制脑图
104 0
Serverless 服务中的前端解决方案——执行上下文重用

热门文章

最新文章

相关产品

  • 函数计算