**更多雲原生技術資訊可關注[阿里巴巴雲原生技術圈](https://developer.aliyun.com/group/alisoftwaretech/)。**

# Puppeteer 是什麼？

>[puppeteer 官網](https://yq.aliyun.com/go/articleRenderRedirect?url=https%3A%2F%2Fpptr.dev)的介紹如下：
> Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the [DevTools Protocol](https://yq.aliyun.com/go/articleRenderRedirect?url=https%3A%2F%2Fchromedevtools.github.io%2Fdevtools-protocol%2F). Puppeteer runs [headless](https://yq.aliyun.com/go/articleRenderRedirect?url=https%3A%2F%2Fdevelopers.google.com%2Fweb%2Fupdates%2F2017%2F04%2Fheadless-chrome) 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 應用，本文以[函式計算服務](https://fc.console.aliyun.com/fc/overview/cn-hangzhou)為例來做展示。

> **函式計算（Function Compute）**: 函式計算是一個事件驅動的服務，透過函式計算，使用者無需管理伺服器等執行情況，只需編寫程式碼並上傳。函式計算準備計算資源，並以彈性伸縮的方式執行使用者程式碼，而使用者只需根據實際程式碼執行所消耗的資源進行付費。函式計算更多資訊[參考](https://help.aliyun.com/product/50980.html)。

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

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

![1.png](https://ucc.alicdn.com/pic/developer-ecology/e794415eb6714d6cba6f23ef55561b6c.png)

## 效果演示

可以直接透過以下連結檢視效果： [https://1911504709953557.cn-hangzhou.fc.aliyuncs.com/2016-08-15/proxy/puppeteer-test/html2png/?url=https://www.aliyun.com/product/fc](https://yq.aliyun.com/go/articleRenderRedirect?url=https%3A%2F%2F1911504709953557.cn-hangzhou.fc.aliyuncs.com%2F2016-08-15%2Fproxy%2Fpuppeteer-test%2Fhtml2png%2F%3Furl%3Dhttps%3A%2F%2Fwww.aliyun.com%2Fproduct%2Ffc) **PS：第一次請求可能會有幾秒的冷啟動時間，透過使用[預留模式](https://statistics.functioncompute.com/?title=%E6%9C%89%E4%BA%86%20serverless%EF%BC%8C%E5%89%8D%E7%AB%AF%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%20Puppeteer%20%E7%BD%91%E9%A1%B5%E6%88%AA%E5%9B%BE%E6%9C%8D%E5%8A%A1&src=article&author=%E5%B0%8F%E9%BB%98&url=https://help.aliyun.com/document_detail/138103.html?spm=a2c4g.11174283.6.687.882d5212Y0AECh)可以完全去除冷啟動，這題超綱，下次再講。**

## 搭建步驟步驟：

整體流程如下圖所示：

![2.png](https://ucc.alicdn.com/pic/developer-ecology/1b2593c841654e80aa2215e97bd0a929.png)

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

### 1. 工具安裝

**安裝 Fun 工具**：

建議直接從這裡下載二進位制可執行程式，解壓後即可直接使用。[下載地址](https://statistics.functioncompute.com/?title=%E6%9C%89%E4%BA%86%20serverless%EF%BC%8C%E5%89%8D%E7%AB%AF%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%20Puppeteer%20%E7%BD%91%E9%A1%B5%E6%88%AA%E5%9B%BE%E6%9C%8D%E5%8A%A1&src=article&author=%E5%B0%8F%E9%BB%98&url=https://github.com/alibaba/funcraft/blob/master/docs/usage/installation-zh.md)。

**安裝 Docker**：
可以按照[這裡介紹的方法](https://statistics.functioncompute.com/?title=%E6%9C%89%E4%BA%86%20serverless%EF%BC%8C%E5%89%8D%E7%AB%AF%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%20Puppeteer%20%E7%BD%91%E9%A1%B5%E6%88%AA%E5%9B%BE%E6%9C%8D%E5%8A%A1&src=article&author=%E5%B0%8F%E9%BB%98&url=https://github.com/alibaba/funcraft/blob/master/docs/usage/installation-zh.md?spm=a2c4e.10696291.0.0.6bb619a4UjYXqN#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](https://statistics.functioncompute.com/?title=%E6%9C%89%E4%BA%86%20serverless%EF%BC%8C%E5%89%8D%E7%AB%AF%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%20Puppeteer%20%E7%BD%91%E9%A1%B5%E6%88%AA%E5%9B%BE%E6%9C%8D%E5%8A%A1&src=article&author=%E5%B0%8F%E9%BB%98&url=https://github.com/alibaba/funcraft/blob/master/docs/specs/2018-04-03-zh-cn.md?spm=a2c4e.10696291.0.0.717019a45X1W0g&file=2018-04-03-zh-cn.md) 檔案，用於描述函式計算的資源。 而 index.js 就是我們的業務程式碼了，可以按照 [Puppeteer 官方幫助文件](https://yq.aliyun.com/go/articleRenderRedirect?url=https%3A%2F%2Fpptr.dev)的要求書寫自己的業務程式碼，這裡不再重複闡述，核心程式碼如下：

```
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 本身依賴了非常多的[系統庫](https://yq.aliyun.com/go/articleRenderRedirect?url=https%3A%2F%2Fgithub.com%2FGoogleChrome%2Fpuppeteer%2Fissues%2F560)，要安裝哪些系統庫、如何安裝這些系統庫成了一個比較頭痛的問題。

好在函式計算命令列工具 [Fun](https://statistics.functioncompute.com/?title=%E6%9C%89%E4%BA%86%20serverless%EF%BC%8C%E5%89%8D%E7%AB%AF%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%20Puppeteer%20%E7%BD%91%E9%A1%B5%E6%88%AA%E5%9B%BE%E6%9C%8D%E5%8A%A1&src=article&author=%E5%B0%8F%E9%BB%98&url=https://github.com/alibaba/funcraft) 已經整合了 Puppeteer 的解決方案，只要 package.json 中包含了 puppeteer 依賴，然後使用 fun install -d 即可一鍵安裝所有系統依賴。

```
fun install -d
```

### 4. 本地執行、除錯函式

Puppeteer 的本地執行、除錯方法與[這裡](https://statistics.functioncompute.com/?title=%E6%9C%89%E4%BA%86%20serverless%EF%BC%8C%E5%89%8D%E7%AB%AF%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%20Puppeteer%20%E7%BD%91%E9%A1%B5%E6%88%AA%E5%9B%BE%E6%9C%8D%E5%8A%A1&src=article&author=%E5%B0%8F%E9%BB%98&url=https://yq.aliyun.com/articles/683683)介紹的完全一致，我們就不再重複介紹。我們這裡只演示下執行效果：

![4.gif](https://ucc.alicdn.com/pic/developer-ecology/fbb3e889d01c4783a67fc765347e9747.gif)

### 5. 一鍵部署應用

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

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

```
$ fun deploy
```

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

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

![5.png](https://ucc.alicdn.com/pic/developer-ecology/c39f0166c43f4a27b90cc72617af846b.png)

如果有其他的需求，比如想使用自己已經存在的 NAS 服務，可以在提示使用 [NasConfig: Auto](https://statistics.functioncompute.com/?title=%E6%9C%89%E4%BA%86%20serverless%EF%BC%8C%E5%89%8D%E7%AB%AF%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%20Puppeteer%20%E7%BD%91%E9%A1%B5%E6%88%AA%E5%9B%BE%E6%9C%8D%E5%8A%A1&src=article&author=%E5%B0%8F%E9%BB%98&url=https://yq.aliyun.com/articles/712693) 時，輸入 no，這樣就會進入到相應的流程。更詳細的說明，請參考下面的 FAQ。

## FAQ

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

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

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

Fun 做的最佳化主要是：

1. 透過檢測網路環境，對於國內使用者，會幫助配置[淘寶 NPM 映象](https://yq.aliyun.com/go/articleRenderRedirect?url=https%3A%2F%2Fnpm.taobao.org%2F)實現加速下載的效果。
1. 自動為使用者安裝 chromium 所缺失的依賴庫。

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

基本上所有的 FaaS 為了最佳化函式冷啟動，都會加入函式程式碼包大小的限制。函式計算也不例外。但是，Fun 透過內建 NAS（阿里雲檔案儲存） 解決方案，可以一鍵幫使用者建立、配置 NAS，並上傳依賴到 NAS 上。而函式計算在執行時，可以自動從 NAS 讀取到函式依賴。

為了幫助使用者自動化地完成這些操作，Fun 內建了一個嚮導（3.1.1 版本僅支援 node，後續會支援更多，歡迎 [github issue ](https://statistics.functioncompute.com/?title=%E6%9C%89%E4%BA%86%20serverless%EF%BC%8C%E5%89%8D%E7%AB%AF%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%20Puppeteer%20%E7%BD%91%E9%A1%B5%E6%88%AA%E5%9B%BE%E6%9C%8D%E5%8A%A1&src=article&author=%E5%B0%8F%E9%BB%98&url=https://yq.aliyun.com/go/articleRenderRedirect?url=https%3A%2F%2Fgithub.com%2Falibaba%2Ffuncraft%2Fissues)提需求），在檢測到程式碼體積大小超過平臺限制時，會提示是否由 Fun 將其改造成 NAS 的方案，整個嚮導的邏輯如下：

1. 詢問是否使用 Fun 來自動化的配置 NAS 管理依賴？（如果回答是，則進入嚮導，回答否，則繼續釋出流程）
1. 檢測使用者的 yml 中是否已經配置了 NAS
1. 如果已經配置，則提示使用者選擇已經配置的 NAS 儲存函式依賴
1. 如果沒有配置，則提示使用者是否使用[NasConfig: Auto](https://statistics.functioncompute.com/?title=%E6%9C%89%E4%BA%86%20serverless%EF%BC%8C%E5%89%8D%E7%AB%AF%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%20Puppeteer%20%E7%BD%91%E9%A1%B5%E6%88%AA%E5%9B%BE%E6%9C%8D%E5%8A%A1&src=article&author=%E5%B0%8F%E9%BB%98&url=https://yq.aliyun.com/articles/712693)自動建立 NAS 配置
1. 如果選擇了是，則幫助使用者自動配置 nas、vpc 資源。
1. 如果選擇了否，則列出使用者當前 NAS 控制檯上已經有的 NAS 資源，讓使用者選擇
1. 無論上面使用哪種方式，最終都會在 template.yml 生成 NAS 以及 VPC 相關的配置
1. 根據語言檢測，比如 node runtime，會將 node_modules 以及 .fun/root 目錄對映到 nas 目錄（透過 .nas.yml 實現）
1. 自動執行 fun nas sync 幫使用者把本地的依賴上傳到 NAS 服務
1. 自動執行 fun deploy，幫使用者把程式碼上傳到函式計算
1. 提示幫助資訊，對於 HTTP Trigger 的，提示函式的 Endpoint，直接開啟瀏覽器訪問即可看到效果

### 是否可以指定 puppeteer 的版本？

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

### 函式計算例項中的時區採用的 UTC，是否有辦法改為北京時間？

某些網頁的顯示效果是和時區掛鉤的，時區不同，可能會導致顯示的內容有差異。使用本文介紹的方法，可以非常容易的使用 puppeteer 的最新版本，而在 puppeteer 的最新版本 2.0 提供了一個新的 API [page.emulateTimezone(timezoneId)](https://statistics.functioncompute.com/?title=%E6%9C%89%E4%BA%86%20serverless%EF%BC%8C%E5%89%8D%E7%AB%AF%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%20Puppeteer%20%E7%BD%91%E9%A1%B5%E6%88%AA%E5%9B%BE%E6%9C%8D%E5%8A%A1&src=article&author=%E5%B0%8F%E9%BB%98&url=https://github.com/puppeteer/puppeteer/blob/v2.0.0/docs/api.md?spm=a2c4e.10696291.0.0.6b9c19a4BsT3qZ#pageemulatetimezonetimezoneid) , 可以非常容易的修改時區。

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

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

### 如果新增了新的依賴，如何更新？

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

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

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

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

1. [命令式安裝](https://statistics.functioncompute.com/?title=%E6%9C%89%E4%BA%86%20serverless%EF%BC%8C%E5%89%8D%E7%AB%AF%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%20Puppeteer%20%E7%BD%91%E9%A1%B5%E6%88%AA%E5%9B%BE%E6%9C%8D%E5%8A%A1&src=article&author=%E5%B0%8F%E9%BB%98&url=https://yq.aliyun.com/articles/719100)。比如 `fun install -f functionName -p npm puppeteer`。這種安裝方式的好處是即使對 fun 不瞭解的使用者也可以傻瓜式的使用。
1. [宣告式安裝](https://statistics.functioncompute.com/?title=%E6%9C%89%E4%BA%86%20serverless%EF%BC%8C%E5%89%8D%E7%AB%AF%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%20Puppeteer%20%E7%BD%91%E9%A1%B5%E6%88%AA%E5%9B%BE%E6%9C%8D%E5%8A%A1&src=article&author=%E5%B0%8F%E9%BB%98&url=https://yq.aliyun.com/articles/719100)。這種安裝方式的好處是提供了類 Dockerfile 的體驗，Dockerfile 的大部分指令在這裡都是可以直接使用的。透過這種方式宣告的依賴，可以透過直接提交到版本倉庫。他人拉取程式碼後，也可以一鍵安裝所有依賴。
1. [互動環境安裝](https://statistics.functioncompute.com/?title=%E6%9C%89%E4%BA%86%20serverless%EF%BC%8C%E5%89%8D%E7%AB%AF%E4%B9%9F%E5%8F%AF%E4%BB%A5%E5%BF%AB%E9%80%9F%E5%BC%80%E5%8F%91%E4%B8%80%E4%B8%AA%20Puppeteer%20%E7%BD%91%E9%A1%B5%E6%88%AA%E5%9B%BE%E6%9C%8D%E5%8A%A1&src=article&author=%E5%B0%8F%E9%BB%98&url=https://yq.aliyun.com/articles/716663)。這種安裝方式的好處是提供了類似傳統物理機的安裝體驗。在互動環境中，大部分 linux 命令都是可以使用的，而且可以不斷試錯。

## 總結

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

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

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

> “[阿里巴巴雲原生技術圈](https://developer.aliyun.com/group/alisoftwaretech/)關注微服務、Serverless、容器、Service Mesh 等技術領域、聚焦雲原生流行技術趨勢、雲原生大規模的落地實踐，做最懂雲原生開發者的技術圈。”

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

相關文章