[React.js] 환경에 따라 .env 세팅하기

spring profile 처럼 react에서도 local, dev, prod 환경에서 환경변수를 변경하여 build를 할 수 있다.
환경변수는 앞에 REACT_APP으로 시작해야 한다.

1. .env 생성

local 환경은 .env.local 을 사용할 수 있게 파일을 생성한다.

REACT_APP_API_URL=http://localhost:18081/api

local에서 docker환경 파일도 생성한다. 백엔드가 host에 실행되고 있으므로 react에서 api url을 localhost가 아닌 host의 백엔드로 변경한다.

REACT_APP_API_URL=http://docker.for.mac.localhost:18081/api

---

2. dotenv-cli

.env파일을 생성하고 dotenv-cli를 설치한다.

$ yarn add dotenv-cli

---

3. package.json 수정

scripts부분에 dotenv -e 를 사용하여 원하는 파일을 가지고 build, start할 수 있도록 수정한다.

"scripts": {
    "start:local": "dotenv -e .env.local react-scripts start",
    "build": "dotenv -e .env.local react-scripts build",
    "build:docker": "dotenv -e .env.docker react-scripts build"
  },