frontendreact

create-react-app에서 env/환경변수 사용하기

create-react-app, frontend, react
Views: 274

시작하기

환경변수를 사용해야하는 경우가 있습니다.
Redux devtool을 예로 들수있습니다. 개발자의 경우에는 디버깅시에 필요하지만 사용자는 보면 안되는 데이터가 있을수 있습니다.
production 과 development에 따라 구분해서 보여줄 필요가 있습니다.

env 파일 구성

env파일은 프로젝트 루트에 존재해야합니다.

1
2
3
4
5
6
7
8
.env: 기본 파일.
.env.local: .env를 덮어쓰는 파일. Test를 제외한 모든 환경에서 로딩됩니다.

.env.development: 개발자 환경에서 로딩
.env.test: 테스트 환경에서 로딩
.env.production: 프로덕션 환경에서 로딩

.env.development.local, .env.test.local, .env.production.local: 각각 env.* 를 덮어쓰는 파일입니다.

env 실행 우선순위

왼쪽이 오른쪽보다 우선순위가 높습니다.

1
2
3
npm start: .env.development.local > .env.development > .env.local > .env
npm run build: .env.production.local > .env.production > .env.local, .env
npm test: .env.test.local > .env.test > .env (note .env.local is missing)

사용예시

Create react app에서는 변수명앞에 무조건 REACT_APP_가 있어야 인식을 합니다.
사용하지 않을시 변수를 무시합니다.

1
2
3
4
5
6
7
8
// .env.development
REACT_APP_URL= "http://localhost:3000"

// .env.production
REACT_APP_URL= "http://localhost:4000"

// 사용시
<a href={process.env.REACT_APP_URL}}>URL</a>

현재 상태를 구분하기 쉬운 NODE_ENV

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const { NODE_ENV } = process.env as {[key as string]: string}
// 환경변수의 경우 반환값이 항상 string입니다.

const isPro = NODE_ENV === 'production';
const isDev = NODE_ENV === 'development';
const isTest = NODE_ENV === 'test';

if(isDev){
    // 개발자 모드
}else if(isPro){
    //프로덕션 모드
}else if(isTest){
    //테스트 모드
}else{
    // 에러!!
}

이런 방식으로 사용할수 있습니다.

자세한 내용은 create-react-app docs: Adding Custom Environment Variables에서 확인 할 수 있습니다.

Share