아임포트 대시보드

아임포트 대시보드 리뉴얼 앱

프론트 환경변수

1. NODE_ENV

개발모드인지 상용모드인지 구분하기 위한 인자입니다. redux store 구성, saga 구성, cookie domian 지정 등에 사용됩니다.

export function setCookie(name, value, expires) {
  // 쿠키 도메인 설정
  let domain = '.iamport.kr';
  if (process.env.NODE_ENV === 'development') {
    domain = '.iamport.local';
  } 

  Cookies.set(name, value, { expires, domain });
}

2. BRANCH

git 브랜치 이름을 의미합니다. npm 빌드시 RC와 PRODUCTION을 구분하기 위한 인자로 사용됩니다. RC와 PRODUCTION는 모두 상용모드이므로 웹팩 셋팅 파일은 webpack.prod.babel.js를 공유하되, 웹 서버 URL에 차이가 있어 BRANCH 이름으로 이를 구분합니다.

// package.json
{
  ...
  "scripts": {
    // RC 빌드
    "build:rc": "cross-env NODE_ENV=production BRANCH=release-candidate webpack --config internals/webpack/webpack.prod.babel.js",
    // PRODUCTION 빌드
    "build": "cross-env NODE_ENV=production BRANCH=production webpack --config internals/webpack/webpack.prod.babel.js",
  },
  ...
}

// webpack.prod.babel.js
let BASE_URL = 'https://dashboard-api.iamport.kr/api/v2';
if (process.env.BRANCH === 'release-candidate') {
  BASE_URL = 'https://rc-dashboard-api.iamport.kr/api/v2';
}

{
  ...
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        BASE_URL: JSON.stringify(BASE_URL),
      },
    }),
    ...
  ]
}