搭建以 serverless 为后台服务的疫情热搜快应用

来源：vivo快应用

作者：@author dadong

 

鉴于疫情带来的影响，因宅在家里太久，于是结合 nodejs puppeteer cheerio 等技术工具，打造了一个以 serverless 为后台服务的疫情热搜快应用；本篇文章即以 SCF 为例，介绍开发一个前端以快应用为载体，后端以 serverless 为支撑的项目过程，及一些踩坑历程的分享。

 

起源

今年疫情的影响越来越大，已经成为一个世界性的问题，疫情的发展时刻牵动每个人的心，正好也是因为疫情，今年让作为加班狗的我突然重温“放寒假”的感觉。宅在家里太久就想搞点事情做，于是就萌发了搞个疫情热搜应用的念头。说干就干，经过两天构思，两天开发，踩了不少坑之后，一个疫情热搜快应用就诞生了。

 

构思

先说技术点

后端：nodejs puppeteer cheerio

前端：快应用（当然小程序也没问题）

 

 

再说说采用这几个技术的原因

• nodejs：本身呢，我作为一个前端，用这个写服务端是很合情合理的吧！

   

• puppeteer：为什么选择这个库呢？首先当然是为了爬取数据，那么有的小朋友就要说了，爬取数据还有其他的库呀?为什么非要用他呢？没错，一开始我用的是crawler，然而这个库并不能爬取单页应用，这是踩的第一个坑，后面会详细讲。然后就选择了puppeteer，他是谷歌官方出品的一个通过 DevTools 协议控制 headless Chrome 的 Node 库，浏览器可以的，他都可以，爬取单页应用自然不在话下。

   

• cheerio：为服务端设计的轻量级 jQuery 核心实现，用来过滤选取爬取到的页面数据的。

   

• 快应用：作为小程序家族里的一个特例，唯一个用原生组件渲染的框架，性能自然比其他小程序不知高到哪里去了，只要是在国内厂商生产的安卓机器，基本都能运行。

 

 

然后说说 serverless

serverless 技术的诞生，让开发者可以更加专注于业务，而不必考虑系统的运维和系统性能的伸缩，以往我们要开发部署一个应用，一般需要准备一台服务器，配置好对应的项目环境，部署好对应的项目。这个过程中，需要注意的环节很多，一个地方出问题，就会导致整个应用不可用。而通过 serverless 架构，我们只需要把核心代码上传到服务提供商，然后就啥都不用管了，应用遵循运行才计费的原则，还可以自动拓展，不用担心流量突然增大导致服务不可用。适合不熟悉运维操作的开发人员部署自己的项目。

 

最后说说整个项目的架构和实现方法

• 通过 nodejs 加 puppeteer 抓取解析百度疫情热搜数据

• 把项目部署到函数计算服务提供商平台（这里我采用的是腾讯云的 SCF，免费额度和阿里的函数计算一样）

• 通过配置 API 网关，把服务暴露出来

• 开发一个快应用调用服务展示数据

   

实践

说完了技术架构和构思，下面正式开始介绍开发实践的过程：

 

准备开发环境

这里以腾讯云的 SCF 服务为例，其他云平台其实也都大同小异。

 

1.安装腾讯云 SCF-CLI 命令行工具

pip install scf # 这个工具是python写的，所以需要开发机器有python环境，且版本需要在python2.7以上

 

2.安装腾讯云 serverless 的 vscode 插件

如果你懒得配置 python 环境，比较喜欢可视化的操作，可以选择安装 vscode 的插件

插件市场搜索安装 Tencent Serverless Toolkit for VS Code

 

以上两个工具任选一种安装好了就行。

 

初始化项目

用 SCF 命令行方式初始化一个项目，vscode 插件方式就不说了，可视化操作按提示操作。

scf init -r nodejs8.9 --name virus-search # 初始化一个项目名为virus-search的项目，运行环境是nodejs8.9

 

初始化好了项目，项目结构是下面这个样子的：

└── virus-search ├── README.md ├── index.js // 入口文件 └── template.yaml // 项目配置文件

 

截止到我写这篇文章为止，不管是 SCF 命令行还是 vscode 插件，创建项目的 nodejs 版本最高均只支持到了 8.9。这里特别拎出来说是因为腾讯云实际上已经支持了 node10.15 的运行环境，不过开发工具还没开放。

 

安装项目依赖

接下来安装要用到的项目依赖

npm install puppeteer cheerio --save

 

pupeteer 会安装 chromium，这个包有 130+MB，建议把 npm 换成 cnpm 或者替换淘宝源，这样会快很多。

 

安装好了依赖，项目结构变成了这样

└── virus-search 

 ├── README.md

 ├── node_modules/ 

 ├── package.json

 ├── index.js // 入口文件 

 └── template.yaml // 函数配置文件

 

编写爬虫逻辑

这里数据来源我选择了百度的疫情全民热搜，这个页面长这个样子：

 

我想要的数据就是这个页面热搜榜单了，在 Chrome 中打开，用 dev