[REACT] dotenv 환경변수 설정, 빌드 환경변수

React 빌드 환경변수 설정

현 프로젝트에서 빌드 시 동적으로 도메인 명을 바꾸는 작업이 필요했다.

개발에서는 http://localhost:8080 실제 서비스 운영에는 도메인을 올릴 거 기 때문에 서버에 요청하는 uri이 각 빌드마다 달라야 했다.

React dotenv-cli 라이브러리 설치

https://www.npmjs.com/package/dotenv-cli

dotenv-cli

설치명령어

//npm
$ npm install -g dotenv-cli

// yarn 
$ yarn global add dotenv-cli

 

나의 경우 위 명령어로 글로벌 설치를 했지만 실제 프로젝트에서는 dotenv 명령어가 제대로 실행되지 않았다.

 

yarn add dotenv-cli --dev

 

현재 프로젝트 패키지 매니저는 yarn 이기에 위 명령어로 개발의존성에 추가했다.

pakage.json에 개발의존성에 추가된 상세코드

내가 설정하고자 하는 각 빌드의 환경변수들

(중요) dotenv 우선순위

• . env: 기본 설정 파일입니다. 모든 환경에서 적용됩니다.
• . env.local: 로컬 재정의 파일입니다. 이 파일은 테스트를 제외한 모든 환경에서 로드됩니다.
• . env.development,. env.test,. env.production: 환경별 설정 파일입니다.
• . env.development.local,. env.test.local,. env.production.local: 환경별 설정의 로컬 재정의 파일입니다. 이 파일들은 다음과 같은 순서대로 우선순위를 가집니다:

• 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.local은 제외됩니다)

정리를 하자면. env 파일은 기본으로 가져오고 그 외 스크립트에 명시된 파일을 추가로 가져온다고 보면 된다.

내가 작성한 빌드 스크립트 각 명령어마다 다른 환경변수를 가져오는 명령어를 입력했다.

 

실제로 yarn build 후 serve -s build 명령어를 사용하여 실행시켰고 각 파일에 출력되는 값을 콘솔에서 확인했다.