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

簡介

使用 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 中

總結

函式計算有如下優勢：

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

聯絡方式

歡迎加入釘釘群：函式計算官網客戶群（11721331）。