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

前言

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

函數計算（Function Compute）: 函數計算是一個事件驅動的服務，經過函數計算，用戶無需管理服務器等運行狀況，只需編寫代碼並上傳。函數計算準備計算資源，並以彈性伸縮的方式運行用戶代碼，而用戶只需根據實際代碼運行所消耗的資源進行付費。函數計算更多信息參考。node

Fun: Fun 是一個用於支持 Serverless 應用部署的工具，能幫助您便捷地管理函數計算、API 網關、日誌服務等資源。它經過一個資源配置文件（template.yml），協助您進行開發、構建、部署操做。Fun 的更多文檔參考。git

備註: 本文介紹的技巧須要 Fun 版本大於等於 3.5.0。github

依賴工具

本項目是在 MacOS 下開發的，涉及到的工具是平臺無關的，對於 Linux 和 Windows 桌面系統應該也一樣適用。在開始本例以前請確保以下工具已經正確地安裝，更新到最新版本，並進行正確的配置。chrome

Docker
Fun

Fun 工具依賴於 docker 來模擬本地環境。docker

MacOS 用戶能夠使用 homebrew 進行安裝：npm

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

Windows 和 Linux 用戶安裝請參考：瀏覽器

安裝好後，記得先執行 fun config 初始化一下配置。bash

初始化

使用 fun init 命令能夠快捷地將本模板項目初始化到本地。服務器

fun init vangie/puppeteer-example

安裝依賴

fun install

fun install 會執行 Funfile 文件裏的指令，依次執行以下任務：

安裝 chrome headless 二進制文件；
安裝 puppeteer 依賴的 apt 包；
安裝 npm 依賴。

部署

同步大文件到 nas 盤。

fun nas sync

部署代碼。

$ fun deploy
using template: template.yml
using region: cn-hangzhou
using accountId: ***********3743
using accessKeyId: ***********Ptgk
using timeout: 600

Waiting for service puppeteer to be deployed...
        make sure role 'aliyunfcgeneratedrole-cn-hangzhou-puppeteer' is exist
        role 'aliyunfcgeneratedrole-cn-hangzhou-puppeteer' is already exist
        attaching police 'AliyunECSNetworkInterfaceManagementAccess' to role: aliyunfcgeneratedrole-cn-hangzhou-puppeteer
        attached police 'AliyunECSNetworkInterfaceManagementAccess' to role: aliyunfcgeneratedrole-cn-hangzhou-puppeteer
        using 'VpcConfig: Auto', Fun will try to generate related vpc resources automatically
                vpc already generated, vpcId is: vpc-bp1wv9al02opqahkizmvr
                vswitch already generated, vswitchId is: vsw-bp1kablus0jrcdeth8v35
                security group already generated, security group is: sg-bp1h2swzeb5vgjfu6gpo
        generated auto VpcConfig done:  {"vpcId":"vpc-bp1wv9al02opqahkizmvr","vswitchIds":["vsw-bp1kablus0jrcdeth8v35"],"securityGroupId":"sg-bp1h2swzeb5vgjfu6gpo"}
        using 'NasConfig: Auto', Fun will try to generate related nas file system automatically
                nas file system already generated, fileSystemId is: 0825a4a395
                nas file system mount target is already created, mountTargetDomain is: 0825a4a395-rrf16.cn-hangzhou.nas.aliyuncs.com
        generated auto NasConfig done:  {"UserId":10003,"GroupId":10003,"MountPoints":[{"ServerAddr":"0825a4a395-rrf16.cn-hangzhou.nas.aliyuncs.com:/puppeteer","MountDir":"/mnt/auto"}]}
        Checking if nas directories /puppeteer exists, if not, it will be created automatically
        Checking nas directories done ["/puppeteer"]
        Waiting for function html2png to be deployed...
                Waiting for packaging function html2png code...
                The function html2png has been packaged. A total of 7 files files were compressed and the final size was 2.56 KB
                Waiting for HTTP trigger httpTrigger to be deployed...
                triggerName: httpTrigger
                methods: [ 'GET' ]
                url: https://xxxxxx.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/puppeteer/html2png/
                Http Trigger will forcefully add a 'Content-Disposition: attachment' field to the response header, which cannot be overwritten 
                and will cause the response to be downloaded as an attachment in the browser. This issue can be avoided by using CustomDomain.

                trigger httpTrigger deploy success
        function html2png deploy success
service puppeteer deploy success


===================================== Tips for nas resources ==================================================
Fun has detected the .nas.yml file in your working directory, which contains the local directory:

        /Users/vangie/Workspace/puppeteer-example/{{ projectName }}/.fun/root
        /Users/vangie/Workspace/puppeteer-example/{{ projectName }}/node_modules
  
The above directories will be automatically ignored when 'fun deploy'.
Any content of the above directories changes，you need to use 'fun nas sync' to sync local resources to remote.
===============================================================================================================

驗證

curl https://xxxxxx.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/puppeteer/html2png/ > screenshot.png

若是不傳遞查詢參數，默認會截取阿里雲的首頁：

若是想換一個網址，能夠使用以下命令格式：

curl https://xxxxxx.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/puppeteer/html2png/?url=http://www.alibaba.com > screenshot.png

調試

若是須要在本地調試代碼，能夠使用以下命令：

$ fun local start
using template: template.yml
HttpTrigger httpTrigger of puppeteer/html2png was registered
        url: http://localhost:8000/2016-08-15/proxy/puppeteer/html2png
        methods: [ 'GET' ]
        authType: ANONYMOUS


function compute app listening on port 8000!

瀏覽器打開 http://localhost:8000/2016-08-15/proxy/puppeteer/html2png 便可。

參考閱讀

三分鐘學會如何在函數計算中使用 puppeteer