截圖的誘惑: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的用例

二、技巧

懶載入截圖

滾動截圖.gif

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

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 ...
}
複製程式碼

元素精確截圖

精確截圖.gif

精確截圖,顧名思義是將元素在頁面上所佔據的區域下來。 那麼換成Puppeteer的方式來處理,是利用screenshotclip引數,根據元素相對視窗的座標(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,目前為止我們能可以對大部分的元素截圖了,其餘的是處於內滾動的元素

內滾動元素截圖

內滾動截圖.gif

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

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

網易雲音樂內滾動條.png
內滾動元素座標示例.png

步驟:

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

這兒有個小細節,關於如何判斷元素是否有滾動條。如果元素無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,安裝字型庫,中文字正常顯示了!

踩坑後的最佳實踐

  • 採用Chromiumnpm包分開的方式,只安裝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
複製程式碼
# 設定阿里映象源
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開發流程

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

這裡以部署一個基於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: 指定RUNCMDENTRYPOINT命令的工作目錄

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
複製程式碼

參考文件,感謝分享

相關文章