<div id="readability-page-1" class="page"><div id="kakaoContent">

                <div>
                                            <p><a href="/m/category/JavaScript">JavaScript</a></p><h2>[Node.js] 노드 서버에서 브라우저 화면 캡처하기(puppeteer)</h2>
                    <p><cite>
                        <span>JayLee</span>
                    </cite>
                </p></div>
                <p><time>2021. 7. 9. 18:22</time>
                    <span>
                        
                                                    <a href="#comment" onclick="Utils.smoothScroll(this);return false">
                                
                            </a>
                        
                                                    <span id="title_daumlike">
                                
                                <span id="mobile-reaction"></span>
                                
                            </span>
                                            </span>
                </p>

                                    
                
                <div>
                    <p data-ke-size="size16">안녕하세요. <b>Jay</b>입니다.</p>
<p data-ke-size="size16">&nbsp;오늘은 서버 환경에서 브라우저 화면을 캡쳐하는 방법에 대해서 알아보도록 하겠습니다. 일반적으로 브라우저를 사용한다고 하면 당연히 클라이언트에서 브라우저 화면을 띄워서 사용해야한다고 생각합니다. 하지만, 서버 환경에서도 브라우저에 접속하는 것이 가능합니다.&nbsp; Headless Browser라고 해서 GUI(Graphic User Interface)가 없는 환경을 사용하면 됩니다. 화면만 표시가 되지 않을뿐 일반적인 브라우저와 동일하게 동작합니다.</p>
<p data-ke-size="size16">&nbsp;오늘은 Node 환경에서 Chromium 혹은 Chrome을 제어할 수 있도록 개발된 puppeteer 라이브러리를 살펴보려고 합니다. puppeteer 라이브러리에 대한 정보는 아래 링크에서 확인 가능합니다.</p>

<figure id="og_1625821536956" contenteditable="false" data-ke-type="opengraph" data-ke-align="alignCenter" data-og-type="object" data-og-title="puppeteer/puppeteer" data-og-description="Headless Chrome Node.js API. Contribute to puppeteer/puppeteer development by creating an account on GitHub." data-og-host="github.com" data-og-source-url="https://github.com/puppeteer/puppeteer" data-og-url="https://github.com/puppeteer/puppeteer" data-og-image="https://scrap.kakaocdn.net/dn/g3nEj/hyKPmxfEeB/XL5F5UCbd7DUosSVUOCulK/img.png?width=1200&amp;height=600&amp;face=0_0_1200_600,https://scrap.kakaocdn.net/dn/bSuSSG/hyKQwyfAkM/BMu9YKeVfqXPBUp00Q7kT1/img.png?width=290&amp;height=422&amp;face=0_0_290_422"><a href="https://github.com/puppeteer/puppeteer" target="_blank" rel="noopener" data-source-url="https://github.com/puppeteer/puppeteer">

<div>
<p data-ke-size="size16">puppeteer/puppeteer</p>
<p data-ke-size="size16">Headless Chrome Node.js API. Contribute to puppeteer/puppeteer development by creating an account on GitHub.</p>
<p data-ke-size="size16">github.com</p>
</div>
</a><img src="https://scrap.kakaocdn.net/dn/g3nEj/hyKPmxfEeB/XL5F5UCbd7DUosSVUOCulK/img.png?width=1200&amp;height=600&amp;face=0_0_1200_600,https://scrap.kakaocdn.net/dn/bSuSSG/hyKQwyfAkM/BMu9YKeVfqXPBUp00Q7kT1/img.png?width=290&amp;height=422&amp;face=0_0_290_422"></figure>


<p data-ke-size="size16">npm 프로젝트를 하나 생성하고, puppeteer 패키지를 추가합니다.</p>
<pre id="code_1625821830707" data-ke-language="javascript" data-ke-type="codeblock"><code>&gt; npm install puppeteer</code></pre>

<p data-ke-size="size16">index.js 파일을 하나 만들고 아래와 같이 작성합니다.</p>
<pre id="code_1625821864345" data-ke-language="javascript" data-ke-type="codeblock"><code>const puppeteer = require('puppeteer');

puppeteer.launch()
	.then((browser) =&gt; {
		return browser.newPage()
			.then((page) =&gt; {
				return page.goto('http://google.com')
				.then(() =&gt; page.screenshot({path: 'google.png'}))
			})
			.then(() =&gt; browser.close());
	});</code></pre>
<p data-ke-size="size16">위 코드를 살펴보겠습니다.</p>
<p data-ke-size="size16">puppeteer 라이브러리를 로딩한 후에, puppeteer.launch() 함수를 호출하여 puppeteer를 실행합니다.</p>
<p data-ke-size="size16">실행이 안료되면, browser를 반환하는데, browser.newPage() 함수를 호출하여 page를 생성합니다.</p>
<p data-ke-size="size16">page 생성이 완료되면 <a href="http://page.goto()/">page.goto()</a> 메서드를 이용하여 <a href="http://google.xn--com-568n/">http://google.com에</a> 접속합니다.</p>
<p data-ke-size="size16">페이지 로딩이 완료되면 page 스크린샷을 찍어 google.png 파일로 저장하고 브라우저를 닫습니다.</p>

<p data-ke-size="size16">그럼 실제로 동작하는 지 실행해보도록 하겠습니다.</p>
<pre id="code_1625822062356" data-ke-language="javascript" data-ke-type="codeblock"><code>&gt; node index.js</code></pre>

<p data-ke-size="size16">실행이 완료되면 얼마후에 google.png 파일이 떨어진 것을 확인할 수 있습니다.</p>
<figure><p><span data-url="https://blog.kakaocdn.net/dn/GgKez/btq9aLarptr/0vHLcPY9bkydRLynFsly41/img.png" data-lightbox="lightbox" data-origin-width="456" data-origin-height="250" data-filename="스크린샷 2021-07-09 오후 6.14.48.png"><img src="https://blog.kakaocdn.net/dn/GgKez/btq9aLarptr/0vHLcPY9bkydRLynFsly41/img.png"></span><span data-url="https://blog.kakaocdn.net/dn/bFp9WI/btq9bFOCyXg/LG6k1pWKy6lWsgbb3XaBrk/img.png" data-lightbox="lightbox" data-origin-width="800" data-origin-height="600" data-filename="google.png"><img src="https://blog.kakaocdn.net/dn/bFp9WI/btq9bFOCyXg/LG6k1pWKy6lWsgbb3XaBrk/img.png"></span></p></figure>
                                                            
                                
											
					
                    
                    
                </div>

                                    
                
                
                                    
                
                


                

                                    
                
                
            </div></div>

Hello Jay's Programming World!

안녕하세요. Jay입니다.
 오늘은 서버 환경에서 브라우저 화면을 캡쳐하는 방법에 대해서 알아보도록 하겠습니다. 일반적으로 브라우저를 사용한다고 하면 당연히 클라이언트에서 브라우저 화면을 띄워서 사용해야한다고 생각합니다. 하지만, 서버 환경에서도 브라우저에 접속하는 것이 가능합니다.  Headless Browser라고 해서 GUI(Graphic User Interface)가 없는 환경을 사용하면 됩니다. 화면만 표시가 되지 않을뿐 일반적인 브라우저와 동일하게 동작합니다.
 오늘은 Node 환경에서 Chromium 혹은 Chrome을 제어할 수 있도록 개발된 puppeteer 라이브러리를 살펴보려고 합니다. puppeteer 라이브러리에 대한 정보는 아래 링크에서 확인 가능합니다.
 
 
 
npm 프로젝트를 하나 생성하고, puppeteer 패키지를 추가합니다.
> npm install puppeteer
 
index.js 파일을 하나 만들고 아래와 같이 작성합니다.
const puppeteer = require('puppeteer');
puppeteer.launch()
	.then((browser) => {
		return browser.newPage()
			.then((page) => {
				return page.goto('http://google.com')
				.then(() => page.screenshot({path: 'google.png'}))
			})
			.then(() => browser.close());
	});
위 코드를 살펴보겠습니다.
puppeteer 라이브러리를 로딩한 후에, puppeteer.launch() 함수를 호출하여 puppeteer를 실행합니다.
실행이 안료되면, browser를 반환하는데, browser.newPage() 함수를 호출하여 page를 생성합니다.
page 생성이 완료되면 page.goto() 메서드를 이용하여 http://google.com에 접속합니다.
페이지 로딩이 완료되면 page 스크린샷을 찍어 google.png 파일로 저장하고 브라우저를 닫습니다.
 
그럼 실제로 동작하는 지 실행해보도록 하겠습니다.
> node index.js
 
실행이 완료되면 얼마후에 google.png 파일이 떨어진 것을 확인할 수 있습니다.

[Node.js] 노드 서버에서 브라우저 화면 캡처하기(puppeteer)

댓글