Heroku에 작업물을 올리고 빌드를 했더니 오류가 발생한다.

디버그 해보니 로컬에서 작업할 때 사용한 NODE_ENV 환경변수를 webpack에서 빌드 후에 제대로 불러오지 못하고 있었다.
process.env.NODE_ENV를 사용하기 위해서 webpack definePlugin 기능을 사용하였고 말끔하게 해결됐다.

DefinePlugin 사용

WebPack Config에 아래와 같이 설정을 추가해 주자

module.exports = [{
    plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
        }
      })
}]

위 플러그인을 추가해주고 다시 빌드 하니 정상적으로 동작하는걸 확인 할 수 있었다.

Heroku 변수 세팅

만약 이렇게 했는데도 되지않는다면 Heroku 변수 세팅을 해줬는지 확인해보자

heroku config:set NODE_ENV=production

참고

developer holywater jeong
web framework
redux와 webpack을 사용할때 알아두면 도움이 될 9가지