開發函數計算的正確姿式——網頁截圖服務

前言

首先介紹下在本文出現的幾個比較重要的概念：

函數計算（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

---

本文做者：倚賢

閱讀原文

本文爲雲棲社區原創內容，未經容許不得轉載。