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.)
                                
                                
                                우수한 개발자 콘텐츠 발견에 전념
                                (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.)