ReactJS/Docker 개발 환경에서의 환경 변수 설정 Tip

개발, 테스트 및 라이브 환경에서 손쉽게 관리, 배포 할 수 있도록 환경 변수를 많이 사용합니다. 

React에서는 .env로 명명된 파일에서 REACT_APP_ 이라는 prefix가 붙은 key,value값을 기본적으로 읽어옵니다. 이를 이용해 어떻게 각 운영 환경별로 설정 한 후 코드 혹은 값 변경없이 운영이 가능한지 알아보겠습니다.

아래 예제에서는 개발, 라이브 운영 환경을 운영해야 하며, 개발 환경은 자신의 PC에서 가동되며, 라이브 환경은 DOCKER - ubuntu로 빌드되어 가동되며, 운영 환경에 따라 DB IP와 PORT가 달라진다고 가정하겠습니다.

개발 환경을 위해 .env 파일에 아래와 같이 정의합니다.

REACT_APP_DB_IP=192.168.0.10
REACT_APP_DB_PORT=5005

reactjs에서는 아래와 같이 두 값을 불러올 수 있습니다.

.
.
.
console.log( "DB_IP/PORT = " , process.env.REACT_APP_DB_IP, process.env.REACT_APP_DB_PORT)
.
.

(* Reactjs는 초기 가동 시 .env파일을 읽어옵니다. 실행 중에 .env 파일이 변경되어도 새로운 값을 읽어오지 않으니 필요한 경우 꼭 재가동 하시기 바랍니다.)

그럼 라이브 환경을 위해서는 어떻게 해야 할까요? 우리의 목표는 라이브 배포를 위해 .env 파일을 변경하지 않도록 하는 것이 목표입니다.

만약 같은 key의 값이 시스템과 .env 파일에 동시에 등록되어 있다면 시스템 환경변수값이 우선합니다. 그래서 라이브 환경에서는 docker 실행 시 관련 값들을 시스템 환경변수로 등록하여 .evn 파일의 내용을 무시하도록 설정합니다.

env.live 라는 파일을 만들어 .env의 파일과 같은 key들을 등록합니다.

REACT_APP_DB_IP=172.31.0.10
REACT_APP_DB_PORT=6005

그리고 아래와 같이 도커를 실행합니다.

docker run ... --env-file ./env.live -p  ...

도커 실행 시 --env-file 옵션으로 등록할 환경변수를 기록한 파일을 읽어 시스템 환경변수로 등록해 줍니다.

 

env-cmd package 를 이용하면 실행 시 원하는 env 파일을 지정할 수 있습니다. 

> npm install env-cmd --save

package.json에 실행 스크립트를 아래와 같이 등록합니다.

.
.
"scripts" : {
	"start" : "react-scripts start",
	"live" : "env-cmd -f env.live react-scripts start",
.
.

이제 npm live로 실행하면 env.live파일의 값을 환경 변수로 사용하게 됩니다. 

.env.production , .env.local 같은 기본 설정 방법을 따라가도 되겠지만, 경우에 따라 애매한 상황들이 발생합니다. 그럴 때는 위의  방법으로 사용해 보실 것을 추천 드립니다.

이와 같이 환경변수를 관리하면 .env 파일을 git에 포함하지 않거나, 배포 버전별로 파일을 변경하지 않아도 되며, AWS ECS 혹은 도커 배포처럼 배포 시 항상 OS를 재설치 혹은 설정하는 경우 보다 간단한 배포 전략을 설정할 수 있게 됩니다. 

도움이 되셨기를... :)