浅出:让 React 插上 Serverless 翅膀,飞向云端

本文涉及的产品
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
函数计算FC,每月15万CU 3个月
简介: Midway FaaS 不仅仅在函数侧提供了能力支持,也在前端部分整合了体验。经过我们一段时间的实践,发现前端代码 + FaaS 代码真是天然的绝配,比传统应用轻量许多,同时, 由于函数本身的特性,也更容易和前端配合起来。Midway FaaS已经接入阿里云云开发平台,可以在上面简单的发发发,一个 Web 栈应用就搭建完成了,同时还提供了百万代金券补贴。

之前不少同学一直说,什么时候,能有一个结合前端的示例,这就来了。

Midway FaaS 不仅仅在函数侧提供了能力支持,也在前端部分整合了体验。经过我们一段时间的实践,发现前端代码 + FaaS 代码真是天然的绝配,比传统应用轻量许多,同时, 由于函数本身的特性,也更容易和前端配合起来。

一体化来了

首先,我们介绍一下一体化的概念,什么是一体化呢?我们所描述的一体化,就是前后端代码,在同一个项目中开发,调试,测试和部署,让整个流程在统一的开发形态中完成。

那么,为什么要做 Serverless 体系的一体化呢?我们这里给出了一些答案。

前后端一体,开发/调试/发布更加简单了
基于函数的高密度部署更加节省机器资源
不需要投入很多精力搞运维

这一回,我们的一体化拿 React 举例。

开始浅出

首先,安装 Midway FaaS 的 @midwayjs/faas-cli 工具。

$ npm i @midwayjs/faas-cli -g
我们将脚手架和示例都加到了 f create 命令中,选择 faas-react 示例。(新菜单,好不好看,快夸我。)

image.png

然后,敲回车,数个 1, 2, 3 ,示例就 down 下来啦。

本地开发和调试

整个示例代码是从 create-react-app 创建而来,加上了我们 midway faas 特有的一体化开发结构,树状结构如下。

➜ react_xxx tree
.
├── README.md
├── f.yml # 函数配置文件
├── package.json
├── public
│ ├── favicon.ico
│ ├── index.html
│ ├── logo192.png
│ ├── logo512.png
│ ├── manifest.json
│ └── robots.txt
├── src # react 源码目录
│ ├── App.test.tsx
│ ├── App.tsx
│ ├── Detail.tsx
│ ├── Home.tsx
│ ├── Layout.tsx
│ ├── List.tsx
│ ├── apis # 函数代码目录
│ │ ├── config
│ │ │ └── config.default.ts
│ │ ├── configuration.ts
│ │ └── index.ts
│ ├── common.css
│ ├── home.css
│ ├── index.css
│ ├── index.tsx
│ ├── layout.css
│ ├── logo.svg
│ ├── react-app-env.d.ts
│ ├── serviceWorker.ts
│ ├── setupProxy.js # 自定义 webpack dev server
│ └── setupTests.ts
└── tsconfig.json # ts 编译配置

4 directories, 29 files

整个结构以前端视角为主,函数的代码作为 api 放在了 src/apis 目录中。(一体化的完整思考我们将在后面的系列文章介绍)

然后 npm install 等步骤我们就略过不细讲了。

我们在本地可以通过 npm run dev 来启动看一下效果,启动时会自动发一个请求到函数端拿数据,渲染到页面,访问 http://127.0.0.1:8080/ ,整体效果如下。

image.png

切换顶部的 Tab 区域,我们设计了三个 HTTP 接口,启动后会分别请求本地的三个函数。

在 midway faas 体系中,函数是通过 Class 的方法来承载。

通过 midway faas 的包装,你可以简单的返回 html,文件,设置响应头,乃至配置 koa 中间件。你可以把逻辑进行组合复用,也可以对整个流程进行重组;由于有生命周期的存在,你也可以在函数中使用初始化连接,加载依赖;也可以按环境加载熟悉的配置文件,注入到任意逻辑中。

部署

这个示例,在部署到云平台前,需要提前进行构建,执行 npm run build ,前端代码将会构建到 build 目录,函数端已经配置了该目录地址,会自动配置和加载。

使用 f deploy 命令,默认会发布到阿里云,由于 midway faas 也提供了国内多云平台的支持,同时也可以自行修改到其他平台,绑定域名之后即可访问。

小结

恭喜,自此,你获得了生产力提升技能,快来尝试一下吧。

此开发示例已经提前接入了阿里云云开发平台,可以在上面简单的发发发,一个 Web 栈应用就搭建完成了,同时还提供了百万代金券补贴,很诱人!!

image.png

转自知乎
https://zhuanlan.zhihu.com/p/142343898

相关实践学习
【文生图】一键部署Stable Diffusion基于函数计算
本实验教你如何在函数计算FC上从零开始部署Stable Diffusion来进行AI绘画创作,开启AIGC盲盒。函数计算提供一定的免费额度供用户使用。本实验答疑钉钉群:29290019867
建立 Serverless 思维
本课程包括: Serverless 应用引擎的概念, 为开发者带来的实际价值, 以及让您了解常见的 Serverless 架构模式
相关文章
|
6月前
|
人工智能 Serverless 数据安全/隐私保护
云端服务器应用实践:函数计算X 通义千问快速部署 AI 个人助手应用
云端服务器应用实践:函数计算X 通义千问快速部署 AI 个人助手应用
390 2
|
弹性计算 关系型数据库 MySQL
个人博客的云端之旅:体验ECS与云数据库RDS MySQL Serverless
借助阿里云的云服务器ECS和RDS MySQL Serverless,搭建属于自己的云端博客。
188 40
|
3月前
|
自然语言处理 Serverless Docker
量化交易大揭秘:如何将TA-Lib神兵利器部署于云端函数计算,让策略飞升!
【8月更文挑战第8天】在量化交易中,TA-Lib作为技术分析库备受青睐,支持多语言包括Python。本教程指导如何将其移植至函数计算平台,实现云端交易策略。首先安装Python与TA-Lib;接着选择云服务商并创建实例。确认TA-Lib与平台Python版本兼容,必要时构建自定义运行时。使用`pip`安装TA-Lib并打包依赖。编写函数计算代码示例,如计算移动平均线。部署代码与依赖至平台,定制Dockerfile以支持自定义运行时。最后,通过平台测试功能验证功能正确性。完成移植后,即可享受Serverless架构的自动扩展与成本效益优势。
60 4
|
3月前
|
Cloud Native Java Serverless
一键上天!如何将Spring PetClinic瞬间迁移到云端函数计算平台
【8月更文挑战第8天】在现代云原生开发中,将Spring应用迁移到Serverless环境正成为趋势。本文通过对比传统部署与函数计算,指导如何快速部署Spring PetClinic应用。传统部署需手动配置服务器和中间件,而函数计算则免除了这些步骤,仅需上传代码。首先,准备好Spring PetClinic源码或jar包;接着选择函数计算平台,本文以阿里云为例;随后对应用进行适配,并使用Maven构建部署包;登录阿里云控制台上传jar包并配置HTTP触发器;最后测试应用确保正常运行。
43 3
|
5月前
|
弹性计算 运维 监控
函数计算产品使用问题之如何在阿里云端stable-diffusion训练lora
函数计算产品作为一种事件驱动的全托管计算服务,让用户能够专注于业务逻辑的编写,而无需关心底层服务器的管理与运维。你可以有效地利用函数计算产品来支撑各类应用场景,从简单的数据处理到复杂的业务逻辑,实现快速、高效、低成本的云上部署与运维。以下是一些关于使用函数计算产品的合集和要点,帮助你更好地理解和应用这一服务。
|
5月前
|
运维 Serverless 网络安全
Serverless 应用引擎产品使用合集之能否用一个顶层函数,在云端动态的增加函数脚本或删除脚本
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
5月前
|
存储 Serverless 文件存储
Serverless 应用引擎产品使用合集之如何加载新模型到云端上
阿里云Serverless 应用引擎(SAE)提供了完整的微服务应用生命周期管理能力,包括应用部署、服务治理、开发运维、资源管理等功能,并通过扩展功能支持多环境管理、API Gateway、事件驱动等高级应用场景,帮助企业快速构建、部署、运维和扩展微服务架构,实现Serverless化的应用部署与运维模式。以下是对SAE产品使用合集的概述,包括应用管理、服务治理、开发运维、资源管理等方面。
|
12月前
|
运维 物联网 Serverless
在函数计算FC云端,可以使用SD来训练LORA模型
在函数计算FC云端,可以使用SD来训练LORA模型
692 8
|
Cloud Native Serverless
《闲鱼Serverless云端一体化研发实践》电子版地址
淘系云原生时代的业务研发-闲鱼Serverless云端一体化研发实践
113 0
《闲鱼Serverless云端一体化研发实践》电子版地址
|
Cloud Native Serverless
《淘系云原生时代的业务研发-闲鱼Serverless云端一体化研发实践》电子版地址
淘系云原生时代的业务研发-闲鱼Serverless云端一体化研发实践
118 0
《淘系云原生时代的业务研发-闲鱼Serverless云端一体化研发实践》电子版地址

热门文章

最新文章

相关产品

  • 函数计算