react에서 환경변수(dotenv) 사용

환경변수

node 공통

• NODE_ENV

react에서 환경변수 사용

• .env 파일에 REACTAPP(환경변수이름) 과 같이 REACTAPP 으로 시작해야 됨

REACT_APP_AUTHOR=tony
REACT_APP_SERVICE_PORT=8080

// 사용 예
<div>
  {process.env.REACT_APP_AUTHOR}
</div>

// 사용예 2
export const SERVICE_PORT = `${process.env.REACT_APP_SERVICE_PORT}`

.env 파일에도 우선순위가 있음

npm start: .env.development.local > .env.development > .env.local > .env
npm run build: .env.production.local > .env.production > .env.local > .env
npm test: .env.test.local > .env.test > .env

.env 파일은 결국 개발단계에서 사용 됨

배포할 땐 배포환경에 맞게 환경변수를 넣어줘야 함

• AWS S3라면 github action의 secrets에 입력
• netlify도 netlify사이트 내 환경변수 입력하는 곳이 있음

로컬환경에선 특이하게 dotenv.config() 없이도 가능함, 이름만 REACTAPP 으로 시작한다면

참고 문헌

• CRA에서 .env
• env 파일 우선순위