create-react-app env 환경변수 설정

create-react-app env 환경변수 설정

create-react-app에는 dotenv라는 모듈이 설치되어 있어서 .env 파일을 생성하여 환경변수 설정이 가능하다.

env 파일 종류

1. .env - 기본
2. .env.local - Test를 제외한 모든 환경
3. .env.development - 개발 환경
4. .env.test - 테스트 환경
5. .env.production: 운영 환경

env 설정 시 주의사항

1. .env 파일을 최상위 root 폴더에 위치시킬 것

2. REACT_APP_변수명의 filename convention을 지킬 것

3. 값에 따옴표를 붙이지 말 것

REACT_APP_API_KEY='qfqi321kqlwdn'; // 따옴표를 붙이면 아스키값 그대로 읽는다.
REACT_APP_API_KEY=qfqi321kqlwdn;

1. 사용시 process.env.REACT_APP_변수명으로 사용할 수 있다

let url = `https://www.example.com/?client_id=${process.env.REACT_APP_API_KEY}`;

1. 환경변수 설정 완료 후 반드시 서버를 재시작 할 것

참고 자료

Adding Custom Environment Variables

CRA에서 환경 변수 설정하기

리액트 - Create react app (CRA)에서 .env 를 이용한 환경변수 설정 (캐시 버스터, 배포파일 관리)