React개발 시 기본적으로 Node.js 위에서 개발을 하며 package.json 파일에 기본 설정을 하게 된다.

개발을 진행하다 보면, 개발 환경과 배포 환경을 다르게 해야 하는 경우가 생긴다.

개발환경과 배포환경 설정은 환경변수 선언(.env)를 통해 한다.

.env의 종류에는 .env.local, .env.development, .env.test, .env.production 이 있다.

React.js

CRA(Create-React-App)  사용하여 프로젝트를 시작한다.

기본적으로 node.js는 production(배포), development(개발), test(테스트)로 구분하여 사용한다.

그리고 create-react-app의 실행 명령어에 따라 자동으로 NODE_ENV값이 정해진다.

# production 배포 env실행
npm run build

# development 개발 env실행
npm start

# test 개발 env실행
npm run test

실행 OS에 따라 환경변수를 설정하는 법이 다르기 때문에, 환경 변수 설정 시 undefined가 나오는 경우가 있다.

따라서 cross-env모듈을 사용하여 환경변수를 설정하는 것이 좋다.

npm i cross-env

설치 후에 아래와 같이 pakage.json에서 사용 가능하다.

// 사용법 : cross-env 환경변수1=값 환경변수2=값 실행 명령어
"scripts": {
  "local": "cross-env REACT_APP_API_URL=localhost react-scripts start",
  "build": "cross-env REACT_APP_API_URL=https://api.example.com react-scripts start"
},

리액트에서 .env 환경 설정 시 변수 명에 REACT_APP_이라고 앞에 붙여줘야 인식을 한다.

위의 방식으로 하면 단점은 환경변수가 노출된다는 점이 있다. 

이런 단점 때문에 우리는 아래의 방식처럼 .env.local, .env.development, .env.test, .env.production 파일을 만들어서 변수를 넣어서 관리는 한다.

.env

환경 변수를 설정하기 위해 프로젝트 루트 경로에 필요한 환경 변수 선언(.env) 파일을 생성한다.

우선순위

.env 파일도 실행되는 우선순위가 있다.

환경 변수는 npm script에 따라 자동으로 값이 지정된다고 한다.

각 환경변수 파일 설명

.env

기본 값으로, 모든 환경에서 load 된다.

.env.local

테스트 환경을 제외한 모든 환경에서 load되는 값으로, 로컬에서 애플리케이션 실행 시에만 적용된다. 배포 시 적용되지 않는다.

.env.development | .env.test | .env.production

특정 배포 환경 별 지정 파일을 설정한다.

.env.development.local | .env.test.local | .env.production.local

특정 배포 환경 별 환경 설정에서 개인 로컬에 맞게 커스텀하고 싶은 부분이 있는 경우 해당 부분을 오버라이드해 적용한다.

Next.js

Next.js에서 .env 환경 설정 시 변수 명에 NEXT_PUBLIC_이라고 앞에 붙여줘야 인식을 한다.

NEXT_PUBLIC_BASE_URL=https://api.example.com

.gitignore

.gitignore에 포함 시켜 노출되지 않도록 주의한다.

# .gitignore
.env
.env.local
.env.development.local
.env.test.local
.env.production.local

참고