之前不少同学一直说,什么时候,能有一个结合前端的示例,这就来了。
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 栈应用就搭建完成了,同时还提供了百万代金券补贴,很诱人!!