Headless #GoogleChrome + #node puppeteer + #docker로 웹페이지 스크린샷을 만드는 예

6525 단어 Chrome도커Node.js

Dockerfile


  • 거의 공식적인 troubleshooting 그대로 htps : // 기주 b. 코 m/오오 gぇCh 로메/푸페테에 r/bぉb/마s테 r/도 cs/t 로bぇ쇼오친 g. md
  • 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


  • 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
    

    이것이야.



    성공



    Yahoo.com의 변환 예


  • 비동기 처리이므로 조금 시간이 걸렸습니다
  • 이미지가 끊어졌지만 변환 중에 크기 조정을하면 짠 매화가 될 것입니다



  • 그런데 스타벅스 나무 의자에서 카이로에서 자리를 잡고있는 사람이있었습니다.



    스크린 샷 해 두었습니다.



    Original by Github issue

    좋은 웹페이지 즐겨찾기