更多雲原生技術資訊可關注阿里巴巴雲原生技術圈。
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 也可以在內存中正確渲染網頁的內容。
那么 Puppeteer 能做什么呢？
- 生成網頁截圖或者 PDF
- 抓取 SPA（Single-Page Application) 進行服務器渲染（SSR）
- 高級爬蟲，可以爬取大量異步渲染內容的網頁
- 模擬鍵盤輸入、表單自動提交、登錄網頁等，實現 UI 自動化測試
- 捕獲站點的時間線，以便追蹤你的網站，幫助分析網站性能問題
本文選擇截圖場景作為演示。
廢話不多說了，我們直接給大家介紹下如何用函數計算產品來快速部署一個 Puppeteer Web 應用。
如何快速部署一個分布式 Puppeteer Web 應用？
為了快速部署分布式 Puppeteer Web 應用，本文以函數計算服務為例來做展示。
函數計算（Function Compute）: 函數計算是一個事件驅動的服務，通過函數計算，用戶無需管理服務器等運行情況，只需編寫代碼並上傳。函數計算准備計算資源，並以彈性伸縮的方式運行用戶代碼，而用戶只需根據實際代碼運行所消耗的資源進行付費。函數計算更多信息參考。
有了函數計算服務，我們這里目標是搭建一個分布式應用，但做的事情其實很簡單，那就是寫好業務代碼，部署到函數計算，僅此而已。
使用函數計算后，我們的系統架構圖如下：
效果演示
可以直接通過以下鏈接查看效果：
https://1911504709953557.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/puppeteer-test/html2png/?url=https://www.aliyun.com/product/fc
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 表示要使用的模板名稱，可以省略該名稱，省略后，可以從終端提示的列表中自行選擇需要的模板。
執行完畢后，可以看到如下的目錄結構：
.
├── index.js
├── package.json
└── template.yml
相比較於傳統的 puppeteer 應用，這里僅僅多了一個 template.yml 文件，用於描述函數計算的資源。
而 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 的操作。這里用戶經常遇到的問題，主要是：
- 由於 chromium 的體積比較大，所以經常遇到網絡問題導致下載失敗。
- npm 僅僅只下載 chromium，chromium 依賴的系統庫並不會自動安裝。用戶還需要自行查找缺失的依賴進行安裝。
Fun 做的優化主要是：
- 通過檢測網絡環境，對於國內用戶，會幫助配置淘寶 NPM 鏡像實現加速下載的效果。
- 自動為用戶安裝 chromium 所缺失的依賴庫。
Fun 是如何把大依賴部署到函數計算的？不是有代碼包大小的限制嗎？
基本上所有的 FaaS 為了優化函數冷啟動，都會加入函數代碼包大小的限制。函數計算也不例外。但是，Fun 通過內置 NAS（阿里雲文件存儲） 解決方案，可以一鍵幫用戶創建、配置 NAS，並上傳依賴到 NAS 上。而函數計算在運行時，可以自動從 NAS 讀取到函數依賴。
為了幫助用戶自動化地完成這些操作，Fun 內置了一個向導（3.1.1 版本僅支持 node，后續會支持更多，歡迎 github issue 提需求），在檢測到代碼體積大小超過平台限制時，會提示是否由 Fun 將其改造成 NAS 的方案，整個向導的邏輯如下：
- 詢問是否使用 Fun 來自動化的配置 NAS 管理依賴？（如果回答是，則進入向導，回答否，則繼續發布流程）
- 檢測用戶的 yml 中是否已經配置了 NAS
- 如果已經配置，則提示用戶選擇已經配置的 NAS 存儲函數依賴
- 如果沒有配置，則提示用戶是否使用NasConfig: Auto自動創建 NAS 配置
- 如果選擇了是，則幫助用戶自動配置 nas、vpc 資源。
- 如果選擇了否，則列出用戶當前 NAS 控制台上已經有的 NAS 資源，讓用戶選擇
- 無論上面使用哪種方式，最終都會在 template.yml 生成 NAS 以及 VPC 相關的配置
- 根據語言檢測，比如 node runtime，會將 node_modules 以及 .fun/root 目錄映射到 nas 目錄（通過 .nas.yml 實現）
- 自動執行 fun nas sync 幫用戶把本地的依賴上傳到 NAS 服務
- 自動執行 fun deploy，幫用戶把代碼上傳到函數計算
- 提示幫助信息，對於 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 的方式安裝外，還有很多其他方法，他們均有各自適用的場景：
- 命令式安裝。比如
fun install -f functionName -p npm puppeteer。這種安裝方式的好處是即使對 fun 不了解的用戶也可以傻瓜式的使用。 - 聲明式安裝。這種安裝方式的好處是提供了類 Dockerfile 的體驗，Dockerfile 的大部分指令在這里都是可以直接使用的。通過這種方式聲明的依賴，可以通過直接提交到版本倉庫。他人拉取代碼后，也可以一鍵安裝所有依賴。
- 交互環境安裝。這種安裝方式的好處是提供了類似傳統物理機的安裝體驗。在交互環境中，大部分 linux 命令都是可以使用的，而且可以不斷試錯。
總結
本文介紹了一種比較簡單易行地從零開始搭建分布式 Puppeteer Web 服務的方法。利用該方法，可以做到不需要關心如何安裝依賴、也不需要關系如何上傳依賴，順滑地完成部署。
部署完成后，即可享受函數計算帶來的優勢，即：
- 無需采購和管理服務器等基礎設施，只需專注業務邏輯的開發，可以大幅縮短項目交付時間和人力成本
- 提供日志查詢、性能監控、報警等功能快速排查故障
- 免運維，毫秒級別彈性伸縮，快速實現底層擴容以應對峰值壓力，性能優異
- 成本極具競爭力
“阿里巴巴雲原生關注微服務、Serverless、容器、Service Mesh 等技術領域、聚焦雲原生流行技術趨勢、雲原生大規模的落地實踐，做最懂雲原生開發者的技術圈。”