puppeteer란?

이번에 프로젝트를 진행하면서 headless 브라우저 띄우며 사용했던 puppeteer에 대해 정리해 보고자 한다. 공식 홈페이지와 실제 사용하면서 정리해두고자 했던 내용 위주로 작성할 예정이며, 틀린 내용이 있을 수도 있다! 🤣

Puppeteer란?

• DevTools 프로토콜을 통해 Chrom 또는 Chromium을 제어하는 고급 API를 제공하는 노드 라이브러리
• 기본적으로 headless로 실행되지만 옵션에 따라 headless가 아닌 상태로 동작시킬 수 있음
• Chrome 59 부터 Headless를 지원
• node 6 이상 에서 동작

headless란?

• 화면이 존재하지 않는 우분투 서버 등과 같은 OS에서 실제 브라우저 창을 띄우지 않고도 백그라운드에서 가상으로 화면을 그릴 수 있는 방법
• 창이 뜨지 않은 상태에서도 실제 브라우저와 동일하게 동작할 수 있도록 함
  
  

puppeteer는 chrome 또는 chromium을 기반으로 동작하기 때문에, chrome이 지원하고 구동할 수 있는 화면들을 Puppeteer로 띄운 headless 브라우저에서도 구현할 수 있다.

puppeteer는 DevTools 프로토콜을 이용하여 브라우저 제어가 가능하다. 또한 DevTools 프로토콜을 통해 Mouse, Keyboard 제어 뿐만 아니라 쿠키 및 세션 스토리지의 사용 등 다양한 기능들을 사용할 수 있다.

즉, puppeteer는 기본적으로 chromium을 기반으로 하고있으며, DevTools 프로토콜을 통해 사용자가 실제 사용하는 환경과 유사한 가상 브라우저를 띄우고, 백그라운드에서 실행할 수 있도록 도와주는 라이브러리로 볼 수 있다.

기능

Puppeteer를 통해 구현 가능한 기능에는 여러가지가 있다.

• 브라우저 렌더링이 가능하며, 스크린 샷 생성 등이 가능
• 화면 렌더링 이후 Mouse, Keyboard 등의 제어 가능
• crawling 가능

이외에도 puppeteer를 통해 다양한 기능의 구현이 가능하다.

설치

puppeteer 설치 방법에 대해 알아보자.

puppeteer는 다음과 같은 명령어로 설치가 가능하다.

npm i puppetee 
# yarn add puppetee

Puppeteer install을 진행하면 최신 버전의 Chromium(~170MB Mac, ~282MB Linux, ~280MB Win)이 함께 다운로드 된다. 순수 puppeteer만 별도로 설치할 수 있는데, 이럴때에는 puppeteer-core로 설치를 진행하면 된다.

puppeteer와 puppeteer-core의 차이점

• puppeteer
  • 브라우저 자동화를 위해 사용
  • 설치 과정에서 Chromium 버전을 다운로드하고 puppeteer-core를 사용하여 구동
  • 제공되는 여러 편리한 환경변수를 통해 동작 컨트롤 가능(PUPPETEER_*)

• puppeteer-core
  • puppeteer-core 설치 시 Chromium을 다운로드하지 않음
  • 프로그래밍 방식의 인터페이스를 통해 구동
  • 모든 PUPPETEER_*환경 변수를 무시
    
• puppeteer vs puppeteer-core
  • puppeteer-core는 설치 과정에서 Chromium을 자동으로 다운로드하지 않음
  • puppeteer-core는 puppeteer 관련 모든 환경 변수를 무시(PUPPETEER_*)
  • 대부분의 경우 puppeteer패키지를 사용하는 것을 추천
    (puppeteer-core를 추천하는 경우는 공식 홈페이지에서 확인 가능)
    
    ** v1.7.0 이후의 모든 릴리즈는 두 개(puppeteer, puppeteer-core)의 패키지를 제공

환경변수

앞서 살펴봤던 것처럼 puppeteer는 다양한 환경변수(PUPPETEER_*)를 제공하고 있지만, 사용했던 옵션은 다음과 같았다.

• PUPPETEER_SKIP_CHROMIUM_DOWNLOAD
  • 설치 단계에서 번들로 제공되는 Chromium을 다운로드 skip 여부
• PUPPETEER_EXECUTABLE_PATH
  • puppeteer.launch에서 사용할 실행 경로를 지정
  • launch 함수 실행 시, 옵션으로도 지정 가능

example

puppeteer의 가장 기본적인 예제는 다음과 같다.

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://velog.io');
  await page.screenshot({path: 'example.png'});

  await browser.close();
})();

여기서 puppeteer.launch()를 실행하면서 옵션을 전달할 수 있다.

const browser = await puppeteer.launch({
  /* headless (default: true)
  * - headless 모드로 실행할지 여부에 대한 설정 값
  * - false로 지정 시 실제 브라우저가 실행되어 창이 뜬다.
  */
	headless: true,
  /* executablePath (default: Chromium-Broswer)
  * - 번들로 제공되는 Chromium 대신 아닌 다른 브라우저의 사용시 설정
  * - 사용할 실행 파일을 설정하면 설정한 크로미움 기반 여러 브라우저의 사용이 가능
  */
    executablePath: '실행할 브라우저 실행 파일 path',
  /* devtools (default: false)
  * - 각 탭에 대해 개발자도구를 자동으로 실행할지 여부에 대한 설정 값
  * - true로 지정 시, headless는 false로 설정되어야 함
  */
    devtools: false,
  /* defaultViewport (default: {width: 800, height: 600})
  * - 브라우저 사이즈 지정
  */
    defaultViewport: {width: 1000, height: 500},
});

마치며

puppeteer의 기본적인 개념과 사용법에 대해 정리해봤다.
puppeteer가 이대로 잘 흘러가주면 좋았겠지만 실제로 서버에 올려 구동할 때에는 여러가지 오류와 이슈들이 있었다.

다음엔 puppeteer를 사용하며 발생했던 오류들에 대해 간단히 기록해보며 정리해보려고 한다.