리액트 빌드시 환경(개발/테스트/상용)에 따라 API 주소 설정하기

1. 명령어로 구분

package.json에 script : start/build/test 각각의 스크립트가 있음

-> 배포시 build.gradle에 npm build 명령어가 들어있음

 

2. .env 파일에서 환경변수 사용

두개의 분리된 dotEnv 파일 생성

.env.development : 개발용 환경변수

.env.production : 상용 환경변수

 

원리) Creact-React-App으로 리액트를 만들고 npm 스크립트를 실행할 때 스크립트 명령어별로 env 파일의 적용 우선순위가 있다.

 

script 명령어 별 env 파일 우선순위

• npm start : .env.development.local, .env.local, .env.development, .env
• npm build : .env.production.local, .env.local, .env.production, .env
• npm test : .env.test.local, .env.test, .env

 

3. 각각의 파일에서 REACT_APP으로 시작하는 baseURL 설정

//.env.development
REACT_APP_BASE_URL = http://localhost:3000

//.env.production
REACT_APP_BASE_URL = http:hello.com

 

5. axios config 또는 rootSaga 에서 설정한 환경변수 사용

baseURL : process.env.REACT_APP_BASE_URL

// rootSaga.js
axios.defaults.baseURL = process.env.REACT_APP_BASE_URL;