[ReactJS] create-react-app을 통해 만든 React에서 환경변수 가져오기

create-react-app으로 만들어진 React에서 시스템의 환경변수를 가져오는 방법을 알아보자.


환경 및 선수조건

  • npm
  • nodejs
  • React
  • create-react-app
  • npm을통한 create-react-app의 설치 및 프로젝트 생성 (참고)


환경변수 가져오기

create-react-app을 통해서 생성한 React 프로젝트는 process.env를 통해서 쉽게 환경변수를 가져올 수 있습니다.

다음 아래가 해당 코드입니다. 주의해야 할점은 반드시!

  • 꼭 앞에 접미사로 REACT_APP_를 붙여줘야 합니다.
  • 시스템에 저장된 시스템 변수의 이름이 LINKU_SERVER_ENVIRONMENT라면 REACT_APP_를 붙여서 REACT_APP_LINKU_SERVER_ENVIRONMENT라고 해야합니다!
if (process.env.REACT_APP_LINKU_SERVER_ENVIRONMENT=== 'local')
    console.log("local");
else
    console.log("not local")


추가

  • .bash_profile에 추가하시고 source 명령어로 환경변수를 적용해줘야 돌아가는데 가끔 가져오지 못한다면 컴퓨터를 재부팅하시면 됩니다. (이거에 대한 자세한 이슈는 조사가 필요할듯 싶네요)