TIL: React | .env multiple 환경변수 설정

React는 기본적으로 .env 설정이 되어있다

.env

development 버전과
production 버전으로 설정이 구분되어 있다

.env 우선순위

npm run start 시 우선순위
.env.development.local > .env.development > .env.local > .env

npm run build 시 우선순위
.env.production .local > .env.production > .env.local > .env

env-cmd

env-cmd 라이브러리를 설치하여 각 버전으로 npm start를 하도록 도와준다

package.json

  "scripts": {
    "start:dev": "env-cmd -f .env.development react-scripts start",
   },

.env 파일 설정

REACT_APP_HOST=localhost

.env 환경변수 사용

process.env.REACT_APP_HOST