문제제기

CPA(create react app)로 생성한 리액트앱의 경우 .env파일에 REACT_APP_를 변수 앞에 붙이면 자동으로 인식합니다. 이를 통해 github 처럼 외부에 소스코드를 공유해야 할 일이 있을 때 비밀번호 등의 개인정보를 보호할 수 있습니다. 이 방식대로 server.js에서 사용하려 했으나 undefined 만 리턴했습니다.

원인은 react의 경우 자동으로 .env파일을 검색하여 인식하지만 node 명령어로 실행시키는 server파일의 경우 .env파일을 인식할 수 없기 때문입니다. 별도의 모듈인 dotenv를 설치하여 인식할 수 있도록 해야 합니다.

해결방법

1. dotenv 설치하기

npm install dotenv --save

server에서도 env를 인식할 수있게 해주는 모듈입니다. CPA로 만든 리액트앱이 아닐 경우에도 env를 인식하기 위해 설치해야 합니다.

2. 소스코드 작성

require("dotenv").config({ path: __dirname + "/./../../.env" });
console.log(process.env.REACT_APP_MONGO_URI);

저의 경우 .env파일이 프로젝트 최상단에 위치하기 때문에 ../이 2번 들어갔습니다. 자신에게 맞는 경로를 설정하면 됩니다.