在 Midway Hooks 中，我们支持了 ICE/React/Vue 等场景。而对于众多的第三方框架，我们也提供了便捷的接入方案。

参考适配案例：

SDK

运行时库

一键安装命令：

  1. npm i @midwayjs/faas @midwayjs/hooks@0.x.x @midwayjs/faas-middleware-static-file -S

工程库

一键安装命令：

  1. npm i @midwayjs/faas-cli-plugin-midway-hooks@0.x.x @midwayjs/hooks-loader@0.x.x @midwayjs/faas-dev-pack -D

前端框架接入指南

函数调用转换为 HTTP 请求

这一步我们是通过 Webpack Loader 实现的。

react-app-wired 示例（基于 Webpack Chain）

  1. module.exports = {
  2.   webpack: function (config, env) {
  3.     config.module.rules.unshift({
  4.       test: /\.(js|mjs|jsx|ts|tsx)$/,
  5.       use: [
  6.         {
  7.           loader: require.resolve('@midwayjs/hooks-loader'),
  8.         },
  9.       ],
  10.     })
  12.     return config
  13.   },
  14. }

函数 Dev Server

这一步是通过为 Webpack Dev Server 增加 express 中间件，拦截函数请求实现的。

React 参考链接：https://github.com/midwayjs/midway-serverless-examples/blob/master/integration/hooks-react/boilerplate/src/setupProxy.js Vue 参考： 参考文档：https://create-react-app.dev/docs/proxying-api-requests-in-development/#configuring-the-proxy-manually

  1. // @ts-ignore: isolated modules error
  2. const { useExpressDevPack } = require('@midwayjs/faas-dev-pack');
  3. const { resolve } = require('path');
  4. const URL = require('url');
  6. module.exports = function (app) {
  7.   app.use(
  8.     useExpressDevPack({
  9.       functionDir: resolve(__dirname, '../'),
  10.       sourceDir: resolve(__dirname, 'apis'),
  11.       // 忽略渲染函数
  12.       ignoreWildcardFunctions: ['render'],
  13.       // 忽略静态文件地址
  14.       ignorePattern: (req) => {
  15.         const { pathname } = URL.parse(req.url);
  16.         return /\.(js|css|map|json|png|jpg|jpeg|gif|svg|eot|woff2|ttf)$/.test(pathname);
  17.       },
  18.     })
  19.   );
  20. };

函数构建配置

在一体化工程里，执行构建时，需要在 package.json 写入配置，并在构建中输出前端的产物。

package.json

  1. + "midway-integration": {
  2. +   "tsCodeRoot": "src/apis",
  3. +   "lifecycle": {
  4. +     "before:package:cleanup": "npm run build"
  5. +   }
  6. + },

ESLint 配置

如果是 React + 默认 React ESLint 配置，需要关闭 react-hooks/rules-of-hooks 规则，避免 ESLint 报错。

Create React App 配置方式

  1. + "eslintConfig": {
  2. +   "extends": "react-app",
  3. +   "rules": {
  4. +     "react-hooks/rules-of-hooks": "off"
  5. +   }
  6. + },

增加后端文件

新建 /src/apis 目录，作为后端代码存放目录。

新增如下文件（点进去链接直接 Copy 即可）：

本地运行

  1. npm start

访问地址 /api/hello，如果有输出 Hello Midway Serverless，则成功接入。

线上部署

运行部署命令，部署后可查看地址。

  1. f deploy