创建项目

使用前请确认 Node 版本 >= 10，推荐使用最新版 Node.js（12.x 或 14.x）

如果未安装过，请先安装 @midwayjs/faas-cli 工具。

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

生成示例代码

使用命令生成示例代码。

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

有点大，网慢可能需要等待一下。

  1. ➜  applications of create --template-package=@midwayjs-examples/faas-with-react
  2. Generating boilerplate...
  3. ✔ The directory where the service should be created · react_xxx
  4. 1...
  5. 2...
  6. 3...
  7. Enjoy it...
  9. Successfully generated boilerplate for template: "@midwayjs-examples/midway-hooks-react"
  11. Usage:
  12.     - cd react_xxx
  13.     - npm install
  14.     - npm run test
  15.     - and read README.md
  17. Document ❤ Star: https://github.com/midwayjs/midway

本地开发

整个示例代码结构如下。

  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 ，默认发布到阿里云，也可以自行修改到其他平台。