前言

Web Function，也叫 Web 函数，是云函数的一种函数类型，区别于事件函数对于事件格式的限制，更加专注于优化 Web 服务场景，用户可以直接发送 HTTP 或者 HTTPS 请求到 URL 触发函数的执行。本文将介绍一个基于 Express 架构搭建的 Web 函数服务——云端计算器。

正文

今天，我们就通过一个非常简单的 Express 架构的 Web 函数服务来介绍 Web Function 的使用过程。 Web Function

的体验地址：https://console.cloud.tencent.com/scf/list-create?rid=16&ns=default&keyword=WebFunc，欢迎感兴趣的小伙伴动手尝试呦。

Web函数介绍

功能和优势

Web 函数（Web Function）相较于事件型函数，在支持 Web 服务场景的能力上，具备以下优势：

1）函数可以直接接收并处理 HTTP 请求，API 网关不再需要做 json 格式转换，这一点在今天的代码实例中有非常鲜明的展示。这样做减少了请求处理的环节，提升了 Web 服务性能。

2）Web 函数的编写体验更贴近编写原生 Web 服务，可以使用 Node.js 原生接口，保证和本地开发服务体验一致。

3）丰富的框架支持，您可以使用常见的 Web 框架（例如 Nodejs Web 框架：Express、Koa）编写 Web 函数，也可以将您本地的 Web 框架服务以极小的改造量快速迁移上云。

4）Web 函数自动为您创建 API 网关服务，部署完成后，网关侧会自动生成一个默认 URL 供用户访问和调用，简化了学习成本和调试过程。

5）控制台提供了测试能力，您可以在函数控制台快速测试您的服务。

工作原理图

用户发送的 HTTP 请求经过 API 网关后，网关侧将原生请求直接透传的同时，在请求头部添加了网关触发函数时需要的函数名、函数地域等内容，并一起传递到函数环境，触发后端函数执行。

函数环境内，通过内置的 Proxy 实现 Nginx 转发，并去除头部非产品规范的请求信息，将原生 HTTP 请求通过指定端口发送给用户的 Web Server 服务。

用户的 Web Server 配置好指定的监听端口 9000 和服务启动文件后部署到云端，通过该端口获取 HTTP 请求并进行处理。下图是整个 Web 函数的工作原理图：

搭建云端计算器服务

步骤一、点击进入链接后，我们来到了带有如下内容的界面

选择“创建模版”，然后选择“Express 框架模版”，最后点击“下一步”。

然后，我们进入了如下界面：

选择默认设置，点击“完成”按钮。

步骤二、“函数服务”-->“函数管理”-->“函数 代码

展开 src 目录，我们可以看到整个初始化工程的所有文件和文件夹，比如 app.js 是主要的 API 请求处理文件，index.html 是 Web 服务的入口文件，scf_bootstrap 是服务启动配置文件，serverless.yml 是 Web 服务配置文件，node_modules目录包含了 Web 服务所有依赖的 npm 包。

步骤三、增加计算器服务接口并实现代码编写

首先，我看一下 app.js 文件的源码，内容如下：

const express = require('express');
const path = require('path');
const fs = require('fs');
const app = express();

app.get(`/`, (req, res) => {
  res.sendFile(path.join(__dirname, 'index.html'));
});

app.get(`/logo`, (req, res) => {
  const logo = path.join(__dirname, 'logo.png');
  const content = fs.readFileSync(logo, {
    encoding: 'base64',
  });
  res.set('Content-Type', 'image/png');
  res.send(Buffer.from(content, 'base64'));
  res.status(200).end();
});

app.get('/user', (req, res) => {
  res.send([
    {
      title: 'serverless framework',
      link: 'https://serverless.com',
    },
  ]);
});

app.get('/user/:id', (req, res) => {
  const id = req.params.id;
  res.send({
    id: id,
    title: 'serverless framework',
    link: 'https://serverless.com',
  });
});

app.get('/404', (req, res) => {
  res.status(404).send('Not found');
});

app.get('/500', (req, res) => {
  res.status(500).send('Server Error');
});

// Error handler
app.use(function (err, req, res, next) {
  console.error(err);
  res.status(500).send('Internal Serverless Error');
});

// Web 类型云函数，只能监听 9000 端口
app.listen(9000, () => {
  console.log(`Server start on http://localhost:9000`);
});

我们可以看到，其中包含了常规请求的处理逻辑以及错误处理逻辑，主要注意的是当我们部署 Web 服务时，必须监听指定的 9000 端口，不可以监听内部回环地址 127.0.0.1。

然后，我们增加计算器相关的处理接口和对应的处理代码，新增 API 接口如下：

app.get('/calc/:type/:num1/:num2', (req, res) => {
  const type = req.params.type
  const num1 = Number(req.params.num1)
  const num2 = Number(req.params.num2)
  var result = -1
  if (type == "plus") {
    result = num1 + num2
    result = "和运算结果：" + result
  } else if (type == "reduce") {
    result = num1 - num2
    result = "减运算结果：" + result
  } else if (type == "ride") {
    result = num1 * num2
    result = "乘运算结果：" + result
  } else if (type == "except") {
    result = num1 / num2
    result = "除运算结果：" + result
  } else {
    result = "计算方式不支持"
  }
  res.send([
    {
      type: type,
      result: result,
      title: 'serverless framework',
      link: 'https://serverless.com',
    },
  ]);
});

上面的方法 API path 为 /calc/:type/:num1/:num2，其中第一个字段表示计算器功能，第二个字段表示计算类型，比如加、减、乘、除等，第三个字段和第四个字段分别是计算数1和计算数2。该计算器接口方法的 http 请求类型是 Get 方法，功能上实现了基础的加、减、乘、除四个运算功能。

步骤四、调试和部署

代码编写完后，点击左下角的“部署”按钮，这个时候我们拿着服务地址去网页上测试了，但是，我们也可以不这样做，使用系统自带的调试界面来完成对应的测试工作。选择“GET”请求方式，然后输入除法和两个计算数字，点击“测试”按钮，等待1～2秒，查看返回结果中的响应Body，其就是执行结果。具体操作，如下图所示：

步骤五、实际测试

我们拷贝 Web 函数的访问路径地址，可以参考上图中的访问路径 URL，然后在浏览器进行验证。

简单验证一下 60乘60，结果下图所示：

60除60，结果下图所示：

60减60，结果下图所示：

60加60，结果下图所示：

结论和建议

好啦，至此，我们利用 Web 函数实现的云端计算器就开发和介绍完了。如果你想把云端的代码拷贝下来，在本地运行也是可以的，细心的话，你会发现编辑器的右上角有个“下载”按钮，使用非常方便。其实，腾讯云的 Web 函数，操作上手还是非常方便的，整体上个人感觉还是非常满意的。建议的话，也只提一点，就是我们在一开始创建架构模版时，还可以细化功能模版，比如在 Express 架构下增加云端计算器功能模版、手机号归属地查询功能模版等。这样能够让学习者有更加明确的学习目的，减小上手难度。

【Web Function】基于Express架构的云端计算器服务开放与部署

前言

正文