프론트엔드
Runtime 환경 변수 설정으로 빌드 프로세스 개선하기
두줄요약
Next.js 빌드 타임 환경 변수의 환경별 빌드 문제를 분석했습니다. `window.__ENV` 스크립트로 런타임 주입하는 방식을 구현했습니다.
문제 상황
- Next.js dotenv 기반 빌드 타임 환경 변수 주입으로 환경별 빌드 결과물 생성
- 빌드 시점 외부 요소에 따른 결과물 차이와 신뢰성 저하 가능성
원인 분석
- 클라이언트 환경 변수가 빌드 과정에서 코드 값으로 치환되는 구조
- 기본 Runtime Configuration의 SSR 한정 동작과 SSG·Automatic Static Optimization 비호환성
해결 방법
- 환경별 dotenv를 파싱해
public/__ENV.js의window.__ENV객체로 생성 - 실행 전 dotenv를
.env로 복사해 서버의process.env접근 유지 Document에서 환경 변수 스크립트를 로드하고 클라이언트·서버용 공통env함수 제공
성능/운영 포인트
- 환경별 빌드 대신 동일 빌드 결과물에 런타임 환경 변수 주입
- 빌드 종속성과 시점별 사이드 이펙트 감소를 통한 결과물 신뢰성 향상
- 공개 스크립트 환경 변수의 암호화·복호화 방식 추가 고려
