Runtime 환경 변수 설정으로 빌드 프로세스 개선하기

간단 소개

Next.js에서 런타임 환경 변수 URL 주입 방식으로 빌드 프로세스를 개선하고 결과물의 신뢰성을 높이는 방법에 대한 설명.

AI Summary

Next.js 환경 변수 설정 방식의 문제점
- 빌드 타임에 환경 변수를 주입하여 여러 환경에 배포 시 각 환경별로 빌드해야 하는 번거로움이 있음
- 빌드 과정 중 외부 요인으로 인한 사이드 이펙트 발생 가능성이 있고, 빌드 결과물의 신뢰성을 저하 시킬 수 있음
Runtime Configuration 방식의 한계
- Next.js에서 제공하는 런타임 변수 주입 방식은 SSG에서 동작하지 않고 SSR에서만 동작하는 제약이 있음
- 렌더링 및 초기화 시 오버헤드가 발생하고 Automatic Static Optimization 기능과 호환되지 않아 공식 문서에서도 권장하지 않음
환경 변수 URL 방식
- 런타임에 환경 변수를 주입하기 위해 환경 변수를 글로벌 객체(window)에 넣어주는 스크립트 파일을 생성하여 사용하는 방식
- 환경별 dotenv 파일 파싱, 스크립트 파일 생성, .env 파일 복사 등의 과정을 거쳐 환경 변수를 주입
- 빌드 프로세스를 통일하고 빌드 결과물의 신뢰성을 높일 수 있으며, 암호화 적용 시 보안 강화 가능