截圖的誘惑：Docker部署Puppeteer專案

擼起袖子吃雞發表於2019-03-04

一、`Puppeteer`介紹及安裝

Puppeteer是一個Node庫，它提供了一個高階API來通過DevTools協議控制Chromium。
在谷歌推出這款headless瀏覽器後，Selenium直接被我拋棄了，因為Puppeteer對於Nodejs開發者來說簡直太友好了，（正常情況下）只需要npm i puppeteer，即可完成安裝，而不需要安裝其他的依賴庫（當初太年輕o(╥﹏╥)o，其實並不簡單）。

系統環境的話在工作時使用MacOS，部署到伺服器上的是Centos 7.
在MacOS上確實簡單，只需要npm i puppeteer就行。安裝不了有下列幾條解決辦法：

# 1. 設定環境變數跳過下載 Chromium（2018-09-03已失效）
set PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=1

# 2. 只下載模組而不build，但chromium需要自行下載（2018-09-03有效）
npm i --save puppeteer --ignore-scripts

# 3. Puppeteer從v1.7.0開始額外提供一個puppeteer-core的庫，它只包含Puppeteer的核心庫，預設不下載chromium
npm i puppeteer-core

# 如果連puppeteer都安裝不了，建議使用淘寶映象
npm config set registry="https://registry.npm.taobao.org"
複製程式碼

如果Chromium是自行下載的，則啟動headless瀏覽器時需增加如下配置項

this.browser = await puppeteer.launch({
  // MacOS應該在"xxx/Chromium.app/Contents/MacOS/Chromium"，Linux應該"/usr/bin/chromium-browser"
  executablePath: "Chromium的安裝路徑",
  // 去沙盒
  args: [`--no-sandbox`, `--disable-dev-shm-usage`],
});
複製程式碼

Chromium下載，Linux下需要安裝其他依賴
 點選瞭解Puppeteer的用例

二、技巧

懶載入截圖

在截圖或者爬蟲時，常常遇到一些頁面採用懶載入的方式展示資料，首屏是不會展示全部的資訊給我們。
針對懶載入，採用滾動到底的方式來破解。
啥？懶載入沒有底，嘗試直接調他們的介面吧，或者還有其他高明的方式歡迎指出

page.evaluate(pageFunction, …args): 該函式能讓我們使用內建的DOM選擇器

這裡要特別注意下pageFunction的傳參方式為：

const result = await page.evaluate(param1, param2, param3 => {
  return Promise.resolve(8 + param1 + param2 + param3);
}, param1, param2, param3);

// 也可以傳一個字串：
console.log(await page.evaluate(`1 + 2`)); // 輸出 "3"
const x = 10;
console.log(await page.evaluate(`1 + ${x}`)); // 輸出 "11"
複製程式碼

程式碼：以簡書的懶載入為例

/**
 * 懶載入頁面自動滾動 
 */
const path = require(`path`);
const puppeteer = require(`puppeteer-core`);

const log = console.log;
(async () => {
  const browser = await puppeteer.launch({
    // executablePath: path.join(__dirname, `./chromium/Chromium.app/Contents/MacOS/Chromium`),
    // 關閉headless模式, 會開啟瀏覽器
    headless: false,
    args: [`--no-sandbox`, `--disable-dev-shm-usage`],
  });
  const page = await browser.newPage();
  await page.goto(`https://www.jianshu.com/u/40909ea33e50`);
  await autoScroll(page);

  // fullPage截圖
  await page.screenshot({
    path: `auto_scroll.png`,
    type: `png`,
    fullPage: true,
  });
  await browser.close();
})();

async function autoScroll(page) {
  log(`[AutoScroll begin]`);
  await page.evaluate(async () => {
    await new Promise((resolve, reject) => {
      // 頁面的當前高度
      let totalHeight = 0;
      // 每次向下滾動的距離
      let distance = 100;
      // 通過setInterval迴圈執行
      let timer = setInterval(() => {
        let scrollHeight = document.body.scrollHeight;

        // 執行滾動操作
        window.scrollBy(0, distance);

        // 如果滾動的距離大於當前元素高度則停止執行
        totalHeight += distance;
        if (totalHeight >= scrollHeight) {
          clearInterval(timer);
          resolve();
        }
      }, 100);
    });
  });

  log(`[AutoScroll done]`);
  // 完成懶載入後可以完整截圖或者爬取資料等操作
  // do what you like ...
}
複製程式碼

元素精確截圖

精確截圖，顧名思義是將元素在頁面上所佔據的區域摳下來。那麼換成Puppeteer的方式來處理，是利用screenshot的clip引數，根據元素相對視窗的座標（x、y）及元素的款寬高（width、height）定位截圖。當然了，元素選擇器必須要找準，否則再怎麼樣也無法精確截圖

page.screenshot引數 clip
element.getBoundingClientRect(): 通過這個方法可以獲取到元素在視窗內的相對位置（返回物件中包括 left、top、width、height），相關知識點可谷歌瞭解下
$eval: 此方法在頁面內執行 document.querySelector ，然後把匹配到的元素作為第一個引數傳給 pageFunction

const path = require(`path`);
const puppeteer = require(`puppeteer-core`);

const log = console.log;
(async () => {
  const browser = await puppeteer.launch({
    // executablePath: path.join(__dirname, `./chromium/Chromium.app/Contents/MacOS/Chromium`),
    // 關閉headless模式, 會開啟瀏覽器
    headless: false,
    args: [`--no-sandbox`, `--disable-dev-shm-usage`],
  });
  const page = await browser.newPage();
  await page.goto(`https://www.jianshu.com/`);
  const pos = await getElementBounding(page, `.board`);

  // clip截圖
  await page.screenshot({
    path: `element_bounding.png`,
    type: `png`,
    clip: {
      x: pos.left,
      y: pos.top,
      width: pos.width,
      height: pos.height
    }
  });
  await browser.close();
})();

async function getElementBounding(page, element) {
  log(`[GetElementBounding]: `, element);

  const pos = await page.$eval(element, e => {
    // 相當於在evaluate的pageFunction內執行
    // document.querySelector(element).getBoundingClientRect()
    const {left, top, width, height} = e.getBoundingClientRect();
    return {left, top, width, height};
  });
  log(`[Element position]: `, JSON.stringify(pos, undefined, 2));
  return pos;
}
複製程式碼

OK，目前為止我們能可以對大部分的元素截圖了，其餘的是處於內滾動的元素

內滾動元素截圖

內滾動：相對於傳統的window窗體滾動，它的主滾動條是在頁面（或者某個元素）的內部，而不是在瀏覽器窗體上。最常見的是在後臺管理介面，左側欄和右側的內容區的滾動條是分開的。

想象一下，開啟網易雲音樂，首屏會出現兩個內滾動條，如果我們想看到更多的歌單，需要將滾動條下滑。
內滾動截圖也是同樣的道理，結合頁面滾動讓目標元素暴露在可視範圍內，再通過視窗座標來達到精確截圖。

步驟：

獲取目標元素的座標，判斷其是否在當前可視範圍內，如果在視窗內，則無需滾動
由於是內滾動，目標元素外面必定套了一層有滾動條的父元素，通過滾動該父元素來間接展示目標元素。所以這一步需要確定父元素的選擇器
通過模擬頁面滾動父元素（設定 window.scrollBy 或者 scrollLeft scrollTop），使目標物件剛好能完整地出現在視窗內
因為是內滾動，所以需要重新獲取目標元素的座標（getBoundingClientRect）
利用新座標截圖

這兒有個小細節，關於如何判斷元素是否有滾動條。如果元素無X軸滾動條，那麼設定他的scrollLeft是沒有效果的，這時只能全域性滾動才行。

// 如果scrollWidth值大於clientWidth值，則可以說明其出現了橫向滾動條
element.scrollHeight > element.clientHeight

// 如果scrollHeight值大於clientHeight值，則可以說明其出現了豎向滾動條
element.scrollHeight > element.clientHeight
複製程式碼

示例程式碼：以Nodejs官方文件中的內滾動為例，獲取左側欄中TTY的截圖

/**
 * 擷取左側欄中TTY所在的li節點
 */
const path = require(`path`);
const puppeteer = require(`puppeteer-core`);

const log = console.log;
(async () => {
  const browser = await puppeteer.launch({
    executablePath: path.join(__dirname, `./chromium/Chromium.app/Contents/MacOS/Chromium`),
    // 關閉headless模式, 會開啟瀏覽器
    headless: false,
    args: [`--no-sandbox`, `--disable-dev-shm-usage`],
  });
  const page = await browser.newPage();
  await page.setViewport({width: 1920, height: 600});
  const viewport = page.viewport();

  // Nodejs官方Api文件站
  await page.goto(`https://nodejs.org/dist/latest-v10.x/docs/api/`);

  // await page.waitFor(1000);
  // 這裡強烈建議使用 waitForNavigation，1000這中魔鬼數字會讓程式碼變得不放心
  await page.waitForNavigation({
      // 20秒超時時間
      timeout: 20000,
      // 不再有網路連線時判定頁面跳轉完成
      waitUntil: [
        `domcontentloaded`,
        `networkidle0`,
      ],
    });

  // step1: 確定內滾動的父元素選擇器
  const containerEle = `#column2`;
  // step1: 確定目標元素選擇器
  const targetEle = `#column2 ul:nth-of-type(2) li:nth-of-type(40)`;

  // step1: 獲取目標元素在當前視窗內的座標
  let pos = await getElementBounding(page, targetEle);

  // 使用內建的DOM選擇器
  const ret = await page.evaluate(async (viewport, pos, element) => {

    // step1: 判斷目標元素是否在當前可視範圍內
    const sumX = pos.width + pos.left;
    const sumY = pos.height + pos.top;

    // X軸和Y軸各需要移動的距離
    const x = sumX <= viewport.width ? 0 : sumX - viewport.width;
    const y = sumY <= viewport.height ? 0 : sumY - viewport.height;

    const el = document.querySelector(element);

    // strp3: 將元素滾動進視窗可視範圍內
    // 此處需要判斷目標元素的x、y是否可滾動，如果元素不能滾動則滾動window
    // 如果scrollWidth值大於clientWidth值，則可以說明其出現了橫向滾動條
    if (el.scrollWidth > el.clientWidth) {
      el.scrollLeft += x;
    } else {
      window.scrollBy(x, 0);
    }
    // 如果scrollHeight值大於clientHeight值，則可以說明其出現了豎向滾動條
    if (el.scrollHeight > el.clientHeight) {
      el.scrollTop += y;
    } else {
      window.scrollBy(0, y);
    }

    return [el.scrollHeight, el.clientHeight];
  }, viewport, pos, containerEle);

  // step4: 由於目標元素在視窗外，且處於內滾動父元素內，所以需要重新獲取座標
  pos = await getElementBounding(page, targetEle);
  
  // await page.waitFor(1000);
  // 這裡強烈建議使用 waitForNavigation，1000這中魔鬼數字會讓程式碼變得不放心
  await page.waitForNavigation({
      // 20秒超時時間
      timeout: 20000,
      // 不再有網路連線時判定頁面跳轉完成
      waitUntil: [
        `domcontentloaded`,
        `networkidle0`,
      ],
    });

  // 5. 截圖
  await page.screenshot({
    path: `scroll_and_bounding.png`,
    type: `png`,
    clip: {
      x: pos.left,
      y: pos.top,
      width: pos.width,
      height: pos.height
    }
  });
  await browser.close();
})();
複製程式碼

三、踩過的坑：在 `Linux` 上安裝 `Chromium`

事實證明：在Linux環境中安裝Chromium的經歷會無比難忘。
安裝puppeteer時，會自動下載Chromium，由於眾所周知的原因，下載常常以失敗告終。換個映象源後Chromium能下載成功，但啟動後
各種報錯，是Linux上缺少部分依賴導致的。安裝完需要的依賴，程式碼順利執行。但截圖卻發現瀏覽器上的中文字型竟全是框框框框。OK，安裝字型庫，中文字正常顯示了！

踩坑後的最佳實踐

採用Chromium和npm包分開的方式，只安裝puppeteer-core，通過executablePath引入自行下載的Chromium，極大加快npm install 的速度。
將Linux的映象源切換成阿里的映象源，可以快速下載Chromium
將專案改用Docker部署，避免出現本地開發正常，上線後卻出現各種問題的情況
儘量避免使用page.waifFor(1000)，1000毫秒數只是毛估估的時間，讓程式自己決定效果會更好

相關解決辦法：

yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic xorg-x11-fonts-Type1 xorg-x11-fonts-misc -y
複製程式碼

Alpine安裝技巧

# 設定阿里映象源
echo "https://mirrors.aliyun.com/alpine/edge/main" > /etc/apk/repositories
echo "https://mirrors.aliyun.com/alpine/edge/community" >> /etc/apk/repositories
echo "https://mirrors.aliyun.com/alpine/edge/testing" >> /etc/apk/repositories

# 安裝Chromium及依賴，包括中文字型支援
apk -U --no-cache update
apk -U --no-cache --allow-untrusted add zlib-dev xorg-server dbus ttf-freefont chromium wqy-zenhei@edge -f
複製程式碼

安裝完後需要去沙箱才能執行，儘管官方並不推薦。

Linux沙箱：在電腦保安領域，沙箱(Sandbox)是一種程式的隔離執行機制，其目的是限制不可信程式的許可權。沙箱技術經常被用於執行未經測試的或不可信的客戶程式。為了避免不可信程式可能破壞其它程式的執行。

--no-sandbox: 去沙箱執行
--disable-dev-shm-usage: 預設情況下，Docker執行一個/dev/shm共享記憶體空間為64MB 的容器。這通常對Chrome來說太小，並且會導致Chrome在渲染大頁面時崩潰。要修復，必須執行容器 docker run --shm-size=1gb 以增加/dev/shm的容量。從Chrome 65開始，使用--disable-dev-shm-usage標誌啟動瀏覽器即可，這將會寫入共享記憶體檔案/tmp而不是/dev/shm.

const browser = await puppeteer.launch({
  args: [`--no-sandbox`, `--disable-dev-shm-usage`]
});
複製程式碼

四、通過 `Docker容器` 部署專案

專案幹到最後，發現每次都需要安裝Chromium，可能每次都會出現不可預料的問題出現。為了節約時間成本幹更多有意義的事情，通過 shell指令碼 和 Docker容器化 優化上述的部署流程。

Docker開發流程

確定基礎映象
基於基礎映象編寫Dockerfile
根據Dockerfile構建專案映象
將構建的映象推送到Docker倉庫，如果私有化部署直接將映象匯出，再去客戶環境匯入即可
在測試/生產機器上拉取專案映象建立並執行Docker容器
驗證專案是否正常執行

這裡以部署一個基於`Puppeteer`的服務為例

確定基礎映象

# 在Docker Hub或私有倉庫上搜尋需要的映象
docker search node
複製程式碼

前往Docker Hub能看到更詳細的描述和版本

# 在這選擇 `node:10-alpine` 為基礎映象
docker pull node:10-alpine
複製程式碼

編寫`Dockerfile` （攻略不全，建議網上找更詳細的資料）

FROM: 指定基礎映象，必須是Dockerfile中的第一個非註釋指令

FROM <image name>
FROM node:10-alpine
複製程式碼

MAINTAINER: 設定該映象的作者

MAINTAINER <author name> (不推薦使用，推薦使用LABEL來指定映象作者)
LABEL MAINTAINER="zhangqiling" (推薦)
複製程式碼

RUN: 在shell或者exec的環境下執行的命令。RUN指令會在新建立的映象上新增新的層面，接下來提交的結果用在Dockerfile的下一條指令中

RUN <command>

# RUN可以執行任何命令，然後在當前映象上建立一個新層並提交
RUN echo "https://mirrors.aliyun.com/alpine/edge/main" > /etc/apk/repositories

# 執行多條命令時，可以通過  換行
RUN apk -U add 
  zlib-dev 
  xorg-server
複製程式碼

RUN指令建立的中間映象會被快取，並會在下次構建中使用。如果不想使用這些快取映象，可以在構建時指定--no-cache引數，如：docker build --no-cache。

CMD: 提供了容器預設的執行命令。 Dockerfile只允許使用一次CMD指令，如果存在多個CMD，也只有最後一個會生效

# 有三種形式
CMD ["executable","param1","param2"]
CMD ["param1","param2"]
CMD command param1 param2
複製程式碼

COPY: 於複製構建環境中的檔案或目錄到映象中

COPY <src>... <dest>
COPY ["<src>",... "<dest>"]

# 將專案複製到my_app目錄下
COPY . /workspase/my_app
複製程式碼

ADD: 也是複製構建環境中的檔案或目錄到映象

ADD <src>... <dest>
ADD ["<src>",... "<dest>"]
複製程式碼

相比COPY, ADD的<src>可以是一個URL。同時如果是壓縮檔案，Docker會自動解壓。

WORKDIR: 指定RUN、CMD與ENTRYPOINT命令的工作目錄

WORKDIR /workspase/my_app
複製程式碼

ENV: 設定環境變數

# 兩種方式
ENV <key> <value>
ENV <key>=<value>
複製程式碼

VOLUME: 授權訪問從容器內到主機上的目錄

VOLUME ["/data"]
複製程式碼

EXPOSE: 指定容器在執行時監聽的埠

EXPOSE <port>;
複製程式碼

附上測試通過的`Dockerfile`樣例

幾個注意點

使用國內阿里雲映象站加快安裝依賴
預設不支援中文顯示，必須使用文泉驛的免費中文字型，這個庫只有在 https://mirrors.aliyun.com/alpine/edge/testing/能找到
容器內預設市區不是東八區，會影響日誌列印，需要重新設定時區
Centos機器上的docker容器內 npm install 會報錯，設定 npm config set unsafe-perm true後能順利安裝，這是什麼原因？（MacOS上的docker沒這個問題）

# 拉取node映象
FROM node:10-alpine

# 設定映象作者
LABEL MAINTAINER="qiyang.hqy@dtwave-inc.com"

# 設定國內阿里雲映象站、安裝chromium 68、文泉驛免費中文字型等依賴庫
RUN echo "https://mirrors.aliyun.com/alpine/v3.8/main/" > /etc/apk/repositories 
    && echo "https://mirrors.aliyun.com/alpine/v3.8/community/" >> /etc/apk/repositories 
    && echo "https://mirrors.aliyun.com/alpine/edge/testing/" >> /etc/apk/repositories 
    && apk -U --no-cache update && apk -U --no-cache --allow-untrusted add 
      zlib-dev 
      xorg-server 
      dbus 
      ttf-freefont 
      chromium 
      wqy-zenhei@edge 
      bash 
      bash-doc 
      bash-completion -f

# 設定時區
RUN rm -rf /etc/localtime && ln -s /usr/share/zoneinfo/Asia/Shanghai /etc/localtime

# 設定環境變數
ENV NODE_ENV production

# 建立專案程式碼的目錄
RUN mkdir -p /workspace

# 指定RUN、CMD與ENTRYPOINT命令的工作目錄
WORKDIR /workspace

# 複製宿主機當前路徑下所有檔案到docker的工作目錄
COPY . /workspace

# 清除npm快取檔案
RUN npm cache clean --force && npm cache verify
# 如果設定為true，則當執行package scripts時禁止UID/GID互相切換
# RUN npm config set unsafe-perm true

# 安裝pm2
RUN npm i pm2 -g

# 安裝依賴
RUN npm install

# 暴露埠
EXPOSE 3000

# 執行命令
ENTRYPOINT pm2-runtime start docker_pm2.json
複製程式碼

參考文件，感謝分享

部署SDN：拒絕誘惑認真思考企業需求
2017-08-01
Puppeteer之大屏批量截圖
2018-10-22
iPhone 5C的“炫富”誘惑
2013-09-19
iPhone
開源的誘惑——資料庫篇
2021-12-31
資料庫
ubuntu上的蘋果mac主題誘惑
2014-04-11
Ubuntu蘋果Mac
docker部署專案
2018-07-10
Docker
“真金”誘惑，印度遊戲大爆發
2019-12-10
遊戲
學習C++（二）書的誘惑 (轉)
2008-01-22
C++
[部署02] Docker 部署vue專案
2020-03-21
DockerVue
docker中部署專案
2020-09-24
Docker
Docker 部署 vue 專案
2024-09-24
DockerVue
Docker部署Java專案
2024-08-19
DockerJava
矽谷的誘惑：中國IT人才如何去矽谷找工作
2014-02-21
底層--遊戲開發的終極誘惑
2007-10-12
遊戲開發
Docker部署Python專案
2020-06-24
DockerPython
使用 Docker 部署 vue 專案
2019-12-31
DockerVue
使用 Docker 部署 Angular 專案
2019-12-19
DockerAngular
docker部署Web專案(二)
2017-06-08
DockerWeb
C# 專案 docker 部署
2024-04-24
C#Docker
使用node+puppeteer+express搭建截圖服務
2021-01-02
Express
Docker-Docker部署SpringBoot專案
2021-01-12
DockerSpring Boot
Docker（四）Docker部署SpringBoot專案
2020-10-01
DockerSpring Boot
Linux部署之Docker方式部署專案
2020-09-04
LinuxDocker
被IT行業誘惑如何轉行做個IT人
2014-10-21
行業
Docker搭建部署Node專案
2020-07-13
Docker
Docker部署SpringBoot專案
2024-06-16
DockerSpring Boot
docker 部署 django + mysql + vue 專案
2024-03-08
DockerDjangoMySqlVue
網頁設計中，誘惑大腦中的“原始人”
2016-02-28
網頁
現實生活:程式是對話&伊甸園裡的誘惑
2012-09-05
基於 Docker 映象部署 go 專案
2020-07-02
DockerGo
使用 Docker 部署 Spring Boot 專案
2020-01-20
DockerSpring Boot
嘗試使用 docker 部署 Laravel 專案
2019-08-24
DockerLaravel
使用 Docker 部署 NodeJS + MongoDB 專案
2019-06-17
DockerNodeJSMongoDB
使用Docker部署Spring Boot專案
2019-06-24
DockerSpring Boot
如何用Docker Compose部署專案？
2021-12-26
Docker
在docker容器中部署Web專案
2017-06-08
DockerWeb
Citypos專案的docker化部署實踐
2019-04-10
Docker
基於Docker&Fabric的Web專案部署方案
2016-03-17
DockerWeb

截圖的誘惑：Docker部署Puppeteer專案

一、Puppeteer介紹及安裝

二、技巧

懶載入截圖

元素精確截圖

內滾動元素截圖

三、踩過的坑：在 Linux 上安裝 Chromium

四、通過 Docker容器 部署專案

這裡以部署一個基於Puppeteer的服務為例