Build-time bake 제거를 통한 단일 Docker Image 기반 Runtime Config 주입 구현

ConfigMaps for Environment Variables in a React App: Stop Rebuilding, Start Injecting

Sohana Akbar2026년 6월 9일4분intermediate

AI 요약

Context

CRA, Vite 등 현대적 Frontend 프레임워크의 Build-time 환경 변수 고정 방식으로 인한 환경별 이미지 재빌드 필요성 대두. 환경별 API URL 변경 시마다 Docker Image를 새로 생성해야 하는 비효율적 CI/CD 파이프라인 구조의 한계점 존재.

Technical Solution

Kubernetes ConfigMap을 활용한 런타임 설정 파일(env-config.js)의 Pod 내 마운트 구조 설계
Browser의 Window 객체에 설정을 바인딩하는 window.__env 전역 변수 주입 방식 채택
Runtime Config 우선 참조 후 Local 개발 환경을 위한 process.env Fallback 로직을 포함한 getEnvVar 추상화 함수 구현
Nginx 서버 설정을 통한 /env-config.js 경로의 정적 파일 서빙 및 브라우저 로드 순서 최적화
Build-time 변수 의존성을 제거하여 동일한 Artifact로 Dev, Staging, Production 환경 대응 가능 구조 확립

실천 포인트

- ConfigMap의 설정 변경 사항을 반영하기 위한 Pod Restart 또는 Reloader 도입 검토 - 브라우저 캐싱으로 인한 설정 미반영 방지를 위해 Cache-Busting 헤더 적용 필요 - index.html 내 메인 번들보다 env-config.js 스크립트가 먼저 로드되도록 순서 배치 - 보안 민감 정보의 ConfigMap 저장 금지 및 Backend API를 통한 Secret 관리 원칙 준수

태그

#Docker #Runtime Configuration #CI/CD #Kubernetes #ConfigMap

원문 읽기