CREATE-REACT-APP 환경 변수 설정

React에서 환경변수를 이용해 배포환경과 개발환경을 간단하게 분리하는 방법을 알아보겠습니다.

 

NODE_ENV 환경변수

일반적으로 Node.js에서는 NODE_ENV를 production(배포) / development(개발) 로 구분하여 사용합니다.

create-react-app은 실행 명령어에 따라 자동으로 NODE_ENV값이 정해집니다.

실행 명령어	NODE_ENV
npm start	development
npm run build	prodection
npm test	test

때문에 개발자가 따로 설정하더라도 무시되며, 기존에 정해진 값이 들어갑니다.

 

REACT_APP_OOO 환경변수

REACT_APP_ 으로 시작하는 새로운 환경변수를 설정할 수 있습니다.

NODE_ENV와 REACT_APP_으로 시작되는 환경변수를 제외한 모든 변수는 실수로 시스템에 노출되는 것을 방지하기 위해 무시합니다.

API URL을 분리하기 위해 REACT_APP_API_URL 로 새로운 환경변수를 만들어보겠습니다.

 

cross-env 모듈 사용

실행 명령어를 수정하기 전에 cross-env 모듈을 설치합니다.

npm install cross-env

환경변수를 설정할 때 undefined으로 나오는 경우가 있습니다.

실행 OS에 따라 환경변수를 설정하는 방법이 다르기 때문에 나타는 문제로,

cross-env 모듈을 사용하면 운영체제나 플랫폼에 종속되지 않고 환경변수를 설정할 수 있습니다.

 

scripts 수정

cross-env 환경변수=값 실행명령어
cross-env 환경변수1=값1 환경변수2=값2 실행명령어   // 환경변수 여러개

위의 형식으로 수정하여 사용할 수 있습니다.

 

// package.json
  "scripts": {
    "local": "cross-env REACT_APP_API_URL=localhost react-scripts start",
    "build": "cross-env REACT_APP_API_URL=site.com react-scripts start"
  },

 

환경변수를 간단하게 설정하기엔 좋지만 설정해야할 환경변수가 여러개가 되면 복잡할 수 있습니다.

보안적인 면에서도 노출되기 쉽기 때문에, 여러 환경변수를 설정할 때는 config파일이나 .env를 사용하는 것을 추천드립니다.

 

참고: https://create-react-app.dev/docs/adding-custom-environment-variables/

Adding Custom Environment Variables | Create React App