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

리액트(.env)로 개발 시 개발 환경과 배포 환경에 대한 기본 설정을 해보자. 기본적으로 우리는 Nodejs위에서 개발을 한다. 그리고 package.json 파일에 기본 설정을 하게 된다. 하지만, 개발을 진행하다보면, 개발 환경과 배포환경을 다르게 해야하는 경우가 생긴다. 예를 들면, DB를 mysql로 진행한다고 한다면 현재 운영하는 DB와 개발 시 동작이 가능한지를 판단하는 DB는 다르게 만들어야 하기 때문에 DB id/pw가 다르게 설정을 하여 시작 시 필요한 DB를 사용할 수 있게 만드는 것이 좋다. 정리하면 개발환경과 운영환경에서의 변수 값을 다르게 설정해야 할 경우 아래의 방식을 이용하면 된다. 본 내용에 들어가기 전에 nodejs 자체에 대한 기초지식이 부족하다고 느낀다면, 아래의 url을 참고해서 필요한 부분을 확인하자.

 

nodejs 기초 총 정리

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

 

이렇게 개발환경과 배포환경을 설정하는 방법으로는 환경변수 선언(.env)을 통해 한다. .env의 종류는 여러가지가 있다. .env.local, .env.development, .env.test, .env.production 이 있다. 이러한 것들을 하나씩 알아보자. 기본적으로 리액트 웹 애플리케이션을 만들기 위한 환경을 쉽게 구축 할 수 있는 create-react-app을 사용하여 프로젝트를 시작했다고 가정하고 글을 적겠다.

 

 

0. 기본 개념 (환경 변수)

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

 

# production 배포 env실행
$ npm run build

# development 개발 env실행
$ npm start

# test 개발 env실행
$ npm run test

 

실행 OS에 따라 환경변수를 설정하는 방법이 다르기 때문에, 환경 변수 설정 시 undefined가 나오는 경우가 있다. 따라서 아래의 명령어를 실행하여 cross-env 모듈을 사용하여 환경변수를 설정하는 것이 좋다.

 

$ npm i cross-env

 

설치 후에 아래와 같이 pakage.json에서 사용가능하다.

 

  ```
  @사용법
  cross-env 환경변수1=값 환경변수2=값 실행명령어
  ```
"scripts": {
  "local": "cross-env REACT_APP_API_URL=localhost react-scripts start",
  "build": "cross-env REACT_APP_API_URL=999.99.99.99 react-scripts start"
},

 

리액트에서 .env 환경 설정 시 변수명에 REACT_APP_이라고 앞에 붙여줘야 인식을 한다. 붙이지 않으면 무시한다. 위의 방식으로 하면 단점은 환경변수가 노출된다는 치명적인 단점이 있다. 이러한 단점 때문에 우리는 아래의 방식처럼 .env.local, .env.development, .env.test, .env.production 라는 파일을 만들어서 변수를 넣어서 관리는 한다.

 

 

 

0.1.   .env.local (로컬 개발 시)

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

 

 

0.2.   .env.development

.env.development 파일은 개발환경 시 아래의 명령어를 치면 사용된다. 만약, .env.development.local이 있다면, .env.development을 덮어쓴다. 

$ npm run start
$ yarn start

npm start 시 .env 파일도 실행되는 우선순위가 있다. 우선순위는 아래와 같다.

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

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

 

 

 

 

0.3.   .env.production (서버 배포 시)

.env.production 파일은 배포 환경 시 사용되며, 아래의 명령어를 치면 자동으로 사용된다. 만약, .env.production.local이 있다면, .env.production을 덮어쓴다.

$ npm run build 
$ yarn build

npm run build 시 .env 파일도 실행되는 우선순위가 있다. 우선순위는 아래와 같다.

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

오른쪽이 우선실행된다.

 

0.4.   .env.test

.env.test 파일은 테스트 환경 시 사용한다. 만약, .env.test.local이 있다면, .env.test을 덮어쓴다.

 

$ npm run test
$ yarn test

npm run test시 .env 파일도 실행되는 우선순위가 있다. 우선순위는 아래와 같다.

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

오른쪽이 우선실행된다.

 

 

1. . env 실습

보통 production(배포)와 development(개발)환경에서 많이 사용하니 2개의 파일만 만들어보자. 파일을 만드는 위치는 package.json이 존재하는 위치에  .env.development 파일과 .env.production 파일을 생성하자. 리액트에서 .env 환경 설정 시 변수명에 REACT_APP_이라고 앞에 붙여줘야 인식을 한다.

 

1.1 환경변수 설정

## .env.development 파일

REACT_APP_HOST=localhost
REACT_APP_PASSWORD=hanpay-dev
REACT_APP_ABC=dev-test

 

## .env.production 파일

REACT_APP_HOST=prod-server.com
REACT_APP_PASSWORD=abc123!!!!!
REACT_APP_ABC=prod-test

 

 

1.2 환경변수 사용

만약 아래의 JSX를 작성했다고 하자.

class App extends Component {
  render() {
    return (
      <div className="App">
          <h1>{process.env.REACT_APP_HOST}</h1>
      </div>
    );
  }
}

 

npm start로 서버를 켰을 경우에는 localhost가 뜬다. 그러나 npm run build로 서버를 키면 prod-server.com라는 문자가 보일것이다.

 

 

만약, 자바스트립트 로직에 넣고 싶다면 아래와 같이 사용하면 된다.

class App extends Component {
  const object = {
    host : process.env.REACT_APP_HOST,
    password : process.env.REACT_APP_PASSWORD,
    abc : process.env.REACT_APP_ABC
  }
  render() {
    return (
      <div className="App">
          <h1>env 사용법</h1>
      </div>
    );
  }
}

• 그냥 process.env.REACT_APP_HOST 와 같이 셋팅한 변수는 바로 사용해서 넣어주면 된다.

 

 

2. package.json 설정

위의 개념만으로도 충분히 프로젝트는 사용가능 할 것이다. 그러나 위의 설정이 안먹히는 경우에는 아래의 내용으로 package.json 설정을 변경해보자. 기본적으로  $ npm i env-cmd 를 설치해야한다.

"scripts": {
    "start": "react-scripts start",
    "build": "env-cmd -f .env react-scripts build",
  },

• env-cmd -f .env는 우선순위가 높은 .env.production가 아닌 .env 를 실행하도록 지정한 것이다.
• -f를 안적으면 .env 파일을 찾을 수 없다고 나오니 조심하자.

 

"scripts": {
    "start": "react-scripts start",
    "build": "env-cmd -f .env.production react-scripts build",
  },

• $ npm run build 실행 시 .env.production이 적용된다.