React 환경변수 설정 - Undefined 오류 발생시 대처 방법

문제상황

• React를 통해서 front-end를 deploy 하는 환경에서 환경변수 세팅을 정상적으로 했다고 생각했는데 typescript의 변수가 제대로 할당이 되지 않는다.

문제 상황의 예 코드

예제 코드의 가정은 .env 파일을 dotenv가 인식할 수 있는 정상적인 위치에 두었다고 가정한다.

.env

ENV_VALUE=my_value

main.ts

const env_value = process.env.ENV_VALUE
console.log(env_value)

예상 출력결과는 my_value가 출력되는것인데 어찌된 일인지 undefined 가 출력된다.

원인을 알아보았다.

 

예상 원인 . Dotenv를 import 하지 않았거나 제대로 쓰지 않았기 때문일까?

dotenv는 정석적인 방법으로 react app을 create하는 경우에는 포함되어있다고 한다.

import dotenv를 하면 오히려 오류가 난다.

따라서, dotenv는 react app을 쓰다보면 자동으로 반영이 되어있으니 dotenv 관련해서 추가로 설정은 필요가 없다.

 

 

실제 원인 : React 환경변수의 규칙을 잘 지켜야 한다.

React 환경변수의 규칙을 지키지 않았을 수 있다.

확인을 해보니 REACT에서 환경변수를 세팅하기 위해서는 환경변수명 앞의 Prefix로 

"REACT_APP_" 이 반드시 붙어야한다는 것이였다.

Adding Custom Environment Variables | Create React App

공식 Documentation을 역시 잘 읽어봐야한다.

 

그래서 위의 예제를 아래와 같이 변경해주면 정상적으로 my_value를 출력해준다.

.env

REAC_APP_ENV_VALUE=my_value

main.ts

const env_value = process.env.REACT_APP_ENV_VALUE
console.log(env_value)

 

이 부분때문에 쓸데없이 시간을 버렸었는데 이 글을 보는 사람들은 시간을 빠르게 아낄 수 있길 바라면서 글을 마친다.

 

참고 자료 

[React] 환경변수가 undefined로 나올 때 (velog.io)

velog

Adding Custom Environment Variables | Create React App (create-react-app.dev)

Adding Custom Environment Variables | Create React App