有了 serverless，前端也可以快速開發一個 Puppeteer 網頁截圖服務

更多云原生技術資訊可關注阿里巴巴云原生技術圈。

Puppeteer 是什么？

puppeteer 官網的介紹如下：
Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.

通俗描述就是：Puppeteer 可以將 Chrome 或者 Chromium 以***面的方式運行（當然也可以運行在有界面的服務器上），然后可以通過代碼控制瀏覽器的行為，即使是非界面的模式運行，Chrome 或 Chromium 也可以在內存中正確渲染網頁的內容。<br />那么 Puppeteer 能做什么呢？

• 生成網頁截圖或者 PDF
• 抓取 SPA（Single-Page Application) 進行服務器渲染（***）
• 高級爬蟲，可以爬取大量異步渲染內容的網頁
• 模擬鍵盤輸入、表單自動提交、登錄網頁等，實現 UI 自動化測試
• 捕獲站點的時間線，以便追蹤你的網站，幫助分析網站性能問題

本文選擇截圖場景作為演示。

廢話不多說了，我們直接給大家介紹下如何用函數計算產品來快速部署一個 Puppeteer Web 應用。

如何快速部署一個分布式 Puppeteer Web 應用？

為了快速部署分布式 Puppeteer Web 應用，本文以函數計算服務為例來做展示。

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

有了函數計算服務，我們這里目標是搭建一個分布式應用，但做的事情其實很簡單，那就是寫好業務代碼，部署到函數計算，僅此而已。

使用函數計算后，我們的系統架構圖如下：

效果演示

可以直接通過以下鏈接查看效果：<br />https://1911504709953557.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/puppeteer-test/html2png/?url=https://www.aliyun.com/product/fc<br />PS：第一次請求可能會有幾秒的冷啟動時間，通過使用預留模式可以完全去除冷啟動，這題超綱，下次再講。

搭建步驟步驟：

整體流程如下圖所示：

其中，需要我們操作的只有 Fun Init、Fun Install 以及 Fun Deploy 命令，每個的步驟內容都會由這三個命令自動完成。

1. 工具安裝

安裝 Fun 工具：

建議直接從這里下載二進制可執行程序，解壓后即可直接使用。下載地址。

安裝 Docker：
可以按照這里介紹的方法進行安裝。

2. 初始化項目：

通過 Fun 工具，使用下面的命令可以快速初始化一個 Puppeteer Web 應用的腳手架：

fun init -n puppeteer-test http-trigger-node-puppeteer

其中 -n puppeteer-test? 表示初始化項目的目錄名稱， http-trigger-node-puppeteer? 表示要使用的模板名稱，可以省略該名稱，省略后，可以從終端提示的列表中自行選擇需要的模板。<br />執行完畢后，可以看到如下的目錄結構：

.
├── index.js
├── package.json
└── template.yml

相比較于傳統的 puppeteer 應用，這里僅僅多了一個 template.yml 文件，用于描述函數計算的資源。<br />而 index.js 就是我們的業務代碼了，可以按照 Puppeteer 官方幫助文檔的要求書寫自己的業務代碼，這里不再重復闡述，核心代碼如下：

const browser = await puppeteer.launch({
  headless: true,
  args: [
    '--no-sandbox',
    '--disable-setuid-sandbox',
  ]
});
const page = await browser.newPage();
await page.emulateTimezone('Asia/Shanghai');
await page.goto('https://www.baidu.com', {
  'waitUntil': 'networkidle2'
});
await page.screenshot({ path: '/tmp/example', fullPage: true, type: 'png' });
await browser.close();

package.json 內容如下：

{
  ... ...
  "dependencies": {
    "puppeteer": "^2.0.0"
  },
  ... ...
}

可以看到，在 package.json 中聲明了 puppeteer 的依賴。這個也是我們使用 node 開發時的標準做法，并無特別之處。

3. 一鍵安裝依賴

puppeteer 的安裝，即使是在傳統的 linux 機器上，也不是那么的輕松。因為 puppeteer 本身依賴了非常多的系統庫，要安裝哪些系統庫、如何安裝這些系統庫成了一個比較頭痛的問題。

好在函數計算命令行工具 Fun 已經集成了 Puppeteer 的解決方案，只要 package.json 中包含了 puppeteer 依賴，然后使用 fun install -d 即可一鍵安裝所有系統依賴。

fun install -d

4. 本地運行、調試函數

Puppeteer 的本地運行、調試方法與這里介紹的完全一致，我們就不再重復介紹。我們這里只演示下運行效果：

5. 一鍵部署應用

基本上所有的 FaaS 平臺為了減小應用的冷啟動，都會設置代碼包的限制，函數計算也不例外。而 puppeteer 自身已經達到了 350M 左右，連同其系統依賴已經達到了 450M。如何將 450M 體積的函數部署到 FaaS 平臺是一個比較頭痛而且繁瑣的問題。

函數計算的命令行工具 Fun 現在原生支持了這種大依賴部署（3.1.1 版本僅支持 node runtime）。不需要任何額外操作，僅僅執行 fun deploy：

$ fun deploy

fun 會自動完成依賴的部署。而當檢測到打包的依賴超過了平臺的限制時，會進入到配置向導，幫助用戶自動化地配置。

我們這里推薦的路徑是當提示是否由 Fun 自動幫助 NAS 管理是，輸入 yes，然后提示提示是否使用 NasConfig: Auto 自動處理 NAS 時，也選擇是，之后就不需要做其他的事情，等待函數部署成功即可。

如果有其他的需求，比如想使用自己已經存在的 NAS 服務，可以在提示使用 NasConfig: Auto 時，輸入 no，這樣就會進入到相應的流程。更詳細的說明，請參考下面的 FAQ。

FAQ

在安裝 puppeteer 時，Fun 都做了哪些事情？

puppeteer 本身是一個 npm 包，它的安裝是非常簡單的，通過 npm install 即可。這里的問題在于，puppeteer 依賴了 chromium，而 chromium 又依賴一些系統庫。所以 npm install 后，還會觸發下載 chromium 的操作。這里用戶經常遇到的問題，主要是：

1. 由于 chromium 的體積比較大，所以經常遇到網絡問題導致下載失敗。
2. npm 僅僅只下載 chromium，chromium 依賴的系統庫并不會自動安裝。用戶還需要自行查找缺失的依賴進行安裝。

Fun 做的優化主要是：

1. 通過檢測網絡環境，對于國內用戶，會幫助配置淘寶 NPM 鏡像實現加速下載的效果。
2. 自動為用戶安裝 chromium 所缺失的依賴庫。

Fun 是如何把大依賴部署到函數計算的？不是有代碼包大小的限制嗎？

基本上所有的 FaaS 為了優化函數冷啟動，都會加入函數代碼包大小的限制。函數計算也不例外。但是，Fun 通過內置 NAS（阿里云文件存儲） 解決方案，可以一鍵幫用戶創建、配置 NAS，并上傳依賴到 NAS 上。而函數計算在運行時，可以自動從 NAS 讀取到函數依賴。

為了幫助用戶自動化地完成這些操作，Fun 內置了一個向導（3.1.1 版本僅支持 node，后續會支持更多，歡迎 github issue?提需求），在檢測到代碼體積大小超過平臺限制時，會提示是否由 Fun 將其改造成 NAS 的方案，整個向導的邏輯如下：

1. 詢問是否使用 Fun 來自動化的配置 NAS 管理依賴？（如果回答是，則進入向導，回答否，則繼續發布流程）
2. 檢測用戶的 yml 中是否已經配置了 NAS
3. 如果已經配置，則提示用戶選擇已經配置的 NAS 存儲函數依賴
4. 如果沒有配置，則提示用戶是否使用NasConfig: Auto自動創建 NAS 配置
5. 如果選擇了是，則幫助用戶自動配置 nas、vpc 資源。
6. 如果選擇了否，則列出用戶當前 NAS 控制臺上已經有的 NAS 資源，讓用戶選擇
7. 無論上面使用哪種方式，最終都會在 template.yml 生成 NAS 以及 VPC 相關的配置
8. 根據語言檢測，比如 node runtime，會將 node_modules 以及 .fun/root 目錄映射到 nas 目錄（通過 .nas.yml 實現）
9. 自動執行 fun nas sync 幫用戶把本地的依賴上傳到 NAS 服務
10. 自動執行 fun deploy，幫用戶把代碼上傳到函數計算
11. 提示幫助信息，對于 HTTP Trigger 的，提示函數的 Endpoint，直接打開瀏覽器訪問即可看到效果

是否可以指定 puppeteer 的版本？

可以的，只需要修改 package.json 中的 puppeteer 的版本，重新安裝即可。

函數計算實例中的時區采用的 UTC，是否有辦法改為北京時間？

某些網頁的顯示效果是和時區掛鉤的，時區不同，可能會導致顯示的內容有差異。使用本文介紹的方法，可以非常容易的使用 puppeteer 的最新版本，而在 puppeteer 的最新版本 2.0 提供了一個新的 API page.emulateTimezone(timezoneId) , 可以非常容易的修改時區。

如果 Puppeteer 后續版本更新后，依賴更多的系統依賴，本文介紹的方法還適用嗎？

Fun 內置了 .so 缺失檢測機制，當在本地調試運行時，會智能地根據報錯識別出缺失的依賴庫，然后精準地給出安裝命令，可以做到一鍵安裝。

如果添加了新的依賴，如何更新？

如果添加了新的依賴，比如 node_modules 目錄添加了新的依賴庫，只需要重新執行 fun nas sync 進行同步即可。

如果修改了代碼，只需要使用 fun deploy 重新部署即可。由于大依賴和代碼通過 NAS 進行了分離，依賴通常不需要頻繁變化，所以調用的頻率比較低，而 fun deploy 的由于沒有了大依賴

除了本文介紹的方法還有哪些方法可以一鍵安裝 puppeteer？

Fun 提供了非常多的依賴安裝方式，除了本文介紹的將依賴直接聲明在 package.json 中，然后通過 fun install -d 的方式安裝外，還有很多其他方法，他們均有各自適用的場景：

1. 命令式安裝。比如 fun install -f functionName -p npm puppeteer。這種安裝方式的好處是即使對 fun 不了解的用戶也可以傻瓜式的使用。
2. 聲明式安裝。這種安裝方式的好處是提供了類 Dockerfile 的體驗，Dockerfile 的大部分指令在這里都是可以直接使用的。通過這種方式聲明的依賴，可以通過直接提交到版本倉庫。他人拉取代碼后，也可以一鍵安裝所有依賴。
3. 交互環境安裝。這種安裝方式的好處是提供了類似傳統物理機的安裝體驗。在交互環境中，大部分 linux 命令都是可以使用的，而且可以不斷試錯。

總結

本文介紹了一種比較簡單易行地從零開始搭建分布式 Puppeteer Web 服務的方法。利用該方法，可以做到不需要關心如何安裝依賴、也不需要關系如何上傳依賴，順滑地完成部署。

部署完成后，即可享受函數計算帶來的優勢，即：

• 無需采購和管理服務器等基礎設施，只需專注業務邏輯的開發，可以大幅縮短項目交付時間和人力成本
• 提供日志查詢、性能監控、報警等功能快速排查故障
• 免運維，毫秒級別彈性伸縮，快速實現底層擴容以應對峰值壓力，性能優異
• 成本極具競爭力

“阿里巴巴云原生關注微服務、Serverless、容器、Service Mesh 等技術領域、聚焦云原生流行技術趨勢、云原生大規模的落地實踐，做最懂云原生開發者的技術圈。”