chrome headless 모드를 이용하여 랜더링된 html 소스 가져오기

2017-08-18 by 편리

vus.js 등의 자바스크립트를 이용하여 웹페이지의 화면을 구성하는 경우가 많은데 이럴 경우 일반적인 방법으로는 실제 사용자가 보는 화면의 html 소스를 가져올 수가 없다. PhantomJS 등을 이용해서 처리를 할 수가 있으나 리눅스 크롬브라우저 59 버전부터는 headless 모드를 지원하기 때문에 이를 이용해서 랜더링된 페이지의 html 소스를 가져오기로 한다. 두 가지 방법을 시도했으며 각자의 선택으로 적당한 방법을 선택하면 된다.

–dump-dom 옵션을 이용한 방법

별도의 작업없이 크롬 설치만으로 사용할 수 있는 방법이다.

$ /usr/bin/google-chrome --headless --disable-gpu --dump-dom "http://example.com"

–disable-gpu 옵션은 최신 버전에서는 필요하지 않으나 오류가 발생한다면 추가하도록 한다. html 소스 코드를 파일로 저장하려면 위 명령어 끝에 > file.html 과 같이 추가한다. PHP를 이용하여 실행하기 위해서는 아래와 같이 코드를 작성한다.

<?php
error_reporting( E_CORE_ERROR | E_CORE_WARNING | E_COMPILE_ERROR | E_ERROR | E_WARNING | E_PARSE | E_USER_ERROR | E_USER_WARNING );

$url = 'http://example.com';

function getRenderedContent($url) {
    $out = exec('/usr/bin/google-chrome --headless --disable-gpu --dump-dom "'.$url.'" &', $output);

    return $output;
}

$output = getRenderedContent($url);

print_r(implode("\n", $output));

자료
– https://blog.outsider.ne.kr/1291
– https://developers.google.com/web/updates/2017/04/headless-chrome

node js 와 chrome-remote-interface를 이용한 방법

크롬 브라우저를 디버깅 모드로 실행해서 js 코드를 이용해 웹페이지의 소스를 가져온다. 디버깅 모드로의 크롬 실행은 아래와 같이 한다.

$ google-chrome --headless --disable-gpu --remote-debugging-port=9222 --window-size=1280x1696 &

포트 9222로 크롬의 개발자도구를 컨트롤할 수 있게 된다. 이 작업을 쉽게해주는 것이 chrome-remote-interface 이다. 제공되는 API를 통해 html 소스를 가져오기 위한 코드는 아래와 같다. node js 는 미리 설치해야 한다.

const chrome = require('chrome-remote-interface');
const prettyhtml = require('pretty');

function onPageLoad(DOM) {
    return DOM.getDocument().then(node => {
        return DOM.getOuterHTML({nodeId: node.root.nodeId}).then(res => {
            console.log(prettyhtml(res.outerHTML));
        });
    });
}

var url = 'http://example.com';

chrome(protocol => {
    const {Page, DOM} = protocol;

    Page.enable().then(() => {
        Page.navigate({url: url});

        // window.onload fired
        Page.loadEventFired(() => {
            onPageLoad(DOM).then(() => {
                protocol.close();
            });
        });
    });

}).on('error', err => {
    throw Error('Cannot connect to Chrome:' + err);
});

위 코드를 source.js 파일로 저장하고 node js로 실행한다.

$ node source.js

html 소스 코드를 파일로 저장하려면 끝에 > file.html 등과 같이 추가한다.

자료
– https://github.com/cyrus-and/chrome-remote-interface
– https://www.npmjs.com/package/pretty
– https://www.anothersky.pw/2017/06/headless_chrome.html

Leave a Reply Cancel reply