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