[Front end] React .env 설정 및 우선순위

 

create-react-app(CRA)로 생성된 프로젝트는 env파일을 활용하여 전역 설정과 같은 환경변수를 사용할 수 있다. 배포 환경에 따른 타이틀, 화면이나, port, API 주소 정보들이 바뀌어야 할 때 유용하다.

 

env 파일 우선순위

NODE_ENV 환경변수는 script에 따라 자동으로 값이 지정되는데, npm start는 development, npm run build는 production, npm test test로 매핑된다. 이점을 활용하면 된다.

여기서 중요한 점이 있는데 env 파일에 대한 우선순위이다.

• npm start : .env.development.local, .env.development, .env.local, .env
• npm run build : .env.production.local, .env.production, .env.local, .env
• npm test : .env.test.local, .env.test, .env

각 스크립트에 따라 왼쪽 파일의 우선순위가 높다.

 

파일 생성

env 파일은 프로젝트 루트 폴더에 추가하면 된다.

변수명은 반드시 'REACT_APP_'으로 시작되어야 한다. 보안이 필요한 환경변수의 유출을 방지하기 위해 'REACT_APP_'으로 시작되지 않는 환경변수는 무시된다.

• .env.development
• .env.production

REACT_APP_SERVICE_PORT = 8080

각 환경에 맞게 값을 다르게 설정하면 아래와 같이 process.env 접근자를 통해 활용이 가능하다.

<!-- JSX -->
<div className="contents">
  {process.env.REACT_APP_SERVICE_PORT}
</div>

// 상수
export const SERVICE_PORT = `${process.env.REACT_APP_SERVICE_PORT}`;