[env-cmd] - CRA 개발,배포 환경에 따라 baseURL .env 설정
.env 공식문서
링크 : CRA 공식문서
다른 어떤 .env파일을 사용할 수 있나요
참고: 이 기능은 이상 에서 사용할 수 있습니다react-scripts@1.0.0 .
- .env: 기본.
- .env.local: 로컬 재정의. 이 파일은 테스트를 제외한 모든 환경에 로드됩니다.
- .env.development, .env.test, .env.production: 환경별 설정입니다.
- .env.development.local, .env.test.local, .env.production.local: 환경별 설정을 로컬로 재정의합니다.
왼쪽 파일이 오른쪽 파일보다 우선순위가 높습니다.
- npm start: .env.development.local, .env.local, .env.development,.env
- npm run build: .env.production.local, .env.local, .env.production,.env
- npm test: .env.test.local, .env.test, .env(참고 .env.local가 누락되었습니다)
이러한 변수는 시스템이 명시적으로 설정하지 않은 경우 기본값으로 작동합니다.
자세한 내용은 dotenv 문서를 참고하세요 .
참고: 개발을 위해 환경 변수를 정의하는 경우 CI 및/또는 호스팅 플랫폼에서도 이러한 변수를 정의해야 할 가능성이 높습니다. 이를 수행하는 방법은 해당 문서를 참조하십시오. 예를 들어 Travis CI 또는 Heroku 설명서를 참조하세요 .
💥CRA 프로젝트에서 env 우선순위는 등록한 명령어에 따라 정해져있다.
env-cmd 활용 환경변수 설정하기
설치
npm install env-cmd
package.json 수정
"scripts": {
"start:dev": "env-cmd -f .env.development react-scripts start",
"start:prod": "env-cmd -f .env.production react-scripts start",
"build:dev": "env-cmd -f .env.development react-scripts build",
"build:prod": "env-cmd -f .env.production react-scripts build",
}- development 실행 : npm run start:dev
- production 실행 : npm run start:prod
이 된다.
root 디렉토리에
.env.development,.env.production파일을 생성한다.
경로
- node_modules
- public
- src
- App.js
- index.js 등등..
- .env.development
- .env.production
- package.json ...
.env.development
REACT_APP_MODE=development
REACT_APP_BASEURL=🟢development 로 실행할 때 설정할 URL🟢.env.production
REACT_APP_MODE=production
REACT_APP_BASEURL=🟢production 으로 실행할 때 설정할 URL🟢💥주의 : CRA을 사용했을 경우 "환경변수 이름은 반드시 REACT_APP_ 으로 해야만 적용된다. ex ) REACT_APP_BASEURL , REACT_APP_URL .....
실행 후 확인
npm run start:dev 또는 npm run start:prod 를 해서 console.log 를 확인한다.
console.log('process.env.NODE_ENV :',process.env.NODE_ENV);
console.log('process.env.REACT_APP_BASEURL :',process.env.REACT_APP_BASEURL);💥process.env.NODE_ENV : 그대로 development로 나온다. 그냥 고정되어서 바뀌지 않는듯
💥process.env.REACT_APP_BASEURL : dev 와 prod 에 설정한 URL이 잘 바뀌는지 확인
