开发函数计算的正确姿势——网页截图服务

前言

首先介绍下在本文出现的几个比较重要的概念：

函数计算（Function Compute）: 函数计算是一个事件驱动的服务，通过函数计算，用户无需管理服务器等运行情况，只需编写代码并上传。函数计算准备计算资源，并以弹性伸缩的方式运行用户代码，而用户只需根据实际代码运行所消耗的资源进行付费。函数计算更多信息参考。
Fun: Fun 是一个用于支持 Serverless 应用部署的工具，能帮助您便捷地管理函数计算、API 网关、日志服务等资源。它通过一个资源配置文件（template.yml），协助您进行开发、构建、部署操作。Fun 的更多文档参考。
fun install: fun install 是 fun 工具的一个子命令，用于安装 pip 和 apt 依赖，提供了命令行接口和 fun.yml 描述文件两种形式。

备注: 本文介绍的技巧需要 Fun 版本大于等于 2.9.3。

依赖工具

本项目是在 MacOS 下开发的，涉及到的工具是平台无关的，对于 Linux 和 Windows 桌面系统应该也同样适用。在开始本例之前请确保如下工具已经正确的安装，更新到最新版本，并进行正确的配置。

• Docker
• Fun
• Fcli

Fun 和 Fcli 工具依赖于 docker 来模拟本地环境。

对于 MacOS 用户可以使用 homebrew 进行安装：

brew cask install docker
brew tap vangie/formula
brew install fun
brew install fcli

Windows 和 Linux 用户安装请参考：

1. https://github.com/aliyun/fun/blob/master/docs/usage/installation.md
2. https://github.com/aliyun/fcli/releases

安装好后，记得先执行 fun config 初始化一下配置。

初始化

使用 fun init 命令可以快捷的将本模板项目初始化到本地。

$ fun init vangie/puppeteer-example
? Please input oss bucket to upload chrome shell? chrome-headless
? Please select a region? cn-hangzhou
? Please input oss accessKeyId for upload? xxxxxxxxxxxKbBS
? Please input oss accessKeySecret for upload? xxxxxxxxxxxx5ZgM

上面会提示

1. 输入一个 OSS 的 BUCKET，注意 OSS Bucket 是全球唯一的，上面的 chrome-headless 已经被占用了，请换一个新的名称或者一个已经创建好的（已经创建好的，请确保 region 一致）。
2. 然后选择一个 OSS 的 Region，请保持和部署函数计算 Region 一致
3. 输入一个具备 OSS 写权限的秘钥。

安装依赖

$ fun install
skip pulling image aliyunfc/runtime-nodejs8:build-1.2.0...
Task => [UNNAMED]
     => apt-get update (if need)
     => apt-get install -y -d -o=dir::cache=/code/.fun/tmp libnss3
     => bash -c 'for f in $(ls /code/.fun/tmp/archives/*.deb); do dpkg -x $f /code/.fun/root; done;'
     => bash -c 'rm -rf /code/.fun/tmp/archives'
Task => [UNNAMED]
     => bash -c  'curl -L https://github.com/muxiangqiu/puppeteer-fc-starter-kit/raw/master/chrome/headless_shell.tar.gz --output headless_shell.tar.gz'
...

fun install 会执行 fun.yml 文件里的任务，这些任务会：

1. 安装 puppeteer 依赖的 .so 文件；
2. 将 puppeteer 依赖的 chrome headless 二进制文件上传到 OSS；
3. 安装 npm 依赖。

部署

$ fun deploy
using region: cn-shanghai
using accountId: ***********4733
using accessKeyId: ***********KbBS
using timeout: 60

Waiting for service puppeteer to be deployed...
        Waiting for function html2png to be deployed...
         Waiting for packaging function html2png code...
         package function html2png code done
        function html2png deploy success
service puppeteer deploy success

执行

$ fcli function invoke -s puppeteer -f html2png
The screenshot has been uploaded to http://chrome-headless.oss-cn-shanghai.aliyuncs.com/screenshot.png

打开上面的返回链接，看到截取出来的是全屏滚动的长图，考虑的篇幅下面只截取了部分：

如果想换一个网址，可以使用如下命令格式

fcli function invoke -s puppeteer -f html2png --event-str 'http://www.alibaba.com'

调试

如果需要在本地调试代码，可以使用如下命令

fun local invoke html2png <<<'http://www.alibaba.com'

参考阅读

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

阅读原文

本文为云栖社区原创内容，未经允许不得转载。