환경변수 .env (도텐브)

dotenv

• dotenv는 환경변수를 . env파일에 저장하고 process.env로 로드하는 모듈이다. 데이터베이스 서버주소, API KEY값, 기타 등등 여러 공개하면 안되는 정보들을 . env파일에 저장하여 dotenv를 통해 불러올 수 있다.

환경변수란

• 프로세스가 컴퓨터에서 동작하는 방식에 영향을 미치는 동적인 값들의 모임이다.

dotenv 사용법

1. dotenv 패키지를 찾아서 적용한다.

npm install dotenv

2. .env 파일의 경로를 지정해준다.

const dotenv = require('dotenv');
// dotenv.config() 내에 아무것도 명시해주지 않으면 루트에 있는 .env 파일을 찾아 적용한다.
dotenv.config({
  path: './env/local.env'
});

3. .env 파일을 작성한다.

// .env 파일 예시
FIREBASE_API_KEY=TEST_KEY
FIREBASE_AUTH_DOMAIN=test.firebaseapp.com
FIREBASE_PROJECT_ID=test

4. DefinePlugin을 통해 process.env를 정의해준다.

• webpack.DefinePlugin : 모든 자바스크립트 코드에서 접근이 가능한 전역 변수를 선언하기 위해서 사용되는 플러그인이다.

module.exports = {
  ...
  plugins: [
    new webpack.DefinePlugin({
      "process.env": JSON.stringify(process.env),
    }),
  ]
}

5. 환경변수 사용

• 단순히 process.env.xxx로 사용하면 된다.

# .env #
FOO=foo

/* example.js */
console.log(process.env.FOO); // -> console.log('foo');
// or
if (process.env.FOO === "foo") {
  console.log("FOO!");
}

cf. create-react-app에서 환경변수 사용하는 경우
create-react-app에는 이미 dotenv 패키지가 내장되어 있다.

따라서 별도의 패키지 추가나 Webpack에 대한 설정 없이 .env 파일을 생성해서 변수를 선언하는 것만으로도 환경변수를 사용할 수 있다.