更多云原生技術(shù)資訊可關(guān)注阿里巴巴云原生技術(shù)圈。

創(chuàng)新互聯(lián)建站自成立以來，一直致力于為企業(yè)提供從網(wǎng)站策劃、網(wǎng)站設(shè)計、網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計、電子商務(wù)、網(wǎng)站推廣、網(wǎng)站優(yōu)化到為企業(yè)提供個性化軟件開發(fā)等基于互聯(lián)網(wǎng)的全面整合營銷服務(wù)。公司擁有豐富的網(wǎng)站建設(shè)和互聯(lián)網(wǎng)應(yīng)用系統(tǒng)開發(fā)管理經(jīng)驗、成熟的應(yīng)用系統(tǒng)解決方案、優(yōu)秀的網(wǎng)站開發(fā)工程師團(tuán)隊及專業(yè)的網(wǎng)站設(shè)計師團(tuán)隊。

Puppeteer 是什么？

puppeteer 官網(wǎng)的介紹如下：
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 以***面的方式運行（當(dāng)然也可以運行在有界面的服務(wù)器上），然后可以通過代碼控制瀏覽器的行為，即使是非界面的模式運行，Chrome 或 Chromium 也可以在內(nèi)存中正確渲染網(wǎng)頁的內(nèi)容。<br />那么 Puppeteer 能做什么呢？

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

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

廢話不多說了，我們直接給大家介紹下如何用函數(shù)計算產(chǎn)品來快速部署一個 Puppeteer Web 應(yīng)用。

如何快速部署一個分布式 Puppeteer Web 應(yīng)用？

為了快速部署分布式 Puppeteer Web 應(yīng)用，本文以函數(shù)計算服務(wù)為例來做展示。

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

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

使用函數(shù)計算后，我們的系統(tǒng)架構(gòu)圖如下：

效果演示

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

搭建步驟步驟：

整體流程如下圖所示：

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

1. 工具安裝

安裝 Fun 工具：

建議直接從這里下載二進(jìn)制可執(zhí)行程序，解壓后即可直接使用。下載地址。

安裝 Docker：
可以按照這里介紹的方法進(jìn)行安裝。

2. 初始化項目：

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

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

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

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

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

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 內(nèi)容如下：

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

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

3. 一鍵安裝依賴

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

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

fun install -d

4. 本地運行、調(diào)試函數(shù)

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

5. 一鍵部署應(yīng)用

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

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

$ fun deploy

fun 會自動完成依賴的部署。而當(dāng)檢測到打包的依賴超過了平臺的限制時，會進(jìn)入到配置向?qū)?，幫助用戶自動化地配置?/p>

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

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

FAQ

在安裝 puppeteer 時，F(xiàn)un 都做了哪些事情？

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

1. 由于 chromium 的體積比較大，所以經(jīng)常遇到網(wǎng)絡(luò)問題導(dǎo)致下載失敗。
2. npm 僅僅只下載 chromium，chromium 依賴的系統(tǒng)庫并不會自動安裝。用戶還需要自行查找缺失的依賴進(jìn)行安裝。

Fun 做的優(yōu)化主要是：

1. 通過檢測網(wǎng)絡(luò)環(huán)境，對于國內(nèi)用戶，會幫助配置淘寶 NPM 鏡像實現(xiàn)加速下載的效果。
2. 自動為用戶安裝 chromium 所缺失的依賴庫。

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

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

為了幫助用戶自動化地完成這些操作，F(xiàn)un 內(nèi)置了一個向?qū)В?.1.1 版本僅支持 node，后續(xù)會支持更多，歡迎 github issue?提需求），在檢測到代碼體積大小超過平臺限制時，會提示是否由 Fun 將其改造成 NAS 的方案，整個向?qū)У倪壿嬋缦拢?/p>

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

是否可以指定 puppeteer 的版本？

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

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

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

如果 Puppeteer 后續(xù)版本更新后，依賴更多的系統(tǒng)依賴，本文介紹的方法還適用嗎？

Fun 內(nèi)置了 .so 缺失檢測機制，當(dāng)在本地調(diào)試運行時，會智能地根據(jù)報錯識別出缺失的依賴庫，然后精準(zhǔn)地給出安裝命令，可以做到一鍵安裝。

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

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

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

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

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

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

總結(jié)

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

部署完成后，即可享受函數(shù)計算帶來的優(yōu)勢，即：

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

“阿里巴巴云原生關(guān)注微服務(wù)、Serverless、容器、Service Mesh 等技術(shù)領(lǐng)域、聚焦云原生流行技術(shù)趨勢、云原生大規(guī)模的落地實踐，做最懂云原生開發(fā)者的技術(shù)圈?！?/p>

本文名稱：有了serverless，前端也可以快速開發(fā)一個Puppeteer網(wǎng)頁截圖服務(wù)
文章路徑：http://aaarwkj.com/article34/gjijpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制開發(fā)、網(wǎng)站內(nèi)鏈、外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計、手機網(wǎng)站建設(shè)、App開發(fā)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)