React 환경변수 설정하기

리액트에서 허용하는 환경변수

• REACT_APP_ 프리픽스가 있는 변수만 환경변수로 넣어준다. 
  • 예: REACT_APP_BASE_URL
• 프리픽스가 없으면 환경변수로 설정할 수 없다. 
• 단, NODE_ENV, PUBLIC_URL은 리액트에서 이미 정의된 변수들은 예외
  • NODE_ENV는 npm test, npm start, npm build 명령어가 실행될 때 자동으로 test, development, production으로 설정된다. 임의로 값을 넣어줘도 리액트가 무시한다. 

 

환경변수는 빌드 시 스태틱한 값으로 주입된다.

• 환경변수를 변경하면 새로 빌드해야 한다. npm start로 개발서버를 실행 중인 경우라면 재시작해야 한다. 
• 빌드 파일은 사이트에 접속한 누구나 볼 수 있기 때문에 환경변수에 민감정보를 넣으면 안 된다.

 

환경변수 소스코드에서 가져오기

• JavaScript: process.env.REACT_APP_BASE_URL 
• HTML: %REACT_APP_BASE_URL%

 

환경변수 설정하기

배시 명령어

REACT_APP_BASE_URL=localhost:8080 npm start

.env 파일

• .env, .env.local .env.[실행환경], .env.[실행환경].local 사용 
• 실행환경 별로 적용되는 .env 파일들
  • npm build: .env, .env.local, .env.production, .env.production.local 
  • npm start: .env, .env.local, .env.development, .env.development.local 
  • npm test: .env, .env.teset, .env.test.local 
• local 파일들 
  • .env.local 파일로 .env 파일의 변수를 덮어쓸 수 있다. 
  • .env.*.local 파일로 .env.* 파일의 변수를 덮어쓸 수 있다.
  • 개인의 로컬 설정이므로 팀의 리포지토리에 푸시하지 않는다.
  • .env.local 파일은 test 환경에서는 무시한다.

 

---

참고

• https://create-react-app.dev/docs/adding-custom-environment-variables/

Adding Custom Environment Variables | Create React App

• https://dev.to/felixdusengimana/environment-variables-in-reactjs-139l 

Environment Variables in ReactJS.