三分鐘學會如何在函數計算中使用 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罷了。那麼，最理想的狀況就是用最少的時間寫膠水，將更多的時間投入到核心應用的開發中，甚至，完全實現整個軟件棧的微服務化。函數計算就是這裏的膠水。

總結
函數計算有以下優點：

無需採購和管理服務器等基礎設施
專一業務邏輯的開發
提供日誌查詢、性能監控、報警等功能快速排查故障
以事件驅動的方式觸發應用響應用戶請求
毫秒級別彈性伸縮，快速實現底層擴容以應對峯值壓力
按需付費。只需爲實際使用的計算資源付費，適合有明顯波峯波谷的用戶訪問場景

原文連接