react ) .env 파일을 이용한 백엔드 api 호출 주소 변경 ( CRA 사용 )

백엔드 호출 주소를 localhost 가 아닌 지정된 주소로 변경 하고 싶다면 .env 파일을 활용 할 수 있다.

1. 백엔드 호출 주소를 정의한 .env 파일을 생성한다

// .env.local-dev 파일

REACT_APP_PHASE=LOCAL-DEV
REACT_APP_PROXY_URL=http://XXX.XX.XX.XXX:8080
REACT_APP_PROXY_PORT=8080
REACT_APP_ROUTE_MODE=hash

2. env-cmd 를 설치 한다

npm i env-cmd

3. package.json 에 실행하고 싶은 명령어를 추가 한다

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

4. 호출 URL 지정 (axios 사용)

const axiosConfig = {
  baseURL: process.env.REACT_APP_PROXY_URL,
  timeout: 60 * 3 * 1000,
  headers: {},
};

이후 터미널에서 지정한 스크립트 명령어로 실행하면 된다.

npm run local-dev