Headless #GoogleChrome + #node puppeteer + #docker로 웹페이지 스크린샷을 만드는 예
Dockerfile
npm i puppeteer-core
이 없으면 움직이지 않았다고 생각하기 때문에 추가하고 있습니다 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 hub에 올라 있기 때문에 그대로 사용해도
docker run -it --name=puppeter-docker yumainaura/puppeter-docker bash
node
docker run -it --name=puppeter-docker yumainaura/puppeter-docker bash
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
이것이야.
성공
Yahoo.com의 변환 예
pptruser@73b979b895b0:~$ ls
Downloads example.png
docker container에서 이미지를 복사하고 mac에서 열어보십시오.
$ docker cp puppeter-docker:/home/pptruser/example.png ./
$ open example.png
이것이야.
성공
Yahoo.com의 변환 예
그런데 스타벅스 나무 의자에서 카이로에서 자리를 잡고있는 사람이있었습니다.
스크린 샷 해 두었습니다.
Original by Github issue
Reference
이 문제에 관하여(Headless #GoogleChrome + #node puppeteer + #docker로 웹페이지 스크린샷을 만드는 예), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/YumaInaura/items/79659a267fa81d74a7ce
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
Reference
이 문제에 관하여(Headless #GoogleChrome + #node puppeteer + #docker로 웹페이지 스크린샷을 만드는 예), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/YumaInaura/items/79659a267fa81d74a7ce텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)