dotEnv를 활용한 환경 변수들 숨기기

dotEnv란?

일반적으로 포트 번호, secret code, database 주소, googleClientID 등 환경 변수를 json에 보관하여 사용한다.

하지만 이렇게 하면 모든 정보가 노출되기 마련이다.

이러한 환경 변수들을 [.env]라는 파일에 효율적으로 간단히 숨겨주는 기능을 담당한다.

 

설치방법

$ yarn add dotenv @types/dotenv --save

 

사용법

.env 파일 생성

$ touch .env

 

.env 파일에 환경변수 등록

PORT = "3000"
DATABASE = "mongodb://localhost:27017/databaseName"

 

소스코드 작성

// 환경변수 사용 준비 (메인코드 가장 윗줄에 적어준다.)
const envResult = require('dotenv').config()

if (envResult.error) {
	throw envResult.error;
}

// 변수 사용방법 (progress.env.${.env 추가된 변수이름})
console.log(progress.env.DATABASE);

 

* 주의사항

github에 노출되지 않도록 주의해야 한다.

git push 하기 전에 gitignore 파일에 .env 를 필히! 포함 시켜야 한다.

 

React.js .env 사용하기

별도의 설치는 없이 바로 설정 가능하다.

다만 환경변수 앞에 REACT_APP_ 으로 시작을 해야한다. 그 외의 설정은 모두 무시되므로 주의하도록 한다.

예시> REACT_APP_PORT, REACT_APP_GRAPHQL

 

React Native 에서 .env 사용하기

react-native-config를 이용할 수는 있지만 한동안 업데이트가 되지 않아서 최신 버젼의 React-Native에서는 동작하지 않는다.

별도의 모듈을 직접 만들거나 당분간 config.ts 소스파일을 만들어 기록하는 편이 낫다.