Node.js
docker
puppeteer

Docker コンテナ上で Puppeteer を動かす

はじめに

最近 Puppeteer を触るのにハマっています。これはヘッドレス Chrome を Node.js で操作することのできるライブラリです。この Puppeteer を Docker コンテナ上で動かせれば、様々な環境でブラウザを操作できて便利そうだなと思い、試してみました。

方法

公式リポジトリ GoogleChrome/puppeteer の README.md にあるサンプルプログラムを少しだけ編集したものを Docker コンテナ上で動かすことを想定します。Docker イメージには node:8.4.0 を使用します。

まず、サンプルプログラムを用意し puppeteer.launch() の引数だけ次のように変更します。Linux SUID Sandbox 環境ではエラーとなって動作しないためです。

script.js
const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    args: [
      '--no-sandbox',
      '--disable-setuid-sandbox'
    ]
  });
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({ path: 'example.png' });

  browser.close();
})();

次に Dockerfile を用意します。

FROM node:8.4.0

RUN apt-get update \
 && apt-get install -y \
      gconf-service \
      libasound2 \
      libatk1.0-0 \
      libc6 \
      libcairo2 \
      libcups2 \
      libdbus-1-3 \
      libexpat1 \
      libfontconfig1 \
      libgcc1 \
      libgconf-2-4 \
      libgdk-pixbuf2.0-0 \
      libglib2.0-0 \
      libgtk-3-0 \
      libnspr4 \
      libpango-1.0-0 \
      libpangocairo-1.0-0 \
      libstdc++6 \
      libx11-6 \
      libx11-xcb1 \
      libxcb1 \
      libxcomposite1 \
      libxcursor1 \
      libxdamage1 \
      libxext6 \
      libxfixes3 \
      libxi6 \
      libxrandr2 \
      libxrender1 \
      libxss1 \
      libxtst6 \
      ca-certificates \
      fonts-liberation \
      libappindicator1 \
      libnss3 \
      lsb-release \
      xdg-utils \
      wget

WORKDIR /app
RUN npm i puppeteer

COPY ./script.js .

ENTRYPOINT ["node", "/app/script.js"]

apt-get コマンドでインストールするライブラリについては Puppeteer » Troubleshooting の Debian Dependencies を参考にしました。このドキュメントでは前述の puppeteer.launch() の引数についても言及されています。

あとは docker build ならびに docker run を実行すれば OK です。サンプルプログラム実行時に撮影されたスクリーンショットの画像ファイル example.pngdocker run を実行したディレクトリに配置されていれば成功です :tada:

$ docker build -t puppeteer .
$ docker run --rm -it -v $(pwd):/opt/data-volume -w /opt/data-volume puppeteer
$ open example.png

スクリーンショット 2017-08-31 21.28.40.png

参考