云端一体化工程

优质

小牛编辑

128浏览

2023-12-01

随着 Serverless 技术的兴起和成熟，越来越多的应用选择云+端一体化的研发模式，云即以函数计算为代表的 Serverless 计算服务，端即小程序、Native、Web、IoT 等多端应用。Rax 工程通过 build-plugin-rax-faas 插件打通 Rax 与阿里云的 FaaS 能力，提供云端一体化的研发能力。

前置依赖

build-plugin-rax-faas 基于阿里云的函数计算服务，因此需要先安装以下依赖：

docker：用于开发环境下运行函数，函数将在 docker 容器中运行，安装方式可参考 docker docs。

除此之外，还需要注册阿里云账号并开通 Serverless 服务，开通地址见：阿里云/函数计算。

新建云端一体化工程

在使用 rax-cli 创建 Rax 应用的时候，在选择应用功能的时候选择 Serverless solution 即可，在后续流程中，需要填写您的阿里云账号 ID 及 FaaS 服务地区，这两个参数将写入 build.json 的 build-plugin-rax-faas 配置中：

~/Projects/projects
npm init rax myApp
What's your project typeApp (Build application that works multi-platform)
What's your application typeStandard App (The complete solution for application that works multi-platform)
Do you want to build to these targetsweb, weex
Do you want to enable these featuresserverless solution (FaaS)
What's author's namerax
What's alibaba cloud account idmyAliyunId
What's serverless regioncn-hangzhou

阿里云账号 ID 非登录账号，可在阿里云控制台右上角 -> 基本资料 -> 安全设置 -> 账号 ID 中查看。

serverless region 为当前部署的函数所在地域，如 cn-hangzhou。更多详情，请参阅地域与可用区。

初始化完成后，npm install 即可开始本地开发。

已有项目升级为云端一体化工程

安装 faas 服务插件 build-plugin-rax-faas，并在 build.json 中添加该插件配置，相关配置可在目录结构与插件配置中查看：

{
  "plugins": [
    [
      "build-plugin-rax-app",
      {
        "targets": ["web", "weex"]
      }
    ],
    [
      "build-plugin-rax-faas",
      {
        // config...
      }
    ]
  ]
}

目录结构与插件配置

如果使用 rax-cli 创建的工程，默认会添加一个 src/api 目录，并在该目录下创建 demo 云函数 user/index.js，除此之外与其他工程并无差异，Rax 官方推荐将所有云函数均置于在 src/api 目录下。

插件配置如下：

{
  "plugins": [
    [
      "build-plugin-rax-app",
      {
        "targets": ["web", "weex"]
      }
    ],
    [
      "build-plugin-rax-faas",
      {
        "aliyunConfig": {               // 云函数服务相关配置
          "id": "xxxxxxxx",             // [必选] 阿里云账号 ID，可在阿里云控制台右上角->基本资料->安全设置->账号 ID 中查看
          "region": "cn-hangzhou"       // [必选] 云函数部署所在地区
        },
        "functionGroup": {              // 云函数组配置
          "name": "raxTest",            // 云函数函数组名称 
          "root": "src/api",            // 云函数所在根路径
          "functions": {                // 云函数配置
            "user": {                   // 函数名
              "path": "user"            // 函数路径，相对于 functionGroup.root
            },
          }
        }
      }
    ]
  ]
}

开发

build-plugin-rax-faas 支持 mock 云函数运行环境，但依赖 docker 和 @alicloud/fun，请确保 docker 处于运行状态。

通过以下命令即可开启 devServer：

$ npm start

如果是首次启动，需要下载 docker 镜像，请耐心等待。需要填写阿里云 access key id 和 access key secret。在阿里云控制台的右上角 -> 小人头像 -> accesskeys 即可获取。

在前端应用中，我们通常使用 AJAX 方式触发云函数，请求 URL 前缀可通过全局变量 __FAAS_API__ 获取，例如：

fetch(`${__FAAS_API__}/user`)
      .then(res => {
        return res.json();
      })
      .then(data => {
        console.log(data);
      });

构建

绝大部分 Serverless 服务商都限制云函数的包大小，如 AWS 和阿里云都要求云函数 zip 包小于 50MB，因此，build-plugin-rax-faas 在构建时会提取出云函数 require 进来的依赖，以减小整体包大小。

执行以下命令即可构建：

$ npm run build

云函数构建产物置于 build/serverless 目录下，每个云函数都在独立的目录中，并有独立的 node_modules 文件夹。

├── template.yml           // 云函数配置文件，请勿手动更改
├─── user                   // 云函数 user
│   ├── index.js
│   └── node_modules
└── post                   // 云函数 post
    ├── index.js
    └── node_modules

部署

云函数可直接使用 @alicloud/fun 工具部署：

$ cd build/serverless
$ npx fun deploy