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

2017-08-22 by 편리

혼란하다. 혼란해!!

지난 번 포스트를 바탕으로 좀 더 기능 개선을 거친 버전이라고 할 수 있을 것 같다. 실제 서비스로 사용하기에는 어떨지 모르겠지만.. 브라우저로 접속해서 입력한 url 페이지에 접속해서 html 소스를 가져오도록 했다. nodejs와 기타 여러 모듈을 사용했는데.. nodejs는 책을 한 줄도 보지 않았기 때문에 뭔 소리인지 모르겠다.

우선 nodejs와 기타 모듈 설치를 진행한다.

$ curl -sL https://deb.nodesource.com/setup_7.x | sudo -E bash -
$ sudo apt install nodejs
$ sudo npm install chrome-launcher
$ sudo npm install chrome-remote-interface
$ sudo npm install pretty
$ sudo npm install yargs

nodejs 에서 실행될 source.js 코드

const chromeLauncher = require('chrome-launcher');
const chrome = require('chrome-remote-interface');
const prettyhtml = require('pretty');
const argv = require('yargs').argv

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

var url = argv.url;
var port = argv.port;

chromeLauncher.launch({
    port: port,
    chromeFlags: ['--headless', '--disable-gpu']
}).then(launcher => {
    chrome({
        port: port
    }).then((protocol) => {
        const {Page, DOM} = protocol;
    
        Page.enable().then(() => {
            Page.navigate({url: url});
    
            // window.onload fired
            Page.loadEventFired(() => {
                onPageLoad(DOM).then(() => {
                    protocol.close();
                    launcher.kill();
                });
            });
        });  
    }).catch((err) => console.log('Cannot connect to Chrome:' + err));
});

브라우저에서 접속하여 nodejs 명령을 실행하기 위해 php를 이용한다. source.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 = trim($_GET['url']);
$port = preg_replace('#[^0-9]#', '', $_GET['port']);

if(!$port)
    $port = 9222;

if(!$url)
    die('url error.');

exec('/usr/bin/node source.js --port="'.$port.'" --url="'.$url.'"', $out);

echo implode("\n", $out);

** 자료
https://www.npmjs.com/package/yargs
https://www.npmjs.com/package/pretty
https://github.com/cyrus-and/chrome-remote-interface
https://www.npmjs.com/package/chrome-launcher
https://nodejs.org/ko/download/package-manager/

Leave a Reply Cancel reply