CRA에서 환경변수 설정하기

CRA로 만든 프로젝트에서는 프로젝트 전체에서 접근할 수 있는 환경변수(Environment Variables)를 루트 디렉토리의 .env 파일에 정의하여 사용할 수 있다.

NODE_ENV는 이미 정의가 되어있으며, 이를 활용하여 빌드 환경에 따라 변수 값을 다르게 줄 수 있다.

또한, REACT_APP_로 시작하는 변수를 설정할 수 있으며, 이 변수들은 process.env에 존재하므로,.env 파일에 REACT_APP_SERVER_ENDPOINT를 정의했다면, process.env.REACT_APP_SERVER_ENDPOINT 로 접근할 수 있다.

const serverEndpoint =
  process.env.NODE_ENV === "development"
    ? "http://localhost"
    : `${process.env.REACT_APP_SERVER_ENDPOINT}`;

참고사항

• 새로운 환경변수를 정의했거나, 수정했다면 development server를 재시작해야 업데이트된 변수를 확인할 수 있다.
• NODE_ENV는 npm start로 서버 시작 시 development로, npm test일 때 test로, npm build일 때 production으로 설정된다.