React :: 환경에 따른 .env(환경 변수) 셋팅하기

 

React 프로젝트를 개발하다보면, 배포 환경?에 따라 다르게 환경 변수를 셋팅해야하는 case가 발생한다.

 

예를 들면, 보통 API 주소를 환경 변수로 많이 셋팅해두고는 하는데..

운영 API 주소와 개발 API 주소를 배포 환경에 따라 다르게 셋팅해두고 싶은 case가 딱 이에 해당한다.

 

React :: 환경변수(.env) 셋팅하기

 

우선 기초 셋팅 방법을 첨부해본다. (.env 파일을 하나만 쓰는 케이스)

 

케이스에 따른 .env 설정 방법

※ 참고. 리액트 프로젝트 생성 시 CRA(Create-React-App) 을 사용하여 프로젝트를 초기 생성함.

 

해당 방법이 아닌 다른 방법으로 프로젝트 초기 생성 시에는 아마 dotenv 라는 것을 설치하고 다른 과정이 추가로 요청될 듯 하다.

 

.env 파일 생성

 

환경 변수를 셋팅하기 위해서 프로젝트 최상위(root) 경로에 파일 생성한다.

 

선언할 수 있는 .env 파일의 종류에는

⑴.env ⑵.env.development ⑶.env.local ⑷.env.production ⑸.env.test ...

 

등 여러가지가 있으며 내가 원하는 용도에 따라 필요한 파일을 생성하여 셋팅해준다.

 

생성한 파일을의 우선순위는 빌드 종류 별로 적용이 된다.

우선 순위는 아래와 같다. (왼쪽이 우선 순위가 더 높음)

start : .env.development.local > .env.development > .env.local > .env
build : .env.production.local > .env.production > .env.local > .env
test : .env.test,local > .env.test > .env.local > .env

 

.env 파일 변수 설정

 

## .env.development

REACT_APP_URL = localhost
REACT_APP_KEY = localkey

 

## .env.production

REACT_APP_URL = serverapi
REACT_APP_KEY = servercommonkey

 

.env 변수 사용법

위에서 설명한 우선순위에 있는 변수를 불러온다.

사용법은 기본 변수 사용법과 동일.

// in .js
const temp = process.env.REACT_APP_

// in .html
%process.env.REACT_APP_%

 

package.json 설정 확인

대부분의 프로젝트의 경우 위의 개념만으로도 프로젝트 실행이 가능할 것인데...

만약 이 설정이 잘 안먹히는 경우에는 package.json 설정을 확인해보도록 하자.

// package.json

"scripts": {
    "start": "react-scripts start",
    "build": "env-cmd -f .env.production react-scripts build",
  },

 

 

모든 설정이 완료 되면

npm start 를 하면 .env.development 파일이ㅡ, npm build 를 하면 .env.production 파일이 적용되어 실행 될 것이다.