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

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

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

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

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

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

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

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

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

위 코드를 source.js 파일로 저장하고 node 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

편리

PHP와 MariaDB, jQuery 등을 사용해 게시판, 쇼핑몰 솔루션을 개발합니다. 그누보드5와 영카트5 개발에 참여 했습니다. Linux와 Nginx는 물론 WordPress, Git 등에도 관심이 많습니다. 자전거 타기 및 사진 촬영을 취미로 하고 있습니다.

Leave a Reply

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