Node.js 환경에서 여러 개의 .env 파일 관리하기

환경변수를 Node.js 환경에서 관리하기 위해서는 여러가지 접근이 있을 수 있다.

일반적으로 dotenv 라이브러리를 많이 사용한다.

일반적으로 사용되는 방식이고, 특히 이때 보통 사용되는 .env 파일을 여러가지 모드로 나누어(.env.local, .env.dev, .env.prod, ...) 사용하기도 한다.

가장 보편적인 `.env` 파일

$ npm install dotenv --save

# .env
MY_ENV_VARIABLE=123

// index.js

require("dotenv").config();

console.log(process.env.MY_ENV_VARIABLE);

여기에는 dotenv를 확장한 dotenv-flow를 사용할 수 있다.

$ npm install dotenv-flow --save

# .env
USER_NAME=aaaaaa

# .env.development
USER_NAME=bbbbbb

# .env.production
USER_NAME=cccccc

// index.js

require("dotenv-flow/config");

console.log(process.env.USER_NAME);

$ NODE_ENV=production node -r dotenv-flow/config index.js

cccccc

또는, Windows, OSX 플랫폼에 상관없이 사용할 수 있는 cross-env를 사용할 수 있다.

info

cross-env 라이브러리가 2020.12.02 부로 maintenance 모드에 들어갔다. 이유는 기능적인 이슈 때문은 아니고, 이미 필요한 기능은 모두 완벽하게 구현됐고, 더 이상의 추가적인 기능 개발은 오히려 기존의 의도를 해칠 것이라 판단했다고 한다. 👍

이를 활용하면 다음과 같이 실행하면 된다.

$ npm install cross-env --save
$ cross-env NODE_ENV=production node index.js

cccccc

또는 dotenv-cli를 통해 환경변수 파일을 지정해줄 수 있다.

$ npm i dotenv-cli - g
$ dotenv -e .env.production node index.js

cccccc

많이 실수하거나 모를 수 있다고 생각하는 것중 하나가, 브라우저에서 .env 값을 노출하는 것이다.

보통은 .env 파일을 .gitignore 등으로 repository에 푸시하지 않으면 된다고 생각하지만,

# .env
REACT_APP_MY_KEY=123

# 또는

VITE_MY_KEY=123

가령 위와 같이 .env 파일에서 환경변수를 노출하는 경우, 이는 브라우저 스크립트에서 접근 가능한 값이 된다. 실제로 개발자 모드에서 값을 쉽게 확인할 수 있다.

브라우저에서 사용하는 값은 비밀 값이 아니라, 클라이언트 환경의 특성으로 관심 분리를 하기위해 사용하는 값이라 생각하자.

# .env

PROTOCOL=https
DOMAIN=www.google.com
PATH=search?q
QUERY=aws

URL='${PROTOCOL}://${DOMAIN}/${PATH}=${QUERY}'

따라서 위처럼 사용할 수 없고, 아래처럼 사용해야 한다.

# .env
URL=https://www.google.com/search?q=aws