[React] .env 개발서버와 실서버 분리하여 환경설정하기

원래 npm start로 이용하고 있던 중 API 서버가 개발 서버와 실서버로 분리되기 때문에 이를 구분해 환경설정을 하고자 했다.

 

 

1. 환경변수를 다르게 설정 (.env 파일)

env 파일 2개를 생성함

.env.development  //개발
.env.production   //실서버

 

각 API를 통신하는 URL을 ~~만 다르게 작성(.dev 서버와 실서버는 다르기 때문)

REACT_APP_API_URL='~~'

 

2. env-cmd 를 설치( 환경변수에 따라 설정 적용)

npm i env-cmd

 

3. package.json 에서 start, build 설정

"scripts": {
    "start": "env-cmd -f .env.development craco start",
    "start:dev": "env-cmd -f .env.development craco start",
    "start:prod": "env-cmd -f .env.production craco start",
    "build:dev": "env-cmd -f .env.development craco build",
    "build:prod": "env-cmd -f .env.production craco build",
    ...

start or start:local =>내 컴퓨터

:dev => 개발서버

:prod => 실서버

 

▼ 참고) 원래 package.json

 

4. 사용

npm run start:dev 하면 .env.development에 작성한 환경변수로 적용되고

npm run start:prod 하면 .env.production에 작성한 거로 적용됨

 

CRA 환경에서 배포 서버에 따라 .env 분기하기 (feat. env-cmd)

 

 

 

[react] 실무 개발 환경/배포 환경 설정(.env)

 

 

리액트 - Create react app (CRA)에서 .env 를 이용한 환경변수 설정 (캐시 버스터, 배포파일 관리)

[React] .env로 개발/배포 환경 설정하기

 

react 프로젝트 local, dev, qa, production 환경을 구성해볼까요