Screenshot API for Angular: Screenshots, PDFs, and OG Images Without Puppeteer

Context

Angular에서 PDF 생성, 스크린샷, OG 이미지 생성 시 Puppeteer를 사용하면 도커 이미지가 1.5GB까지 증가하고, 장기 실행 프로세스에서 메모리 누수가 발생하며, Chrome 업데이트마다 유지보수 부담이 증가한다.

Technical Solution

• API Key 보안 아키텍처 전환: Angular 브라우저 클라이언트에서 직접 호출하지 않고, Node.js/Express 백엔드 프록시를 중간에 배치하여 API 키를 서버에서만 관리
• Angular 서비스 구현: HttpClient를 사용해 /capture/pdf와 /capture/screenshot 엔드포인트를 호출하고 Blob 응답을 처리
• Express 백엔드 프록시 구성: axios로 PageBolt API(https://pagebolt.dev/api/v1)에 요청을 전달하고, 요청 헤더에 x-api-key 추가
• URL 또는 HTML 전달 방식 지원: 외부 URL 직접 캡처 또는 Angular 템플릿을 서버 렌더링 후 HTML 문자열 전달 가능
• 환경별 설정 분리: src/environments/environment.ts(개발용 http://localhost:3000)와 environment.prod.ts(프로덕션 URL)로 백엔드 주소 관리
• 응답 처리 최적화: PDF는 application/pdf Content-Type, 스크린샷은 image/png Content-Type으로 설정해 브라우저가 올바르게 다운로드 트리거
• 오류 처리 구현: RxJS catchError와 throwError로 PDF 생성 실패 시 사용자 친화적 오류 메시지 반환

Key Takeaway

제3자 API를 호출할 때 API 키를 브라우저에 노출하지 않는 백엔드 프록시 패턴은 일회성 설정이지만 모든 비밀 키 기반 API에 적용 가능한 기본 보안 설계 원칙이다. Puppeteer 같은 무거운 의존성 대신 클라우드 기반 Screenshot API를 도입하면 서버 인프라 복잡성과 유지보수 비용을 근본적으로 제거할 수 있다.