Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

https://github.com/YumaInaura/YumaInaura/issues/2645

YumaInaura
Ruby on Rails 業務経験 約5年 / Perl PHP Python Golang Linux Apache MySQL BigQuery Jenkins ansible AWS など / いなうらゆうま / YumaInaura / 稲浦悠馬
http://twitter.com/yumainaura
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away