Puppeteer를 활용한 로컬 개발 서버 대체 방안 (web.dev 사례)
Source
Evernote/Inbox/Puppeteer is my new dev server - Eric Bidelman.md
Summary
Google의 web.dev 프로젝트는 백엔드 코드가 내부(Google DevSite)에 있고 콘텐츠만 외부(GitHub)에 있는 분산 아키텍처로 인해 로컬에서 전체 사이트를 실행할 수 없는 문제를 겪었습니다. 이를 해결하기 위해 Eric Bidelman은 Puppeteer와 Headless Chrome을 사용하여 ‘가상 개발 서버’를 구축했습니다. 이 방식은 로컬 파일 서버를 실행하는 대신, 프로덕션 URL의 렌더링된 페이지를 가져온 후 DOM을 조작하여 로컬의 수정된 콘텐츠로 교체하는 원리를 사용합니다. 이를 통해 복잡한 빌드 환경 없이도 실제 사이트의 스타일과 레이아웃을 반영한 미리보기를 가능하게 했습니다.
Key Points
- 문제점: web.dev는 백엔드/프론트엔드 코드가 Google 내부에, 콘텐츠만 GitHub에 있어 로컬에서 전체 사이트를 빌드 및 실행할 수 없음.
- 해결책: Puppeteer와 Headless Chrome을 이용해 프로덕션 페이지를 가져와 DOM을 조작하는 ‘콘텐츠 미리보기 서버’ 구축.
- 핵심 원리: 1) 프로덕션 URL의 렌더링된 페이지(스타일/JS 포함)를 Headless Chrome으로 로드. 2) 로컬 디스크의 수정된 HTML/Markdown 콘텐츠를 읽음. 3) 로드된 페이지의 본문(Body)을 로컬 콘텐츠로 교체하여 미리보기 제공.
- 장점: 로컬에서 복잡한 빌드 도구나 백엔드 서버 없이도 실제 프로덕션과 동일한 시각적 결과물을 확인할 수 있음.