파편화된 환경변수 대청소: Next.js 모노레포 ENV 구조의 정석
Vite에서 Next.js로 마이그레이션하거나 여러 앱을 하나의 저장소(Monorepo)에서 관리할 때 환경변수가 파편화되는 문제를 해결하는 "모노레포 정석 환경변수 구조"를 제시합니다.
Q: 여러 프로젝트 간에 .env 위치가 중구난방이에요. 정석이 뭔가요?
프로젝트 A는 루트에 `.env`가 있고, 프로젝트 B는 `apps/web/.env.local`에 있고, 심지어 안 쓰는 `VITE_` 변수들까지 섞여 있어서 혼란스럽다는 질문이 있었습니다.
A: 정석은 "인프라(공통)" 변수와 "앱 전용(클라이언트)" 변수를 분리하는 것입니다.
상세 설명: 인프라용 vs 프론트엔드용
1. 루트 디렉토리(`/`)의 `.env`: 여기에는 프로젝트 전체를 띄우기 위한 공통 인프라 설정이 들어갑니다. (예: `DB_PASSWORD`, `REDIS_PORT`, `docker-compose`용 변수들)
2. 개별 앱 디렉토리(`apps/web-next/`)의 `.env.local`: 여기에는 특정 프론트엔드 앱에서만 사용하는 전용 API 키들이 들어갑니다. (예: `NEXT_PUBLIC_FIREBASE_API_KEY`, `NEXT_PUBLIC_KAKAO_CLIENT_ID`)
Q: 옛날 프레임워크(Vite 등) 변수들이 아직 남아있는데 둬도 되나요?
"Next.js로 넘어왔는데 아직도 VITE_API_URL 같은 게 남아있어요. 지워야 하나요?"
A: 무조건 지워야 합니다. 레거시(과거의 잔재)를 방치하면 언젠가 반드시 폭발합니다.
상세 설명: 찌꺼기 청소의 중요성
Next.js는 `NEXT_PUBLIC_`으로 시작하는 변수만 클라이언트(브라우저)로 안전하게 노출시킵니다. 만약 `VITE_`로 시작하는 키를 지우지 않고 그대로 둔다면, 프론트엔드 코드에서 해당 키를 읽지 못해 런타임 에러가 발생하거나 엉뚱한 로직이 실행될 수 있습니다.
새로운 집(프레임워크)으로 이사했다면, 옛날 집의 규칙(Vite 환경변수)은 과감하게 청소하는 것이 리팩토링의 기본입니다.
이정마 에디터
Lead Developer
백엔드용 DB 패스워드와 프론트엔드용 API 키를 한 파일에 섞어두면 안 됩니다. 용도와 위치에 맞게 환경변수를 "찢어두는 것"이 모노레포 아키텍처의 핵심입니다.