CRA은 환경변수를 사용하기 위해 dotenv 모듈을 사용하고 있으며, env 파일은 프로젝트 루트에 존재해야한다
예시 파일)
1. 실행 우선순위
.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 (note .env.local is missing)만약 위에 적힌 파일명이 아닌 다른 파일명으로 설정하고자 한다면 스크립트에 해당 환경에 맞는 .env 파일을 주입시켜야한다
"start": "react-scripts start",
"start:stag": "sh -ac '. ./.env.stag; react-scripts start'",
"start:prod": "sh -ac '. ./.env.prod; react-scripts start'",2. 사용 예시
// .env
REACT_APP_URL=localhost:3000;
// .env.stag
REACT_APP_URL=localhost:5000;
// use
<a href={process.env.REACT_APP_URL}>URL</a>cra 환경에서는 변수명 앞에 무조건 REACT_APP_이 있어야 인식이 된다
사용하지 않으면 변수가 무시된다
ref
Frontend Developer