[React] .env로 개발/배포 환경 설정하기

React개발자들은 기본적으로 Node.js 위에서 개발을 한다.
그리고 package.json 파일에 기본 설정을 하게된다.

개발을 진행하다보면, 개발 환경과 배포 환경을 다르게 해야하는 경우가 생긴다.
예를들어 DEV서버의 URL과 실제 PROD서버의 URL이 다른 경우가 있겠다.

 

개발환경과 배포환경 설정은 환경변수 선언(.env)를 통해 한다.
creact-react-app을 사용하여 프로젝트를 시작했다고 가정하자.

환경변수 기본개념

기본적으로 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

package.json에서 아래와 같이 사용이 가능하다.

 ## 사용법 : cross-env 환경변수1=값 환경변수2=값 실행 명령어
"scripts":{
    "local":"cross-env REACT_APP_URL=https://hi-url.com react-scripts start",
    "build":"cross-env REACT_APP_URL=https://hello-url.com react-scripts start"
    }

리액트에서는 .env환경 설정시 변수명 앞에 REACT_APP_이라고 붙여줘야 인식을 한다.
붙이지 않으면 무시한다.

하지만, 위의 방식은 환경변수가 노출된다는 치명적인 단점이 존재한다.
따라서 아래의 방식처럼 .env.local, .env.dev , .env/test ,.env.production등의 파일을 만들고, 그 안에 변수를 넣어 관리한다.

.env.production

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

npm run build 
yarn build 

npm run build 시 .env 파일도 실행되는 우선순위가 있다. 우선 순위는 아래와 같으며, 오른쪽이 우선 실행된다.

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

.env

• .env.development 파일

  REACT_APP_HOST=localhost
  REACT_APP_APP_ID=1234

• .env.production 파일

  REACT_APP_HOST=https://prod-server.com
  REACT_APP_APP_ID=5678

환경변수 사용

export default function actionHandler() {
  return (
    <div><h1>{process.env.REACT_APP_HOST}</h1></div>
  )
}

npm start로 서버를 켰을 경우에는 localhost가 뜨고, npm run build로 서버를 키면 https://prod-server.com가 뜰 것이다.

package.json 설정

package.json에서 env설정을 변경해줄 수도 있다.

  "scripts": {
    "start": "cp ./.env.dev ./.env && react-scripts start",
     "start-production": "cp ./.env.prod ./.env && react-scripts build",
    }

env 파일이 .env,.dev,.prod로 있다고 했을 때
스크립트에서 실행방법을 나누고 cp로 .env에 복사 후 각 환경별로 환경변수를 받고 실행하는 방법이다.