三分鐘學會如何在函式計算中使用 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 中複製程式碼

為什麼要使用函式計算

函式計算是一個相對較新的事物，可能大部分開發人員或架構師對它很陌生。微服務架構是當下很流行的一種系統架構，微服務架構有沒有不夠完美的地方？答案是肯定的。基於微服務架構，我們需要考慮使用什麼微服務框架來架構系統、需要多少臺伺服器、如何有效減輕運維負擔等一些列問題。另外，按照《福布斯》雜誌的統計，在商業和企業資料中心的典型伺服器僅提供 5%～15% 的平均最大處理能力的輸出。這無疑是一種資源的巨大浪費。

有沒有辦法解決上面的不足？答案也是肯定的，阿里雲函式計算就是在這樣的背景下應運而生的。如果把雲端計算理解成一個執行環境，那麼，在這個環境裡，函式（即業務邏輯的載體）+ 資料（即跟業務相關的輸入與輸出）就是應用的核心，有了函式、資料、事件這三者，其它任何程式碼和框架，無非是整個應用的膠水和UI罷了。那麼，最理想的情況就是用最少的時間寫膠水，將更多的時間投入到核心應用的開發中，甚至，徹底實現整個軟體棧的微服務化。函式計算就是這裡的膠水。

開發效率

可靠性

成本

安全

總結

函式計算有如下優勢：

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