浅出：让 React 插上 Serverless 翅膀，飞向云端

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

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

一体化来了

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

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

前后端一体，开发/调试/发布更加简单了

基于函数的高密度部署更加节省机器资源

不需要投入很多精力搞运维

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

开始浅出

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

$ npm i @midwayjs/faas-cli -g

我们将脚手架和示例都加到了 f create 命令中，选择 faas-react 示例。（新菜单，好不好看，快夸我。)

然后，敲回车，数个 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/

，整体效果如下。

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

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

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

部署

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

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

小结

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

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

https://workbench.aliyun.com/camp

转自知乎

https://zhuanlan.zhihu.com/p/142343898