핵심 요약
카카오엔터테인먼트가 Next.js의 빌드 타임 dotenv 방식의 한계를 극복하기 위해 런타임 환경 변수 주입으로 전환했습니다. 이를 통해 다환경 배포 시 빌드를 하나로 통합하고, 빌드 타이밍의 사이드 이펙트를 줄여 빌드 결과물의 신뢰성을 높였습니다.
구현 방법
- dotenv 파싱 및 런타임 노출: find-up과 dotenv로 .env.{환경}를 파싱해 public/__ENV.js에 JSON 형태로 저장하고 window.__ENV로 클라이언트에서 사용하도록 구현
- 서버/클라이언트 접근 분리: 서버는 process.env를, 클라이언트는 window.__ENV를 이용해 필요한 값을 읽도록 env() 함수로 통합 접근 제공
- 런타임 연동 및 배포 흐름: Next.js 실행 시 런타임 스크립트를 생성·복사하고, 빌드 파이프라인에 이를 포함해 환경에 관계없이 동일한 런타임 변수를 주입
- 문서 반영: _document에서 Head에 /__ENV.js를 로드하도록 스크립트를 추가
주요 결과
- 빌드 종속성 감소 및 빌드 타임 사이드 이펙트 축소
- 결과물의 일관성과 신뢰성 향상
- 향후 보안 강화를 위한 암호화 도입 가능성 언급
