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

조민혜·2022년 8월 5일
0

React.js

목록 보기
2/12

백엔드 호출 주소를 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
  1. env-cmd 를 설치 한다

npm i env-cmd

  1. package.json 에 실행하고 싶은 명령어를 추가 한다
"scripts": {
    ...
    "local-dev": "env-cmd -f .env.local-dev react-scripts start"
  }
  1. 호출 URL 지정 (axios 사용)
const axiosConfig = {
  baseURL: process.env.REACT_APP_PROXY_URL,
  timeout: 60 * 3 * 1000,
  headers: {},
};

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

npm run local-dev

profile
Currently diving deeper into React.js development.

0개의 댓글