三分钟学会如何在函数计算中使用 puppeteer

摘要：使用 puppeteer 结合函数计算，可以快速的构建弹性的服务完成各种功能，包括：生成网页截图或者 PDF、高级爬虫，可以爬取大量异步渲染内容的网页、模拟键盘输入、表单自动提交、登录网页等，实现 UI 自动化测试和捕获站点的时间线，以便追踪你的网站，帮助分析网站性能问题

简介

使用 puppeteer 结合函数计算，可以快速的构建弹性的服务完成各种功能，包括：

生成网页截图或者 PDF
高级爬虫，可以爬取大量异步渲染内容的网页
模拟键盘输入、表单自动提交、登录网页等，实现 UI 自动化测试
捕获站点的时间线，以便追踪你的网站，帮助分析网站性能问题

接下来，将基于一个脚手架项目开发我们自己 puppeteer 项目。

下载项目

>>> git clone -o starter-kit https://github.com/awesome-fc/puppeteer-fc-starter-kit.git your_project_name

项目结构

├── lib                         chrome headless 依赖的共享库，打包的时候，拷贝到打包项目的根目录下
├── chrome                           
│   ├── buildChrome.sh          编译 chrome headless shell 脚本，基于它，可以编译最新的版本
│   └── headless_shell.tar.gz   编译后的 chrome headless 二进制打包文件
├── src
│   ├── index.js                函数调用入口文件，函数 handler 为 index.handler，您的业务代码写在这里
│   └── starter-kit
│       ├── config.js           通过环境变量，获取相关配置属性，如：chrome 执行目录和安装目录等配置
│       ├── local.js            本地测试操作 chrome headless 的 API 是否正确，通过执行命令：npm run local
│       └── setup.js            安装 chrome headless 相关逻辑代码，如：基于 OSS 安装或者本地目录安装
├── package.json
└── package.zip                 输出函数计算打包文件，通过命令：npm run package 或 npm run package-nochrome

如何写业务代码

index.js 文件

const setup = require('./starter-kit/setup');exports.handler = async (event, context, callback) => {const browser = await setup.getBrowser(context);exports.run(browser).then((result) => callback(null, result)).catch((err) => callback(err));
};exports.run = async (browser) => {// 实现您自己的业务代码// 下面是一个示例代码，需要替换成您自己的业务代码// 示例实现了对固定网页截图并返回图片的功能const page = await browser.newPage();await page.goto('https://fc.console.aliyun.com');return page.screenshot({clip: {x: 200,y: 60,width: 780,height: 450,},});
};

本地测试

执行命令： npm run local 。测试您操作 chrome headless 的相关 api 是否正确运行。

编译打包

包含 chrome headless

执行命令：npm run package 。命令会将 chrome headless 文件一起打包进项目，放在项目根目录，函数执行的时候，默认将 chrome headless 安装到 /tmp 目录。

不包含 chrome headless

执行命令：npm run package-nochrome 。命令不会将 chrome headless 文件一起打包进项目，你需要额外将 chrome-headless 上传到 OSS，通过环境变量告诉函数如何从 OSS 下载并安装，默认将 chrome headless 安装到 /tmp 目录。为函数计算设置环境变量：

CHROME_BUCKET(必填): chrome headless 上传到 OSS 的 bucket
CHROME_REGION(必填): chrome headless 上传到 OSS 的 region
CHROME_KEY(必填): chrome headless 上传到 OSS 的 key。默认值: headless_shell.tar.gz

部署

编译打包输出的文件：package.zip，通过函数计算控制台或者 fcli 命令工具上传已打包文件。fcli 上传已打包文件命令：

# 在相应 service 目录下
>>> mkf myFunction -h index.handler -f package.zip -t nodejs8 # 代码在本地的 package.zip 中

为什么要使用函数计算

函数计算是一个相对较新的事物，可能大部分开发人员或架构师对它很陌生。微服务架构是当下很流行的一种系统架构，微服务架构有没有不够完美的地方？答案是肯定的。基于微服务架构，我们需要考虑使用什么微服务框架来架构系统、需要多少台服务器、如何有效减轻运维负担等一些列问题。另外，按照《福布斯》杂志的统计，在商业和企业数据中心的典型服务器仅提供 5%～15% 的平均最大处理能力的输出。这无疑是一种资源的巨大浪费。

有没有办法解决上面的不足？答案也是肯定的，阿里云函数计算就是在这样的背景下应运而生的。如果把云计算理解成一个执行环境，那么，在这个环境里，函数（即业务逻辑的载体）+ 数据（即跟业务相关的输入与输出）就是应用的核心，有了函数、数据、事件这三者，其它任何代码和框架，无非是整个应用的胶水和UI罢了。那么，最理想的情况就是用最少的时间写胶水，将更多的时间投入到核心应用的开发中，甚至，彻底实现整个软件栈的微服务化。函数计算就是这里的胶水。

开发效率

项目开发效率	传统微服务方式	函数计算方式
采购服务器等基础设施	需要	不需要
管理服务器等基础设施	需要	不需要
开发业务服务模块	需要	需要
部署业务服务模块	需要	需要，但是很简单，提供了很多工具
通过 nginx 搭建反向代理、https 和负载均衡	需要	不需要，通过阿里云 API 网关或函数 HTTP 触发器可以实现
搭建相关日志服务	需要	不需要，通过日志开关开启日志服务
配置安全访问规则	需要	不需要，自带基础安全访问配置，API 网关提供更多的配置
运维负担	重	轻
开发效率	低	高，通常几天就能完成

可靠性

项目可靠性	传统微服务方式	函数计算方式
峰值压力	当峰值压力突增时，计算资源扩容不及时容易导致服务过载	弹性伸缩，面对峰值压力
错误处理	需要自行处理服务器宕机，进程崩溃等问题	无需处理服务器等故障，函数计算实现基础设施的容错
项目架构	基础设施管理比较复杂	系统架构经过大量项目的验证和长时间的打磨，相对稳定可靠很多

成本

项目成本	传统微服务方式	函数计算方式
采购服务器等基础设施成本	成本高，利用率低	无
代码开发成本	成本高，包含基础架构代码和业务代码	成本低，只需关注业务代码开发
函数计算成本	无	成本低，按需付费，每月还有一定免额
运维成本	成本高，难度大	成本低，难度很小，甚至可以不需要专门的运维人员
集成阿里云其他产品成本，如 OSS 和RDS 等	成本高	成本低，提供对阿里云其他产品无缝集成

安全

项目安全	传统微服务方式	函数计算方式
身份认证和访问控制	需自行实现	除非您显式的允许匿名调用函数，函数计算将对每一个 API 调用进行身份验证。只有获得您的显式授权（借助于阿里云访问控制服务，RAM），您的函数才可以访问其他云服务资源或者被其他用户/云服务调用。借助阿里云 API 网关，您也可以使用 OpenID 等机制对函数调用进行身份验证
操作追踪和审计	需自行实现	需自行实现
数据安全	需自行实现	通过使用访问控制授权和函数计算环境变量等功能，您不必再将访问凭证等敏感信息保存在代码中。所有您借助函数计算服务持久化保存的数据，包括代码、环境变量等等，都被加密存储。系统在运行代码之前，将对代码进行完整性检测
运行时安全	需自行实现	每个函数都在独立的、隔离的环境中被执行。函数计算提供与阿里云弹性计算（ECS）相同的隔离强度。函数计算会周期性的重置运行时环境，并自动更新操作系统以及运行时依赖软件的安全补丁
异常响应	需自行实现	函数计算允许您设置资源使用的上限，确保您的费用消耗可控。同时，函数计算提供函数调用次数，流控次数，错误率等指标。借助云监控，您可以为相关指标设置监控报警，快速响应异常情况