前提

安装 @midwayjs/faas-cli 工具。

  1. $ npm i @midwayjs/faas-cli -g

创建项目

React

  1. f create --template-package=@midwayjs-examples/midway-hooks-react

Vue:

  1. $ f create --template-package=@midwayjs-examples/midway-hooks-vue3

ICE.js:

  1. $ npm init ice ice-app --template @icedesign/scaffold-midway-faas

本地开发（以 React 为例）

整个示例代码结构如下。

  1. ➜  react_xxx tree
  2. .
  3. ├── README.md
  4. ├── config-overrides.js
  5. ├── f.yml                                                                    # 函数配置文件
  6. ├── package.json
  7. ├── public
  8. │   ├── favicon.ico
  9. │   ├── index.html
  10. │   ├── logo192.png
  11. │   ├── logo512.png
  12. │   ├── manifest.json
  13. │   └── robots.txt
  14. ├── src
  15. │   ├── App.test.tsx
  16. │   ├── App.tsx
  17. │   ├── Home.tsx
  18. │   ├── List.tsx
  19. │   ├── apis                                                            # 函数目录
  20. │   │   ├── config
  21. │   │   │   └── config.default.ts
  22. │   │   ├── configuration.ts
  23. │   │   ├── hook
  24. │   │   │   └── useMethod.ts
  25. │   │   ├── lambda                                                # 接口目录                                                            
  26. │   │   │   └── index.ts
  27. │   │   └── render.ts                                            # 页面渲染函数
  28. │   ├── index.css
  29. │   ├── index.tsx
  30. │   ├── logo.svg
  31. │   ├── react-app-env.d.ts
  32. │   ├── serviceWorker.ts
  33. │   ├── setupProxy.js
  34. │   └── setupTests.ts
  35. └── tsconfig.json
  37. 6 directories, 27 files

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

image.png

切换顶部的 Tab 区域，还会请求不同的函数接口。

部署

使用 f deploy ，默认发布到阿里云，也可以自行修改到其他平台。