Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8833

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

$
0
0

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.mdFROM 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.mdRUN npm i puppeteer-core

# Run everything after as non-privileged user.USER pptruserWORKDIR /home/pptruserCMD ["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


Viewing all articles
Browse latest Browse all 8833

Trending Articles