Next.js 배포 환경에 따른 여러 환경변수(.env) 설정

문제 상황

• 현재 프로젝트에서 배포 환경이 3가지(dev, stg, prod)
• 환경별로 다른 env로 중요 키값들을 설정하려고 함.
  - dev -> .env.development
  • stg -> .env.staging
  • prod -> .env.produnction
• next.js에서는 환경 변수 설정이 되어 있음.
  - 개발 환경 -> .env.development
  • 배포 환경 -> .env.production
• 이미 설정되어있는 환경변수를 어떻게 오버라이드 할 수 있을까?

시도 1 : Amazon ECS task definition에 environment 정의

• 이미 CICD가 설정되어있는 환경이다보니 백엔드 레포지토리를 참고해봤는데 env 값들을 task-definition에 정의하고 있었다.
• 해당 값들은 docker(가상환경)에 값이 설정되어 process.env로 접근 가능해진다고 함.
• 테스트로 dev 서버에 배포해서 콘솔 찍어봤더니 undefined만 찍힘

-> 백엔드는 node.js 환경이라 process.env로 키값에 바로 접근이 가능함.
-> 그치만 클라이언트에서는 빌드될 때 번들링되면서 process.env의 값이 주입되기 때문에 가상환경에 있는 환경변수 값을 읽을수가 없음.

시도 2 : next.config.js의 env 옵션

• 배포 환경별 스트립트 실행시 cross-env로 환경변수를 설정

"build:DEV" : "cross-env NEXT_PUBLIC_ENV=DEV next build"
"build:STG" : "cross-env NEXT_PUBLIC_ENV=STG next build"
"build:PROD" : "cross-env NEXT_PUBLIC_ENV=PROD next build"

• next.config.js에서 process.env.NEXT_PUBLIC_ENV로 배포 환경을 구분해서 env를 다시 설정.

-> 배포 환경별로 키값을 다르게 주입은 가능.
-> 그러나 config 파일에 3가지 환경의 변수들이 들어가면서 코드가 복잡해짐.

시도 3 : env-cmd로 env 우선순위 수정

• env-cmd를 설치해서 스크립트 실행시 아래와 같이 사용

"build:DEV" : "env-cmd -f .env.development next build"
"build:STG" : "env-cmd -f .env.staging next build"
"build:PROD" : "env-cmd -f .env.production next build"

• env-cmd -f로 실행된 .env파일이 최우선순위를 가지고 주입됨.

개념 정리

• 왜 프레임워크마다 환경변수시 붙는 prefix가 다르지? 그리고 왜 특정 prefix만 인식을 하는거지?
• 환경 변수는 무조건 .env?
• 왜 프레임워크마다 env 우선순위가 다른거지?
• process.env의 값이 번들에 주입되는거면, 브라우저에서 js 파일 업로드 까보면 키값이 노출되는건가?
• NODE_ENV는 왜 자동으로 개발 배포환경이 분리되는거지?
• 현재 private 레포에 env 파일을 push해서 사용하고 있는데 올바른 방법일까?
• next.js에서 제공하는 환경변수

Reference

• https://jayprogram.tistory.com/89
• https://velog.io/@henrynoowah/Next.js-NEXT-JS-environment-variables
• https://www.daleseo.com/js-dotenv/
• https://han-py.tistory.com/507