React 프로젝트에서 .env 파일을 읽어오지 못할 때

.env 파일을 추가하고, 파일에서 읽어오려는데, undefind 가 발생..한 경우 살펴봐야 할 사항

 

1. .env 파일 위치

- .env 파일은 루트에 있어야 함. package.json 과 같은 위치에 있는지 확인

 

2. 환경변수 이름 형식

- 리액트에서 환경 변수는 반드시! REACT_APP_ 으로 시작해야 함

- 예 ) api_url →  REACT_APP_API_URL 으로 변경

 

3. 불러오기 방식

- process.env. 객체를 사용하여 불러오기

- 예 ) const apiUrl = process.env.REACT_APP_API_URL

 

4. dotenv 패키지 설치 여부 확인

- cra 로 시작한 프로젝트에는 해당 안됨

- 만약 cra 가 아니면, dotenv 패키지 설치 후 파일 상단에 require('dotenv').config() 추가한 후 읽어오기

 

5. .env 파일 형식 확인

- env 파일 內 에는 불필요한 공백 / 특수문자 없어야 함

- 주석은 줄의 시작에 # 추가

 

6. 서버 재시작

- 환경변수는 애플리케이션 시작시 로드되므로 .env 파일을 추가, 수정한 경우 서버 재시작해야함

- npm start

 

 

내 경우는 (6) 이었다. 수정한 후 서버 재시작... 해야 함!

환경변수는 애플리케이션 시작 시 로드 된다는 사실을 잊지 말자!