[React] 실무 개발 환경/배포 환경 설정(.env)

과거에 진행한 React 프로젝트 파일을 살펴보니 .env.production 파일과 .env.development 파일이 있었다. 개발 환경에서 실행할 때와 배포 환경에서 실행할 때 각각 다른 파일이 실행된다고 알고 있지만 정확히 기억이 나지 않는다. 그래서 이번 기회에 확실하게 정리하고 넘어가려고 한다.

환경변수 선언과 그 종류

개발을 진행하다 보면 개발 환경과 배포 환경을 다르게 설정해야 하는 경우가 생긴다. 예를 들어 개발 환경에서는 localhost 주소를 사용하지만, 배포 환경에서는 배포 서버 주소를 사용한다. 개발 환경과 배포 환경을 설정하는 방법으로는 환경변수 선언(.env)이 있으며, 그 종류는 .env.local, .env.development, .env.test, .env.production이 있다.

환경 변수의 기본 개념

React(Javascript)를 사용할 때 우리는 기본적으로 Node.js 위에서 개발한다. 기본적으로 Node.js는 production(배포)와 development(개발), test(테스트)로 구분하여 사용한다. 그리고 create-react-app의 실행 명령어에 따라 자동으로 NODE_ENV값이 정해진다.

# .env.production: 배포 시 실행(적용)
$ npm run build

# .env.development: 개발 시 실행(적용)
$ npm start

# .env.test: 개발 시 실행(적용)
$ npm run test

.env.local (로컬 개발 시)

.env.local 파일은 .env를 덮어쓰는 파일로, test 환경 외의 모든 환경에서 로딩된다.

.env.development

.env.development 파일은 개발 환경 시 아래의 명령어를 치면 사용된다.

$ npm run start
$ yarn start

만약, .env.development.local이 있다면, .env.development을 덮어쓴다.
npm start 시 .env 파일도 실행되는 우선순위가 있다. 우선순위는 아래와 같다.

.env.development.local > .env.development > .env.local > .env

오른쪽이 우선 실행된다. 만약 .env 파일만 있다면, .env 파일만 실행된다. 그리고 .env.development.local 파일이 있다면, 다른 우선 순위는 무시된다. 보통은 .env.development으로 사용된다.

.env.production (서버 배포 시)

.env.production 파일은 배포 환경 시 사용되며, 아래의 명령어를 치면 자동으로 사용된다.

$ npm run build 
$ yarn build

만약, .env.production.local이 있다면, .env.production을 덮어쓴다.
npm run build 시 .env 파일도 실행되는 우선순위가 있다. 우선순위는 아래와 같다.

.env.production.local > .env.production > .env.local > .env

오른쪽이 우선 실행된다.

.env.test

.env.test 파일은 테스트 환경 시 사용한다.

$ npm run test
$ yarn test

만약, .env.test.local이 있다면, .env.test을 덮어쓴다.
npm run test시 .env 파일도 실행되는 우선순위가 있다. 우선순위는 아래와 같다.

.env.test.local > .env.test > .env.local > .env

오른쪽이 우선실행된다.

.env 실습

.env.development

REACT_APP_DB_HOST=""

.env.production

REACT_APP_DB_HOST="http://ourdepartmentis.site:8080"

App.js

function App() {
  // 로그인 정보
  const [loginInfo, setLoginInfo] = useState(null);

  // 로그인 정보 데이터 요청 함수
  const getLoginInfo = async () => {
    await axios
      .post(process.env.REACT_APP_DB_HOST + "/api/loginInfo")
      .then((response) => {
        setLoginInfo(response.data);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  ...
}

---

참고

https://han-py.tistory.com/441