Rollup 및 Docker를 활용한 프론트엔드 빌드 시 환경 변수 주입 가이드

핵심 기술

Rollup 번들러와 Docker를 활용하여 프론트엔드 애플리케이션의 빌드 시점에 환경 변수를 안전하고 효율적으로 주입하는 방법을 상세히 안내합니다.

기술적 세부사항

• 문제 정의: 프론트엔드 코드(브라우저 환경)는 백엔드와 달리 process.env와 같은 방식으로 런타임에 직접 환경 변수에 접근할 수 없습니다. 따라서 빌드 시점에 변수 값을 실제 코드로 치환해야 합니다.
• 해결 방안: @rollup/plugin-replace 플러그인을 사용하여 process.env.VARIABLE_NAME 패턴을 .env 파일에서 로드한 실제 값으로 대체합니다.
• 환경 변수 관리: .env 파일을 사용하여 개발 및 운영 환경에 따른 설정 값을 관리합니다.
• Rollup 설정: .env 파일에서 로드한 변수들을 JSON.stringify를 통해 안전하게 문자열로 변환하여 @rollup/plugin-replace에 전달합니다.
• Docker 활용:
  • Dockerfile 내에서 ARG를 사용하여 Docker 빌드 시 외부에서 변수 값을 주입받습니다.
  • 주입받은 ARG 값을 사용하여 .env 파일을 동적으로 생성합니다.
  • 이 동적으로 생성된 .env 파일은 npm install 및 npm run build 과정에서 Rollup이 사용할 환경 변수 정보를 제공합니다.
• Docker Compose 연동: docker-compose.yml에서 build.args를 통해 Docker 빌드에 필요한 변수를 전달하고, env_file을 통해 추가적인 환경 변수를 로드할 수 있습니다.
• 핵심 고려사항:
  • Rollup은 .env 파일을 기본적으로 지원하지 않으므로, @rollup/plugin-replace를 사용해야 합니다.
  • .env 파일은 반드시 빌드 타임에만 사용되며, 런타임에는 영향을 주지 않습니다.
  • 빌드 타임 변수 주입 시, Docker ARG를 ENV 대신 사용하는 것이 변수가 런타임 환경에 노출되는 것을 방지하는 데 유리합니다.

개발 임팩트

• 보안 강화: 민감한 API 키나 설정 값이 소스 코드에 하드코딩되거나 클라이언트에 노출되는 것을 방지합니다.
• 환경별 설정 관리 용이: 개발, 스테이징, 프로덕션 등 다양한 환경에 맞춰 빌드 시점에 각기 다른 설정을 적용할 수 있습니다.
• CI/CD 파이프라인 통합 용이: Docker와 연동하여 자동화된 빌드 및 배포 프로세스에 쉽게 통합될 수 있습니다.
• 코드의 재사용성 증대: 동일한 코드로 다양한 환경 설정을 가진 애플리케이션을 빌드할 수 있습니다.

커뮤니티 반응

톤앤매너

전문적이고 실용적인 가이드이며, 문제 해결 중심의 명확한 설명과 코드 예제를 제공하여 개발자가 쉽게 따라 할 수 있도록 안내합니다.