env-cmd를 이용한 react 환경변수 설정

프로젝트를 진행할때면 보통 다음의 환경들로 구분하여 개발이 진행되는데

• local: 각 개발자가 로컬에서 개발하기 위한 환경
• development: 개발 서버를 두어 기능 테스트하기 위한 환경
• staging or qa: 운영전 품질 또는 통합 테스트를 하기 위한 환경
• production: 운영하기 위한 환경

CRA(Create React App) 프로젝트에서 제공해주는 환경(enviroment)의 종류가 developemnt 와 production만 있다보니 별도의 작업이 필요하다.

development는 react-scripts start로 실행할 경우, production은 react-scripts build로 빌드하여 서버에서 배포하여 실행했을 경우.

여러 방법 중에 env-cmd를 활용한 방법이 제일 간단해보인다.

패키지 설치

# yarn
yarn add env-cmd

# npm
npm i env-cmd

https://www.npmjs.com/package/env-cmd

설정

설정하는 방법은 여러가지가 있는데 각 환경별 파일들(.env.local .env.development .env.staging…)을 두어서 하는 방법이 대부분인데..환경 변수가 많지 않을 경우에는 .env-cmdrc파일을 이용하는 방법이 제일 간단해보인다.

.env-cmdrc

{
  "local": {
    "REACT_APP_API_URL": "http://localhost:8080"
  },
  "development": {
    "REACT_APP_API_URL": "http://development:8080"
  },
  "staging": {
    "REACT_APP_API_URL": "http://staging:8080"
  },
  "production": {
    "REACT_APP_API_URL": "http://production:8080"
  }
}

각 환경의 이름은 정해진것은 아니라 임의로 작성하면된다.

package.json

  "scripts": {
    "start": "env-cmd -e local react-scripts start",
    "start:dev": "env-cmd -e development react-scripts start",
    "start:stg": "env-cmd -e staging react-scripts start",
    "build:dev": "env-cmd -e development react-scripts build",
    "build:stg": "env-cmd -e staging react-scripts build",
    "build:prd": "env-cmd -e production react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

-e 옵션을 주어 환경의 이름을 뒤에 작성하면된다.

로컬 테스트

로컬에서 실행

yarn start

로컬에서 개발서버용으로 실행

yarn start:dev

실행을 하면 NODE_ENV의 값이 development로 표시

서버에 배포하여 테스트

배포 테스트를 위해 npm serve를 이용

npm i -g serve

staging으로 빌드하여 테스트

빌드를 하면 build폴더에 결과 파일들이 생성된다.

yarn build:stg

serve를 이용하여 실행

serve -s build

production으로 빌드하여 테스트

yarn build:prd

빌드를 하면 NODE_ENV의 값이 production으로 표시