문제상황
create-react-app(이하 CRA)로 개발하면서 개발환경과 운영환경에서 변수 값을 다르게 설정해야 할 일이 생겼었다. JAVA로 말하면 Maven build를 할 때 profile 별로 다르게 프로퍼티를 설정하는 것처럼 React에서도
빌드할 때 상황에 맞게 변수 값을 설정할 순 없는지 고민했고 관련 자료를 찾기를 시작했다.
검색한 결과, CRA에서도 각각 환경에 따라 다르게 설정파일을 지정하는
방식을 지원하고있다. 즉, CRA로 각자 다른 환경(개발, 운영, 테스트)에 따라 각각의 환경변수를 지정할 수 있다는 말이다. CRA에서 지원해주는
기능이기 때문에 CRA를 쓰지 않고 개발한 경우에는 webpack과
babel 설정을 통해 환경에 따라 다른 프로퍼티를 갖도록 분기 설정 해줘야 하는 것 같다.
커스텀 환경변수 설정하기
1) Shell에서 일시적인 환경변수 설정하기
npm 스크립트를 실행할 때 환경변수를 설정하는 방법이다. OS 별로
조금씩 다르다. 다음은 각 OS별에 대한 예시이다.
set
"REACT_APP_SECRET_CODE=abcdef" && npm start (Windows CMD)
($env:REACT_APP_SECRET_CODE
= "abcdef") -and (npm start) (Windows Powershell)
REACT_APP_SECRET_CODE=abcdef
npm start (Linux, macOS Bash shell)
2) .env 파일을 이용한 환경변수 설정하기
각 환경 별로 변수를 다르게
설정해 사용하고 싶으면 프로젝트의 루트 디렉토리에서 ‘.env’ 파일을 사용하면 된다. 다음의 파일명으로 환경변수가 관리된다.
.env: 기본 파일.
.env.local: .env를 덮어쓰는 파일. Test를 제외한 모든
환경에서 로딩된다.
.env.development, .env.test, .env.production: 각 환경 별 파일.
.env.development.local, .env.test.local, .env.production.local: 각각
env.* 를 덮어쓰는 파일.
각 npm 스크립트에 대해 각 파일들은 다음과 같은 우선 순위를 갖는다.
npm start: .env.development.local > .env.develpment
> .env.local > .env
npm run build: .env.production.local > .env.production
> .env.local > .env
npm test: .env.test.local > .env.test > .env (위에 서술한 것처럼 .env.local은 로딩 대상이 아니다.)
npm test: .env.test.local > .env.test > .env (위에 서술한 것처럼 .env.local은 로딩 대상이 아니다.)
커스텀 환경변수 예제
1) 테스트를 위해 .env.development
파일과 .env.production 파일을 생성 후 각각 환경변수를 설정한다.
2) 환경변수를 사용하는 쪽에서는 ‘process.env.환경변수명’ 으로 값을 호출한다.
class App extends Component {
render() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">{process.env.REACT_APP_BACKEND_HOST}</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
3) ‘npm start’와 ‘npm
run build’의 결과 화면에 차이를 볼 수 있다.
<그림
1. 개발환경 화면>
<그림
2. 운영환경 화면>
커스텀 환경변수를 사용할 때 주의할 점은 환경변수의
이름이 반드시 ‘REACT_APP_’으로 시작해야 한다는 점이다. ‘REACT_APP_’으로
시작하지 않은 환경변수는 무시한다.
댓글
댓글 쓰기