关于前端:结合阿里云-FC-谈谈我对-FaaS-的理解

这是第 76 篇不掺水的原创，想获取更多原创好文，请搜寻公众号关注咱们吧~ 本文首发于政采云前端博客：联合阿里云 FC 谈谈我对 FaaS 的了解

进入主题之前，先从背景简述下最近前端界的热点词汇 Serverless，其实，Serverless 这个概念在其余畛域曾经提出来很久了。

Serverless

概念

Serverless 直译为无服务器，代表一种 无服务器架构 （也被称为“ 无服务器计算 ”），并不示意不须要物理服务器，而是指不须要关注和治理服务器，间接应用服务即可，其实就是一种 服务外包 或者说 服务托管，这些服务由第三方供应商提供。

具体来说，Serverless 就是指服务端逻辑由开发者实现，运行在无状态的计算容器中，由 事件驱动 ，齐全 被第三方治理 ，而业务层面的状态则记录在 数据库或存储资源 中。

目前国内一些大型公司如阿里、腾讯、滴滴都曾经将 Serverless 逐渐在业务中落地（案例分享：2020.06.19 ServerlessDays · China Online）。

Serverless 与 FaaS 的分割

Serverless = FaaS+BaaS，是目前界内比拟公认的定义：

• FaaS（Function as a Service）：函数即服务

  • 负责 服务端业务逻辑场景，须要开发者本人实现，服务的粒度比微服务更小，小到以函数为单位
  • 事件驱动 的 Serverless 服务，毫秒级弹性伸缩
  • 无奈进行内存或数据共享，是 无状态的
  • 无需运维，部署、运维等都由云平台提供

• BaaS（Backend as Service）：后端即服务

  • 负责 通用服务场景，不须要开发者本人开发，由云厂商提供，比方数据库、身份验证、音讯队列、对象存储等服务
  • 是 有状态 的

笔者认为，单看 FaaS 或者 BaaS，都是一种 Serverless，只是个别咱们残缺的利用须要两者联合能力实现。

好，上面正式介绍 FaaS。

FaaS

作为一个前端，咱们素日里很难接触到服务器、运维方面的操作。假如当初给你一个工作，让你本人开发一个有前后端交互的利用，并从 0 到 1 进行部署，是不是感觉光靠本人基本搞不定，这个工作有点难。

传统利用的部署，咱们须要做很多工作：筹备服务器、配置环境、购买域名、配置 nginx、……。利用公布之后，咱们还要思考运维的问题，线上监控，扩缩容，容灾等等等等。

当初，咱们使用 FaaS 去开发部署的话，以上都不必思考，只须要专一于业务逻辑开发即可，因为 其它所有都托管给 FaaS 平台 帮咱们解决了。

概念

FaaS 是无服务器计算的一种模式。通过 FaaS，能够疾速构建任何类型的利用和服务，它具备开发麻利个性、主动弹性伸缩能力、免运维和欠缺的监控设施。因而：

• 开发者只需专一于业务逻辑开发，无需治理服务器、运行环境等 IT 基础设施
• FaaS 平台会为咱们筹备好计算资源，以 弹性、牢靠的形式运行咱们的代码，实现毫秒级 弹性伸缩，轻松应答峰值压力
• 用户只需依据函数的理论执行工夫 按量付费

因而，相比传统开发模式，FaaS 大大提高了开发和交付效率，是将来云服务倒退的大趋势。自 2014 年始，在 AWS Lambda 之后，Google、IBM、Microsoft、阿里、腾讯、华为等国内外云厂商相继推出云函数计算平台 FaaS。

疾速创立 FaaS 利用

函数计算开发方式有很多种，比方：Fun 工具、函数计算 FC 平台、Serverless VScode、云开发平台。本文借助阿里云函数计算平台，通过其提供的模版疾速创立、部署一个 Web 利用，向大家更分明地展现 FaaS 是什么。

本文间接基于模版创立，用户也能够抉择本人上传利用代码间接部署 Web 利用。

咱们抉择有前后端交互、数据增删改查等行为的 Todo List 利用 ，它是一个 前后端一体化（前后端代码共属一个我的项目中开发、调试、部署，高效且节俭资源）FaaS 利用。

服务 / 函数

服务

一个利用能够拆分为多个服务。从资源应用维度登程，一个服务能够由多个函数组成。先创立服务，再创立函数。

能够看到 TodoList 利用部署胜利后创立好的服务，咱们能够对该服务进行配置、删除、查看指标等操作，还能够对其下的函数进行配置、删除。

函数

函数是系统调度和运行的单位。函数必须从属于服务，同一个服务下能够有多个函数，同一个服务下的所有函数共享雷同的设置，例如服务受权、日志配置，但彼此互相独立，互不影响。

函数代码

FaaS 对 多种语言 都有良好的支持性，比方阿里云反对 Node.js、Python、PHP、Java 等等，开发者能够应用本人相熟的语言，依据平台提供的函数接口模式编写代码。这也意味着，团队合作时，大家能够利用多种语言混合开发简单利用。

点击代码执行，能够看到这里有一个在线编辑器，外面就是模板生成的代码，能够在此处进行运行、调试。该利用前端页面用 React 实现，后端服务基于 Node 的 Express 框架。

函数入口

template.yml是咱们的 函数信息配置文件，通知云厂商咱们的代码入口函数、触发器类型等操作。

函数入口为 src/index.handler，即src/index.js 服务端代码文件中的 handler 办法，该文件代码如下：

const {Server} = require('@webserverless/fc-express')
const express = require('express');
const fs = require('fs');
const path = require('path');
const bodyParser = require('body-parser');

// initial todo list
let todos = [
  {
    id: '123',
    text: 'Go shopping',
    isCompleted: false,
  },
  {
    id: '213',
    text: 'Clean room',
    isCompleted: true,
  },
];


const staticBasePath = path.join('public', 'build');

const app = express();

// index.html
app.all("/", (req, resp) => {resp.setHeader('Content-Type', 'text/html');
  resp.send(fs.readFileSync('./public/build/index.html', 'utf8'));
});

// 动态资源文件：js、css、图片
// static js resources  
app.all('/*.js', (req, resp) => {const filePath = path.join(staticBasePath, req.path);
  resp.setHeader('Content-Type', 'text/javascript');
  resp.send(fs.readFileSync(filePath, 'utf8'));
});

// static css resources
app.all('/*.css', (req, resp) => {const filePath = path.join(staticBasePath, req.path);
  resp.setHeader('Content-Type', 'text/css');
  resp.send(fs.readFileSync(filePath, 'utf8'));
});

// static svg resources
app.all('/*.svg', (req, resp) => {const filePath = path.join(staticBasePath, req.path);
  resp.setHeader('Content-Type', 'image/svg+xml');
  resp.send(fs.readFileSync(filePath, 'utf8'));
});

// static png resources
app.all('/*.png', (req, resp) => {const filePath = path.join(staticBasePath, req.path);
  resp.setHeader('Content-Type', 'image/png');
  resp.send(fs.readFileSync(filePath, 'utf8'));
});

app.all('/manifest.json', (req, resp) => {const filePath = path.join(staticBasePath, req.path);
  resp.setHeader('Content-Type', 'application/json');
  resp.send(fs.readFileSync(filePath, 'utf8'));
});

// 增删改查对应的 api 接口
// list api
app.get('/api/listTodos', (req, resp) => {resp.send(JSON.stringify(todos));
});

// create api
app.get('/api/createTodo', (req, resp) => {const { todo: todoStr} = req.query;
  const todo = JSON.parse(todoStr);
  todos.push({
    id: todo.id,
    text: todo.text,
    isCompleted: todo.isCompleted,
  });
  resp.send(JSON.stringify(todos));
});

// update api
app.get('/api/updateTodo', (req, resp) => {const { todo: todoStr} = req.query;
  const targetTodo = JSON.parse(todoStr);
  const todo = todos.find((todo) => todo.id === targetTodo.id);
  if (todo) {
    todo.isCompleted = targetTodo.isCompleted;
    todo.text = targetTodo.text;
  }
  resp.send(JSON.stringify(todos));
});

// remove api
app.get('/api/removeTodo', (req, resp) => {const { id} = req.query
  // TODO: Implement methods to filter todos, filtering out item with the same id
  // todos = todos.filter();
  const todosIndex = todos.findIndex((todo) => todo.id === id);
  if (todosIndex !== -1) {todos.splice(todosIndex, 1);
  } 
  resp.send(JSON.stringify(todos));
});

const server = new Server(app);

// 向外裸露了 http 触发器入口
// http trigger entry
module.exports.handler = function(req, res, context) {server.httpProxy(req, res, context);
};

能够看到，咱们不须要本人起服务，FaaS 平台会为咱们治理。这个文件，有两个重要的局部：

• 1. 函数入口 handler，也是 HTTP 触发器入口，下文会具体介绍

// http trigger entry
module.exports.handler = function(req, res, context) {server.httpProxy(req, res, context);
};

• 2.Web Service 和 api，通过路由调用相应的服务，比方申请门路为 ”/” 时，会返回 Web 利用的 html 页面；申请 ”/api/*” 时，调用接口返回数据

触发器

后面说过，FaaS 是一种 事件驱动 的计算模型，即函数的执行是由事件驱动的，没有事件触发，函数就不运行。与传统开发模式不同，函数不须要本人启动一个服务去监听数据，而是通过绑定一个（或者多个）触发器。

触发器 就是触发函数执行的形式，咱们须要为函数创立指定的触发器。

FaaS 利用的触发器有多种（不同云厂商的触发器会有所区别），但根本都反对 HTTP、对象存储、定时工作、音讯队列等触发器，其中 HTTP 触发器是最常见的。

以阿里云函数计算为例，介绍几个代表类型：

触发器类型

开发者在调试时，如果不配置触发器，也能够应用控制台、命令行工具 或者 SDK 等形式间接调用函数执行。

咱们点开 TodoList 的触发器，能够看到创立的 HTTP 触发器，WEB 用户通过 HTTP 申请即可触发函数的执行。

留神这里的提醒语：关上链接，会下载一个 html 附件，这时咱们关上，因为找不到动态资源文件，利用不能失常运行。

能够点击 自定义域名 去用平台为咱们创立的 长期域名 关上：

能够看到，页面和性能都失常了。咱们查看、新增、更新、删除，在控制台里能够看到发动的申请和返回后果

HTTP 触发器

该利用 HTTP 触发器的入口函数 模式如下：

// http trigger entry
module.exports.handler = function(req, res, context) {server.httpProxy(req, res, context);
};

配置 HTTP 触发器的函数能够通过 HTTP 申请被触发执行。此时函数能够看做一个 Web Server，对 HTTP 申请进行解决，并将处理结果返回给调用端。

拜访 html 页面、申请动态资源文件，以及申请接口，都是通过 http 申请去触发相应函数的执行。

能够在这里进行调试：

FaaS 框架

目前市面上曾经有一些较为成熟的开源 FaaS 框架，比方 OpenFaaS、funktion、Kubeless、Fission 等等，本文向大家介绍阿里云往年正式公布的 Midway FaaS 框架，它是用于构建 Node.js 云函数的 Serverless 框架，它提供了函数的本地 开发、调用、测试整个链路。它能够开发新的 Serveless 利用，也提供计划将传统利用迁徙至各云厂商的云函数。阿里外部曾经应用一年多了。

咱们能够使用脚手架 @midwayjs/faas-cli 提供的能力在 本地疾速创立、调试、mock、部署 一个 FaaS 利用。Serverless 有一个很大的 弊病 ，就是 和云服务商平台强绑定 ，然而 Midway Serverles 是防平台锁定的，它能 一套代码可能运行在不同的平台和运行时之上 ，Midaway faas 的部署能够 跨云厂商，默认部署到阿里云 FC，咱们也能够批改部署到其它平台，如腾讯云 SCF、AWS Lambda。

Midway FaaS 体系也与云工作台进行了联合，应用了和本地同样的能力，这里抉择登录阿里云开发平台，用示例库模版再次创立一个 TodoList 利用进行演示，只不过这个是用 Midway FaaS 构建的。

代码目录构造 能够简略抽取为：

|-- src
|        |-- apis // 函数代码
|                |--    config // 针对不同环境创立配置文件
|                |--    configuration.ts // 扩大能力配置
|                |--    index.ts // 函数代码入口文件，外面包含多个函数
|        |-- components // 前端组件
|        |-- index.tsx // 前端页面入口文件（该利用前端基于 React，若是 Vue，则是 App.vue）|-- f.yml // 函数信息配置文件

f.yml 配置文件

service: serverless-hello-world

// 服务提供商
provider:
  name: aliyun
  runtime: nodejs10 // 运行时环境及版本信息

// 函数具体信息（包含函数入口、触发器等等）functions:
  render:
    handler: render.handler 
    events:
      - apigw:
          path: /*
  list:
    handler: todo.list 
    events:
      - apigw:
          path: /api/list
  update:
    handler: todo.update
    events:
      - apigw:
          path: /api/update
  remove:
    handler: todo.remove
    events:
      - apigw:
          path: /api/remove
  add:
    handler: todo.add
    events:
      - apigw:
          path: /api/add
          
// 构建的配置信息
package:
  include:
    - build // 打包目录
  artifact: code.zip // 打包名称

函数代码中一个函数对应一个 api 接口：

装置依赖后，咱们npm run dev，阿里云为咱们创立了一个长期域名用于调试：

能够看到申请的这些资源和接口数据：

一键部署，十分不便。

免费规范

传统利用咱们的服务是始终占用资源的，而 FaaS 在资源闲暇时不免费，按需付费，能够大大节省开支。

免费规范：

• 调用函数次数
• 函数运行工夫

因为每月都有收费额度，所以在集体日常应用时根本不须要付费。

（PS：但还是要特地留神，部署的利用不必时肯定要及时下线，否则可能会收取费用，还有开明的服务、性能也肯定要认真注意一下免费规范，比方可能想解决冷启动的问题，会开明预留实例性能，如果咱们不必的话，肯定要留神手动开释，否则即便它没有执行任何申请，也会从启动开始一直免费，费用可不小）

冷启动

再说说 FaaS 目前备受关注的一个问题——冷启动。

FaaS 中的函数 首次调用 、 更新函数或长时间未调用时从新调用函数 时，平台会初始化一个函数实例，这个过程就是 冷启动，均匀耗时在几百毫秒。

提早问题

FaaS 因为冷启动，不能立刻调用函数，调用提早会给利用性能带来影响，针对冷启动的提早问题，各大云服务商十分关注，正在想方法一直优化。

与冷启动相响应的是热启动，热启动 指函数调用时不必从新创立新的函数实例，而是间接复用之前的函数实例。因为 FaaS 函数若在一段时间内没有被事件触发运行，云服务商就会回收运行函数的容器资源，销毁函数实例，所以，在未被回收的这段时间内再次调用函数就是热启动；销毁后，从新创立就是冷启动。

提早起因

冷启动具体做了哪些操作呢？以阿里云为例，大抵包含了调度实例、下载解压代码、启动容器、启动运行时，这一过程完结后，函数才开始执行。所以冷启动的启动耗费工夫受到很多因素的影响：

• 编程语言

  有专门钻研比照，不同语言的冷启动工夫不同

• 代码大小

​ 这个过程在冷启动过程中绝对比拟耗时，可能几十毫秒，也可能几秒，看代码体积大小

• 容器创立

  这个过程的耗时取决于云服务商

• 配置等

如何优化

各大云厂商都曾经有了一些优化计划的最佳实际，须要开发者和云厂商共同努力：

• 缩小代码体积：

  • 开发者能够通过精简代码，删除无用依赖，减速下载函数代码过程
  • 比方腾讯云对代码做了两级的缓存，能够无效升高下载代码工夫
• 资源复用，缩短函数执行工夫
• 抉择冷启动工夫较少的语言
• 抉择适合的内存：函数内存越大，冷启动体现越优
• 防止不必要的配置

• 升高冷启动频率

  • 应用定时触发器定时拜访函数，这样能够避免函数实例一段时间没被应用被销毁
  • 应用 initializer 函数入口，函数计算会异步调用初始化接口，打消初始化用户代码的工夫
• 预留实例

执行时长

FaaS 还有一个局限性，就是平台会限度函数的执行工夫，超出工夫后执行代码的过程会被强行销毁，所以 FaaS 不适宜长时间运行的利用。例如 AWS Lambda 函数不容许运行超过 15 分钟（以前只有 5 分钟），如果超过就会中断。应用时，应该依据本人的预期执行工夫来设置超时值，避免函数的运行工夫超出预期，并且倡议调用函数的 client 端的 timeout 要稍稍大于函数设置的 timeout，这样能力避免执行环境不会意外退出。

FaaS 工作流程

置信大家读到这里，应该差不多能够明确 FaaS 的工作流程了，咱们总结一下：

• 开发者编写 函数代码 ，能够在线编辑或者本地上传，实现后，FaaS 平台为咱们部署利用，创立 函数服务
• 客户端通过设置的 触发器 ，告诉 函数服务
• 若存在 函数实例 ，则间接在该执行环境中调用函数；没有，则先通过 冷启动（调度实例、下载代码、启动实例、启动运行时），再执行函数
• 函数依据用户申请量动静扩容响应申请，将内容返回给用户。函数执行完后，若一段时间内无事件触发，函数实例就会被销毁，FaaS 利用疾速缩容到 0

对前端的影响

Serverless 当初这么热，它对前端到底有什么影响呢？

整个实际下来发现，FaaS 帮咱们前端扩大了能力边界，作为前端，咱们本人一个人也能疾速实现前后端开发以及部署工作，齐全不必关怀服务器以及运维方面咱们不善于的问题。前端也有机会参加服务端业务逻辑开发，更深刻业务，发明更大的价值。

结语

本文联合阿里云 FC、Midway FaaS 框架疾速创立 FaaS 利用的实际，向大家展现了什么是 FaaS，FaaS 的工作流程，优缺点，展示了 FaaS 颠覆传统开发模式的魅力。当初 FaaS 的利用场景十分宽泛，Web 利用及小程序等挪动利用、AI 及机器学习、物联网、实时数据处理等等。Serverless 时代，生产效率大大提高，每个人都有更多机会发明有限可能，让咱们一起为将来加油！

参考文章

Serverless Handbook——无服务架构实际手册

阿里云函数计算应用文档

Midway Serverless 应用文档

腾讯云函数计算冷启动优化实际

Serverless Architectures(译文)—(Martin Fowler)

招贤纳士

政采云前端团队（ZooTeam），一个年老富裕激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 40 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员形成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外，还在物料体系、工程平台、搭建平台、性能体验、云端利用、数据分析及可视化等方向进行技术摸索和实战，推动并落地了一系列的外部技术产品，继续摸索前端技术体系的新边界。

如果你想扭转始终被事折腾，心愿开始能折腾事；如果你想扭转始终被告诫须要多些想法，却无从破局；如果你想扭转你有能力去做成那个后果，却不须要你；如果你想扭转你想做成的事须要一个团队去撑持，但没你带人的地位；如果你想扭转既定的节奏，将会是“5 年工作工夫 3 年工作教训”；如果你想扭转原本悟性不错，但总是有那一层窗户纸的含糊… 如果你置信置信的力量，置信平凡人能成就不凡事，置信能遇到更好的本人。如果你心愿参加到随着业务腾飞的过程，亲手推动一个有着深刻的业务了解、欠缺的技术体系、技术发明价值、影响力外溢的前端团队的成长历程，我感觉咱们该聊聊。任何工夫，等着你写点什么，发给 ZooTeam@cai-inc.com