LoginSignup
0
0

More than 1 year has passed since last update.

Headless #GoogleChrome + #node puppeteer + #docker で Webページのスクリーンショットを作成する例

Last updated at Posted at 2019-10-31

Dockerfile

docker で利用するには一筋縄でいくわけではないよー的なことが書かれている気がする

Getting headless Chrome up and running in Docker can be tricky. The bundled Chromium that Puppeteer installs is missing the necessary shared library dependencies.

# https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md

FROM node:10-slim

# Install latest chrome dev package and fonts to support major charsets (Chinese, Japanese, Arabic, Hebrew, Thai and a few others)
# Note: this installs the necessary libs to make the bundled version of Chromium that Puppeteer
# installs, work.
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add - \
    && sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list' \
    && apt-get update \
    && apt-get install -y google-chrome-unstable fonts-ipafont-gothic fonts-wqy-zenhei fonts-thai-tlwg fonts-kacst fonts-freefont-ttf \
      --no-install-recommends \
    && rm -rf /var/lib/apt/lists/*

# If running Docker >= 1.13.0 use docker run's --init arg to reap zombie processes, otherwise
# uncomment the following lines to have `dumb-init` as PID 1
# ADD https://github.com/Yelp/dumb-init/releases/download/v1.2.0/dumb-init_1.2.0_amd64 /usr/local/bin/dumb-init
# RUN chmod +x /usr/local/bin/dumb-init
# ENTRYPOINT ["dumb-init", "--"]

# Uncomment to skip the chromium download when installing puppeteer. If you do,
# you'll need to launch puppeteer with:
#     browser.launch({executablePath: 'google-chrome-unstable'})
# ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true

# Install puppeteer so it's available in the container.
RUN npm i puppeteer \
    # Add user so we don't need --no-sandbox.
    # same layer as npm install to keep re-chowned files from using up several hundred MBs more space
    && groupadd -r pptruser && useradd -r -g pptruser -G audio,video pptruser \
    && mkdir -p /home/pptruser/Downloads \
    && chown -R pptruser:pptruser /home/pptruser \
    && chown -R pptruser:pptruser /node_modules

# Add Diff from https://github.com/GoogleChrome/puppeteer/blob/master/docs/troubleshooting.md
RUN npm i puppeteer-core

# Run everything after as non-privileged user.
USER pptruser
WORKDIR /home/pptruser

CMD ["google-chrome-unstable"]

docker run

docker hub にアップしているのでそのまま使っていただいても

docker run -it --name=puppeter-docker yumainaura/puppeter-docker  bash

node

  • node で js スクリプトを実行して example.com のスクリーンショットを作成する
  • こちらもほぼ公式のままだが --no-sandox を指定しないとエラーで落ちる様子
const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({args: ['--no-sandbox']});
  const page = await browser.newPage();
  await page.goto('https://example.com');
  await page.screenshot({path: 'example.png'});
  await browser.close();
})();

e.g

pptruser@73b979b895b0:~$ node
> const puppeteer = require('puppeteer');
undefined
> (async () => {
...   const browser = await puppeteer.launch({args: ['--no-sandbox']});
...   const page = await browser.newPage();
...   await page.goto('https://example.com');
...   await page.screenshot({path: 'example.png'});
...   await browser.close();
... })();
Promise {
  <pending>,
  domain:
   Domain {
     domain: null,
     _events:
      [Object: null prototype] {
        removeListener: [Function: updateExceptionCapture],
        newListener: [Function: updateExceptionCapture],
        error: [Function: debugDomainError] },
     _eventsCount: 3,
     _maxListeners: undefined,
     members: [],
     [Symbol(kWeak)]: WeakReference {} } }

スクリーンショット

pngで保存されている

pptruser@73b979b895b0:~$ ls
Downloads  example.png

local = host でスクリーンショットを確認する

docker container から画像をコピーして mac で開いてみる

$ docker cp puppeter-docker:/home/pptruser/example.png ./ 
$ open example.png

これだよ

成功

image

Yahoo.com の変換例

  • 非同期処理なので少し時間がかかった
  • 画像が切れているが、変換時にサイズ調整とかすればええ塩梅になるはず

image

ところでスターバックスの木の椅子で、カイロで席取りをしている人がいたのですが

スクリーンショットしておきました。

image

Original by Github issue

チャットメンバー募集

何か質問、悩み事、相談などあればLINEオープンチャットもご利用ください。

Twitter

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0