使用 Serverless 为后端服务开发一个有趣的 Chrome 扩展程序

た入场券 2022-04-27 17:02 178阅读 0赞

## 何遇 ##

「何遇」是一款Chrome扩展程序，其主要的功能是当你在 Chrome 浏览器中打开一个新的Tab页面时，空白页会展示出一些有趣的插图、句子、电影截图等，给苦涩的搬砖生活增添一丝乐趣，效果如下：

实现方案很简单，页面就是一个普通的前端页面，配置少许的 `manifest.json` 便可以直接转换为 Chrome 扩展程序，而后端服务是一个 HTTP 接口，返回页面展示的内容，该接口使用了阿里云的 Faas 服务，是一种 Serverless 概念的实现方式，总之该接口无须部署在自己的服务器上，而是直接放在阿里云平台上，具体见下文。

假如你科学上网，便可以访问该 [链接][Link 1] 下载体验，或者在 [应用市场][Link 2] 搜索“何遇”下载。

项目前后端源代码已经上传到 Github ，欢迎一起交流，传送门： [heyu][]

## 什么是 Serverless ##

### 简单介绍 ###

Serverless 是最近一个非常火热的话题，在文章的开始，我们必须澄清 Serverless 并不是按照字面理解上的“无服务器”，其准确含义是表示对于开发者而言，不再需要关注大部分与服务器相关的事物，比如服务器的选购、服务器系统环境、日志收集、系统监控、负载均衡等琐事，这些重复且复杂的活都交给 Serverless 平台即可，开发者只需要专注业务逻辑的开发。

### 初识 Serverless ###

最早接触到 Serverless 概念时，是在我2017年大二暑假，那时候需要实现一个招聘类的小程序，当时苦于后端经验不足，只会写一些简单 CURD 的 java 代码，而对于服务的部署、域名解析、https 证书部署、日志、监控、负载均衡等知识了解甚微，当我快要放弃时，遇到了当时国内最早一批 Serverless 服务商 [leancloud][]，leancloud 提供一套完整的小程序后端解决方案，只需要在平台上建立数据库，便可以直接在前端操控 API 来对数据库进行 curd 操作，其他的一切都不需要操心，除了小程序外，leancloud 还提供 APP 上类似的服务，在我结识的一些独立开发者，已经有一部分项目已经完全使用该服务，其便捷性和稳定性已经得到大家的认可，当然，需要切身体验才能确定其是否真正适合你所开发的业务。

这是我开源的一个使用 Serverless 概念开发的微信小程序：[基于LeanCloud为后端的 “云校招” 微信小程序][LeanCloud_ _]，假如你是一个不熟悉后端的前端开发者，却又想开发一个完整的项目，可以参考该项目。

### 分类 ###

Serverless应用可以细分为BaaS和FaaS两类：

*  **BaaS**: Backend as a Service，这里的Backend可以指代任何第三方提供的应用和服务，比如提供云数据库服务的Firebase和Parse，提供统一用户身份验证服务的Auth0和Amazon Cognito等。
 *  **FaaS**: Functions as a Service，应用以函数的形式存在，并由第三方云平台托管运行，比如之前提到的Amazon Lambda，Google Cloud Functions等。

本篇实战，主要用到了阿里云提供的 FaaS 服务，并且大部分内容都是围绕者 FaaS 来论述。

## Serverless 其他优势 ##

除了上述说到的“无需运维”的优势外，Serverless 还有哪些优势值得我们去实践呢？

### 按需付费成本低 ###

每一个 Faas 只会在触发的情况下，才会进行计费，而不是像传统部署在服务器上的服务无时无刻都在收费。Faas的费用由调用次数费用、执行时间决定的，简单来说，一个函数执行设置内存为128MB，执行时间是200ms，则一次执行所消耗的资源为 0.128GB \* 0.2s = 0.0256GB-S,假设调用了100万次，只消耗大概4元人民币，因此换算过来，假如一个用户每天调用20次该函数，你有5万活跃用户，则该函数一天只需要4元人民币的成本。

详情：[计费计算器][Link 3]

### 弹性伸缩 ###

当该 Faas 触发频率猛增的时候，服务商能够毫秒级别弹性伸缩，快速实现底层扩容以应对峰值压力，提升了服务在特殊情况下的稳定性。

### 事件驱动 ###

上文我们说到的 Faas 触发，那么怎样触发一个 Faas 呢？阿里云的 Faas 提供了多种触发器，如HTPP触发器、对象存储触发器、日志服务触发器、定时触发器等，这里的便捷在于：假如你使用了大部分阿里云的其他云服务，这些服务便能与 Faas 无缝对接，不得不说阿里云的生态在这几年里发展很迅速。

## Faas（函数计算）实践 ##

### Hello Word Demo ###

我们先来实现一个简单的 Faas，使用HTTP触发器，当我向一个接口发送请求后，返回一个"hello word"字段。

访问阿里云 [Faas][] 当用户第一次使用阿里云 Faas 时，需要开通一系列的服务，当然都是免费的，开通函数计算(Faas)服务后，便可以在控制台中新建函数。

1.  选择函数模版，这里我们选择NodeJs8

1.  选择函数触发器，这里我们选择HTTP触发器，认证方式这里我们先用不到，选择anonymous。

1.  编写 Faas 函数

这里的函数的代码如下：

module.exports.handler = function(req, resp, context) {
        console.log('hello world');
        var params = {
            path: req.path,
            queries: req.queries,
            headers: req.headers,
            method : req.method,
            requestURI : req.url,
            clientIP : req.clientIP,
        }
        console.log(params);
        resp.send(JSON.stringify({content: 'hello word'}));
    }
    复制代码

这里我们通过req来获取请求信息，resp用来返回数据，context 可以获取到函数上下文。

1.  权限选择，这里我们先不选择，因为没用用到与权限相关的功能。
2.  调用函数，创建完函数后，对于HTTP为触发器的 Faas，会默认一个url来调用该函数，当然，也可以指定域名和路径。

这里，我们只需要几步，就完成了一个公网下可以调用的api，试想，我们还能用 Faas 做些什么呢，能不能做一些复杂的逻辑，比如爬取某个网站上的数据，将数据放入body返回给调用者。

### 爬虫服务 ###

之前我写过一篇关于爬虫的博客，使用现有的轮子实现起来也很简单，具体见我另外一篇博客 [NodeMail][]，我们以实现一个获取随机获取One上的每日推荐函数为例，创建一个含有自定义包的 Faas 函数。

**遇到的问题：** 我们上面的 demo 中，没有用到任何外部 npm 包，为了实现该需求，我们需要调用 npm 上的包，因此，在 Faas 平台上无法在线编辑，这时需要在本地创建一个 node 项目，安装所需要的包，编写业务代码，具体步骤：

1.  在pc本地创建一个文件夹`FaasTest`，初始化项目，然后使用npm或者yarn安装所需包

npm init
    npm i superagent cheerio moment
    复制代码

1.  创建`index.js`，编写爬虫代码

我们可以在本地测试该项目，再改造成 Faas 需要的代码规范。

1.  改造为 Faas 规范

我们从第一个 hello word 的 demo 中看到，以HTTP为触发器的 Faas 函数有以下代码包裹着：

module.exports.handler = function(req, resp, context) {
        // other code
    }
    复制代码

使用 resp 来返回爬取的数据，改造后的代码如下：

以上代码已经上传到 Github ，传送门：[Faas][Faas 1]

1.  使用 fcli 将项目部署到 Faas 平台

这一步原本可以直接打包成 zip 进行代码包上传，但是在我的本地系统下会出 bug，文档中有另外一种方法，使用阿里云的 Faas shell 工具: [fcli][].

下载 fcli 初始化后，进入 fcli 所在目录，输入 `./fcli shell` 进入交互模式，输入 `ls` 查看服务列表，进入列表 `cd xxx`，更新函数的代码包：

upf hello -d /Users/vince/Desktop/FaasTes
    复制代码

*  **upf hello** ：更新 hello 函数
 *  **-d /Users/vince/Desktop/FaasTes**：-d 表示需要上传代码包所在的目录

1.  测试接口，使用 postman 测试接口，简单的后端服务即完成。

## 开发一个简单的 Chrome 扩展程序 ##

Chrome 扩展程序并不是什么新奇的技术，简单来说就是一个 web 应用，根据 Chrome 扩展程序的规范，按照给出的接口定制开发部分代码，更改一些配置，这里有一篇很好的指南推荐给大家[《Chrome插件开发全攻略》][Chrome]。

### 需求描述 ###

具体需求是每次打开一个新的 tab，都展示一个 web 页面，web 页面上的内容从 Faas 中获取，为了优化体验，保证每次打开 Tab 页面能马上展示内容，这里我们提前将获取到的内容保存在 localStorage 供下次展示，因此我们每次看到的内容其实是上一次获取到的，这样就能保证内容能立即现实。

### 具体实现 ###

#### 逻辑实现 ####

这里我们选用 React 简单创建一个项目，在 `App.js` 中编写以下代码：

import React from 'react'
    import axios from 'axios'
    import './App.scss'
    
    // 第一次运行时，加载初始内容
    const initData = {
      imgUrl: 'http://image.wufazhuce.com/Fj7Xcw1A0EICyyVSYDnU7FEL8l3H',
      tag: '插画',
      content: '喜欢和讨厌是自己无法选择的，所以一旦喜欢上了，不管你是什么样子，我都喜欢你。',
    }
    class App extends React.Component {
      constructor(props) {
        super(props)
        this.state = {
          content: null,
        }
      }
    
      componentDidMount() {
        // 假如localStorage中无数据，则加载initData
        const data = localStorage.getItem('content') ? JSON.parse(localStorage.getItem('content')) : initData
        this.setState({
          content: data,
        })
        this.getContentAndSave()
      }
    
      getContentAndSave() {
        axios({
          method: 'get',
          url: 'https://1556981199176880.cn-shanghai.fc.aliyuncs.com/2016-08-15/proxy/test/hello/',
        }).then((res) => {
          // 保存数据到localStorage
          localStorage.setItem('content', JSON.stringify(res.data))
          // 预加载img
          if (res.data.imgUrl) {
            const img = new Image()
            img.src = res.data.imgUrl
          }
        })
      }
    
      render() {
        const { content } = this.state
        return (
          <div className="app">
            <If condition={content}>
              <div className="content">
                <img src={content.imgUrl} alt="" />
                <div className="tag">{content.tag}</div>
                <div className="slogan">{content.content}</div>
              </div>
            </If>
          </div>
        )
      }
    }
    
    export default App
    
    复制代码

这里只是一个简单的 web 应用，那么如何将其转换为 Chrome 拓展程序呢？

#### 转换为 Chrome 拓展程序 ####

首先，我们将该 React 项目 build 后，在 dist 文件下添加一系列文件，这里有个关键的文件 `manifest.json`，这里描述的是Chrome 拓展程序的信息：

{
    	"manifest_version": 2,
    	"name": "heyu",
    	"version": "1.0",
    	"description": "每一次的New Tab，都是一场最美好的相遇。",
    	"author": "vince",
    	"omnibox": { "keyword" : "heyu" },
    	"icons":
    	{
    		"48": "icon.png",
    		"128": "icon.png"
    	},
    	"background": {
    		"scripts": ["background.js"],
    		"persistent": false
    	},
    	"browser_action": 
    	{
    		"default_icon": "icon.png"
    	},
    	"chrome_url_overrides":
    	{
    		"newtab": "index.html"
    	}
    }
    复制代码

我们来讲解一下该项目中比较重要的几个参数

*  **chrome\_url\_overrides**： 表示覆盖特定页面，使用override页可以将Chrome默认的一些特定页面替换掉，改为使用扩展提供的页面，这里我们就使用打包后的主页 `index.html`。
 *  **background**：后台，，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，这里我们使用到了`scripts`参数，表示打开页面时即运行`background.js`脚本：

chrome.browserAction.onClicked.addListener(() => {
        chrome.tabs.create({ 'url': 'chrome://newtab' })
    })
    复制代码

该段代码表示当触发 browserAction 时，打开一个 newtab 页面，那么怎样触发 browserAction 呢？也就是当你下载该拓展程序后，在浏览器右上角点击该 icon 时，即触发 browserAction 事件。

其他的配置具体表示什么，在我上面分享的开发指南中有具体讲解。

现在我们 dist 文件夹下有以下文件：

├── background.js
    ├── favicon.ico
    ├── icon.png
    ├── index.html
    ├── js
    │   └── bundle.js
    └── manifest.json
    复制代码

以上源码已经上传到 Github ，传送门： [ChromeExtension][]

#### 测试拓展程序 ####

一切就绪后，我们打开网页，输入 `chrome://extensions/`，右上角开启开发者模式，直接拖入 `dist` 文件夹自动安装拓展程序。

试试打开一个新的 Tab 页面后，展现了我们开发的 web 页，或者我们直接点击右上角的 icon ，也能打开一个新的页面。

## 总结 ##

对于 Serverless ，本篇文章所讲解的实践只是其很小的一部分，而对于 Faas ，我们还能用它来实现更多业务场景，比如部署定时任务、图片处理(转码、水印)、音频转换、文字处理等“一次性”的计算，这类计算往往不需要复杂的鉴权操作，功能单一，无状态，非常适合将其完全剥离出来，单独进行维护与部署。

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fchrome.google.com%2Fwebstore%2Fdetail%2F%25E4%25BD%2595%25E9%2581%2587%2Fbliibihaohjjohhclajiakpmomocnael
[Link 2]: https://link.juejin.im?target=https%3A%2F%2Fchrome.google.com%2Fwebstore%2Fcategory%2Fextensions%3Fh1%3Dzh
[heyu]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FVincedream%2Fheyu
[leancloud]: https://link.juejin.im?target=https%3A%2F%2Fleancloud.cn%2F
[LeanCloud_ _]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FVincedream%2Fcloud-job
[Link 3]: https://link.juejin.im?target=http%3A%2F%2Fg.alicdn.com%2Faliyun-next%2Ffc%2F1.1.69%2Fprice.html%3Fspm%3Da2c4g.11186623.2.20.1de85819nC9NHy
[Faas]: https://link.juejin.im?target=https%3A%2F%2Fwww.aliyun.com%2Fproduct%2Ffc
[NodeMail]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FVincedream%2FNodeMail
[Faas 1]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FVincedream%2Fheyu%2Ftree%2Fmaster%2FFaas
[fcli]: https://link.juejin.im?target=https%3A%2F%2Fhelp.aliyun.com%2Fdocument_detail%2F52995.html
[Chrome]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fsxei%2Fchrome-plugin-demo
[ChromeExtension]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2FVincedream%2Fheyu%2Ftree%2Fmaster%2FChromeExtension