React | 환경 변수 설정하기 (create-react-app)

👀create-react-app?
리액트로 웹 애플리케이션을 만들기 위한 환경을 빠르게 구축해주는 CLI
바벨(babel), 웹팩(webpack), 테스트 시스템(jest), HMR(hot-module-replacement), ES5+, CSS 후처리 등 필수적 개발환경을 한 번에 구축해줌

 

빌드 시점에 환경 변수를 코드로 전달할 수 있고, 개발 / 테스트 / 배포 환경별로 다른 값을 적용할 때 유용합니다.

NODE_ENV라는 환경 변수를 기본으로 제공하며, 직접 등록하는 것도 가능합니다.

 

환경 변수는 코드에서  process.env.{환경 변수 이름} 으로 접근할 수 있습니다.

// 환경변수 확인하기
console.log(`NODE_ENV = ${process.env.NODE_ENV}`);

 

환경 변수 설정하는 법

NODE_ENV 환경 변수 외에 다른 환경 변수는 REACT_APP_를 반드시 붙여야 합니다.

환경 변수는 셸(shell)에서 입력하거나 .env 파일을 이용해 입력할 수 있습니다.

 

셸(shell)에서 입력하기👇

 

.env 을 이용해 입력하기

•  .env : 기본
•  .env.local : test환경 외에 모든 환경에서 로드됨
•  .env.development : 개발 환경 / npm start로 실행할 때 
•  .env.test : 테스트 환경 / npm test로 실행할 때
•  .env.production : 배포 환경 / npm run build로 실행할 때

💥 .env.~ 파일은 프로젝트의 최상위 경로에 위치해야 함

💥 REACT_APP_을 반드시 붙여야 함

💥 환경변수를 설정한 뒤 restart해주어야 함

// .env.development 파일
REACT_APP_DATA_API=dev-api.myapp.com
REACT_APP_LOGIN_API=dev-auth.myapp.com

// .env.test 파일
REACT_APP_DATA_API=test-api.myapp.com
REACT_APP_LOGIN_API=test-auth.myapp.com

// .env.production 파일
REACT_APP_DATA_API=api.myapp.com
REACT_APP_LOGIN_API=auth.myapp.com

// 환경변수 출력해보기
console.log(`REACT_APP_DATA_API = ${process.env.REACT_APP_DATA_API}`);
console.log(`REACT_APP_LOGIN_API = ${process.env.REACT_APP_LOGIN_API}`);

<!-- index.html 파일에서 환경변수 사용하기 -->
<title>%REACT_APP_NODE_VERSION%</title>

 

---

 

Adding Custom Environment Variables | Create React App