Skip to content

CHICPRO

  • Life Log
  • Cycling Log
  • Photo Log
    • Portrait
    • Landscape
    • Flower
    • Etc
  • Coding Log
  • Information

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/

Post navigation

Previous Post:

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

Next Post:

[PHP] Slimframework를 이용한 영카트5 상품정보 API 서버 구성

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Posts

  • SK 세븐모바일 유심 셀프교체
  • php 배열 연산에서 + 와 array_merge 의 차이
  • pcntl_fork 를 이용한 다중 프로세스 실행
  • 아이폰 단축어를 이용하여 주중 공휴일엔 알람 울리지 않게 하기
  • 구글 캘린더 전체일정 재동기화
  • OpenLiteSpeed 웹서버에 HTTP 인증 적용
  • OpenLiteSpeed 웹어드민 도메인 연결
  • WireGuard를 이용한 VPN 환경 구축
  • Ubuntu 22.04 서버에 OpenLiteSpeed 웹서버 세팅
  • 맥 vim 세팅

Recent Comments

  • 편리 on 업무관리용 그누보드 게시판 스킨
  • 임종섭 on 업무관리용 그누보드 게시판 스킨
  • 캐논 5D 펌웨어 | Dslr 펌웨어 업그레이드 방법 82 개의 베스트 답변 on 캐논 EOS 30D 펌웨어 Ver 1.0.6 , EOS 5D 펌웨어 Ver 1.1.1
  • Top 5 캐논 5D 펌웨어 Top 89 Best Answers on 캐논 EOS 30D 펌웨어 Ver 1.0.6 , EOS 5D 펌웨어 Ver 1.1.1
  • 편리 on 워드프레스 애니메이션 gif 파일을 mp4로 변환하여 출력하기
  • 임팀장 on 워드프레스 애니메이션 gif 파일을 mp4로 변환하여 출력하기
  • 편리 on Notepad++ NppFTP 플러그인 수동 설치
  • paul-j on Notepad++ NppFTP 플러그인 수동 설치
  • YS on Windows 10 iCloud 사진 저장 폴더 변경
  • 편리 on Docker를 이용한 Centos7 + httpd + php 5.4 개발환경 구축

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org
© 2025 CHICPRO | Built using WordPress and SuperbThemes