来源：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 中打开，用 devtools 查看页面