puppeteer 설치 하기

phantomJS를 이용해서 url rendering 프로그램을 돌리고 있던 나에게 어느 순간 PhantomJs 관리자가 사실 상 개발을 중단했다는 소문을 듣게 되었다. 

구글 크롬팀에서 크롬에 headless chrome을 내장하기 시작했고, 그에 맞춰 puppeteerjs를 release 한 게 phantomjs 중단 원인이라 할 수 있겠다.

 

그래서 이번 기회에 나도 puppeteer로 갈아타기로 결심했다.

 

우선 puppeteer를 설치해 보자. puppeteer를 설치하기 위해서는 nodejs를 먼저 설치해야 한다. 

아래의 링크에서 nodejs를 다운 받자.

 

https://nodejs.org/ko/download/

다운로드 | Node.js

 

다운 받은 압축 파일을 적당한 위치에 풀고 node/bin 경로를 path에 추가해 주자.

 

이제 puppeteer를 개발할 폴더 위치로 가서 npm으로 puppeteer를 설치하자.

 

$> npm install puppeteer

 

puppeteer가 설치 되었고, 이제 간단한 js 파일을 만들어서 puppeteer를 테스트 해보자.

 

screenshot.js

const puppeteer = require('puppeteer');
const timeOut = 100 * 1000;

puppeteer.launch({
    headless: true,
    slowMo:30,
    args: ['--window-size=800x600', '--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage', '--disable-accelerated-2d-canvas', '--disable-gpu']
}).then(async browser=> {
    const page = await browser.newPage();
    await page.setRequestInterception(false);
    await page.goto('http://daum.net', {waitUntil:'networkidle2', timeout:25000});
    await page.screenshot({path: '/tmp/daum.jpg'});
	await page.close();
    await browser.close();
});

 

daum.net을 rendering 한 후 rendering 페이지를 스크린샷 찍도록 구현한 코드이다.

작성된 코드를 실행해 보자.

 

$> node screenshot.js

 

해당 코드를 실행해보면, 아래와 같은 에러가 발생 할 수가 있다.

 

 error while loading shared libraries: libX11.so.6: cannot open shared object file: No such file or directory
libXss.so.1: cannot open shared object file
libatk-bridge-2.0.so.0: cannot open shared object file: No such file or directory

 

전부 해당 library가 없어서 생기는 에러이며 puppeteer 실행을 위한 dependency를 설치해 주어야 한다.

centOS의 경우 아래와 같이 실행해 주자.

 

$> sudo yum install pango.x86_64 libXcomposite.x86_64 libXcursor.x86_64 libXdamage.x86_64 libXext.x86_64 libXi.x86_64 libXtst.x86_64 cups-libs.x86_64 libXScrnSaver.x86_64 libXrandr.x86_64 GConf2.x86_64 alsa-lib.x86_64 atk.x86_64 gtk3.x86_64 ipa-gothic-fonts xorg-x11-fonts-100dpi xorg-x11-fonts-75dpi xorg-x11-utils xorg-x11-fonts-cyrillic libatk-bridge-2.0.so.0 xorg-x11-fonts-Type1 xorg-x11-fonts-misc -y
$> yum update nss -y

 

ubuntu의 경우 아래와 같이 실행하자.

 

$> apt-get install gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget

 

이제 다시 실행해 보자. daum.jpg 파일이 잘 만들어진 걸 확인할 수 있다. 하지만 해당 파일을 열어보면 한글이 죄다 깨져 있다.

puppeteer를 실행한 시스템에 한글 폰트가 없어서 발생한 문제이다.

아래와 같이 한글 폰트를 설치해 주자.

 

$> yum install fonts-korean

 

/usr/share/fonts 폴더를 열어 보면, 아래의 폰트들이 설치된 것을 확인할 수가 있다.

 

$> ls /usr/share/fonts
baekmuk-ttf dejavu ipa-gothic urw-base35

 

나같은 경우에는 /usr/share/fonts 위치에 NanumFont 폴더를 추가로 생성한 후 나눔폰트를 추가해 줬다.

(다른 시스템에서 ttf 파일 복사 후에 NanumFont 폴더 안에 ttf 파일을 넣어줌)

다시 실행해 보면 한글 깨짐 없이 잘 스크린샷이 되는 것을 확인할 수가 있다.