React 환경 변수 설정

React 환경 변수 설정

React 개발 시 환경 변수로 분리되는 값들이 있는데, 이 환경 변수들은 .env 파일을 생성해 값을 설정하여 사용할 수 있다.(React에서는 REACT_APP_ 키워드가 앞에 붙은 변수들만 환경 변수로 사용 가능하다)

// .env 파일 예시

REACT_APP_ENV=development
REACT_APP_API_BASE_URL=https://url
GENERATE_SOURCEMAP=false

.env 설정을 마치고 나면 React에서는 설정했던 변수명을 아래와 같이 가지고 올 수 있다.

const BASE_URL = process.env.REACT_APP_API_BASE_URL;

.env의 우선 순위

env 파일은 우선순위를 가지고 있는데, .env가 가장 마지막으로 적용되며 .env.development, .env.test, .env.production은 .env를 덮어쓴다. (로컬 환경에서는 local을 사용하는데, local은 각각의 파일을 덮어쓴다.)

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

AWS에서의 환경 변수 설정

AWS를 사용하고 있다면 CodePipeline에서도 환경 변수를 설정할 수 있는데, AWS에서 설정한 환경 변수는 .env 계열의 파일이 있고 같은 이름의 변수가 있다면 .env 파일의 내용으로 덮어쓴다.

 

AWS에서 환경 변수 설정하기

 

// AWS 환경 변수
REACT_APP_USER=test

// .env 환경 변수
REACT_APP_USER=rious275

// React
console.log(process.env.REACT_APP_USER) // rious275 출력