浅出:让 React 插上 Serverless 翅膀,飞向云端-阿里云开发者社区

开发者社区> 云开发平台> 正文

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

简介: 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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
云开发平台
使用钉钉扫一扫加入圈子
+ 订阅

云开发平台是面向开发者打造的一站式、全云端的开发平台,打开浏览器就可以开发、调试、上线,所测即所得,并结合无服务器的模式重新定义云原生时代的研发工作方法论。

官方博客
官网链接