Serverless 时代前端避坑指南

436次阅读  |  发布于4年以前

每个时代，从来不缺机会。

云原生的浪潮席卷而来，从 14 年到现在，上云的声音就没有停歇过，而如今到了 2020，云厂商都已经准备好了，而前端，是否也准备好踏入这纷争的领域，去拥抱时代给予的蜜糖，亦或者是带刺的玫瑰？

大家都或多或少的在现在的云战场上接收到信息，也不免的去学习，对比各家云平台的功能，甚至还会实际调研，考虑用在自己的产品或者业务中，而阿里在内部经过一年的实践和总结，将 Serverless 和现有框架有机的整合到了一起，同时，希望能简化现有社区的云函数开发。

本篇文章就是交给大家如何避（快）免（速）踩（上）坑（手）。

避坑第一招

而 Web 栈开发框架， 阿里的 Midway 体系也早早在去年就开始了新的尝试。从传统 Web 到 Serverless 体系的转换，没有那么容易，看起来很干净整洁的代码，在 Severless 体系中甚至变为了枷锁，步步桎梏。

俗话说，聚是一团火，散是满天星，就拿简单的 Web 请求来说，大家想的是，我一个接口变为一个函数，非常简单。我一个应用，根据路由，可能会分为 1，2，3，4 ... 100 个接口吧。而事实是，一个 Web 请求，从接到数据的那一刻，坑就已经挖好了，等着跳呢。

第一个坑来了，我该选择哪个平台呢？打开搜索引擎，各家云平台的广告接踵而至，为了避免提前选择平台，midway faas 使用的是固定的模板代码，要使用它，需要安装我们的 CLI 工具。

npm i @midwayjs/faas-cli -g

midway faas 的 CLI "f" 也是 Node.js 写的，大部分前端开发者第一次使用 Serverless 即将从它开始。同时还集成了阿里云、腾讯云等众多云厂商云服务发布，并支持的开发、调试、部署等能力。

我们可以用 "f" 创建我们的第一个函数示例。

f create
❯ faas-standard - A serverless boilerplate for aliyun fc, tecent scf and so on
  faas-layer - A serverless runtime layer boilerplate

它的 CLI 也是 Node.js 写的，所以很可能大部分前端开发者第一次使用 Serverless 都从它开始。

// midway IoC 特殊标示，暴露能力
@Provide()
export class MyFirstFunctionClass {

  // 第一个函数
  @Func('api.user')
  async myFn1() {

  }

  // 第二个函数
  @Func('api.book')
  async myFn1() {

  }

  // 第三个函数
  @Func('api.store')
  async myFn1() {

  }
}

midway faas 的代码文件是以 class 的形式，这样所有的方法都可以是一个可复用的函数，并且还可以享受到传统面向对象的能力。

避坑第二招

各个云平台如下的代码宣传深入人心。

exports.handler = (event, context, callback) => {
    callback(null, 'hello world');
}
exports.handler = (request, response, context) => {
    response.send('hello world');
}

这些简单的宣传函数，相似又有着细微的不同（不建议大家去尝试了）， hello world 基本上是通过 callback 或者标准的格式来返回（还有 HTTP response）。

对于前端来说，前后端分离，到 DevOPS，到全栈开发的洗礼，已经相对比较熟悉类似 Koa/Egg 等这一套 Web 开发的套路，到了 Serverless 下，我的代码怎么办呢？

别急，midway faas 已经做好了一切。

// midway IoC 特殊标示，暴露能力
@Provide()
export class MyFirstFunctionClass {

  @Inject()
  ctx;
  // 第一个函数
  @Func('api.user')
  async myFn1() {
    this.ctx.body = 'hello world';
  }

  // 第二个函数
  @Func('api.book')
  async myFn1() {
    this.ctx.type = 'html';
    this.ctx.body = '<html><body>hello world</body></html>';
  }

  // 第三个函数
  @Func('api.store')
  async myFn1() {
    const data = await request('http://xxxx/api/data.json');
    this.ctx.set('X-HEADER-TIMEOUT', 2000);
    this.ctx.body = {
        data: {
        success: true,
        result: data
      }
    };
  }
}

大家会发现，整个写法和传统的 koa 接口一模一样，只要你会 koa，那么，在瞬间即可上手。用上你熟悉的 API，快速的进入开发节奏。

除此之外，你可以用上大部分 Midway Web 开发的装饰器，甚至直接把业务代码拷贝过来即可，整个 midway faas 框架会帮你完成整合和运行。

避坑第三招

这个时候，我们的代码写完了，按照 Serverless 传统的开发模式，要么本地装一个 Docker，按照平台的方式去测试，要么直接打包发布到平台去测试和调试。

在我们的调研中，本地装 Docker 对前端来说太不友好了，每当我们提出要通过 Docker 做一点事情，试用方就会提出能不能轻量一些，开发 Web 能不能像之前的传统开发一样启动服务，刷新浏览器。

为此我们的回答是“能”，通过 invoke 命令，既可以直接调用，也可以启动服务。

f invoke -p

你熟悉的 http://127.1:3000 已经启动，开发和调试，一切都随你心意。

避坑第四招

代码开发完成，也测试完成，我们就可以发布到平台啦，这个时候，阿里云，腾讯云，其实就看你喜好啦。

你想发布到哪个平台，直接配置即可。

// f.yml
provider:
    name: aliyun  // tencent

然后执行部署。

f deploy

我们广告看的非常多，无运维，按请求收费，低成本，简化逻辑，让 Serverless 走进千家万户。本质和传统应用开发是有 Gap 的，Serverless 通过 yml 配置聚合资源，由平台提供资源服务，而业务只需要编写单一的逻辑代码，而由于逻辑的简化之后，不再需要考虑复用，迭代，乃至维护和管理。

虽然我们的代码可以在编写时不需要考虑多个接口了，但是还有最开始的那个问题没有回答， “接口多了发布、管理怎么办？”。

midway faas 采用的是接口自定义聚合的模式，根据流量模型，用户可以自己决定部署模式，我们的 f.yml 中可以进行自由配置，你可以决定将所有接口汇聚到一起，部署到一个函数容器中享受整体的扩缩，也可以将热点的接口随意移出单独部署，这一切都不需要修改代码，只需要动 yml 配置文件即可。

最后的指南

我们总结了下，避坑指南告诉了你几个事情：

就这样，最后我们避开了各种坑，也没有花特别额外的钱（16块买了个域名），就完成了一些简单的 Web 接口（应用），降低了成本（走上了褥社会主义平台羊毛的道路）。

midway faas 是一个帮前端入门 Serverless 的框架，也是未来能力协同，生产上云的框架，这些避坑的处理只是其中的一小部分，他的完整能力其实更强，提供了更多传统的依赖注入，装饰器自定义，业务配置管理，组件化等能力，甚至还有自定义运行时，私有化部署等方案，未来也将一一展现给大家。

Copyright© 2013-2020

All Rights Reserved 京ICP备2023019179号-8