Vue ERR_CONNECTION_TIMED_OUT 콘솔 에러 제거

Vue를 기반으로 만든 프로젝트에서 아래와 같은 에러가 발생하였다.
어떻게 해결 할 수 있었는지 알아보자.

 

위 에러 메시지는 Stack Overflow에 따르면, backend Api 서버와 frontend App이 같은 host에서 구동되지 않을 때 생기는 에러라고 한다.

 

간단하게 위의 문제를 해결하고 싶다면, vue.config.js 파일에서 아래 코드 처럼 설정하면 된다.

(참고로, vue.config.js 는 프로젝트의 root에 위치하고 있어야 하며 직접 생성해주어야 한다.)

(vue.config의 옵션에 대해서는 다음 링크를 참고하자. 그리고 webPack의 설정에 대해서는 다음 링크를 참고하자.)

module.exports = {
  devServer: {
    proxy: 'http://localhost:8080'
  }
}

 

 

 

하지만, 나의 경우에는 local개발환경, dev개발환경, 배포환경 총 3가지의 환경으로 나누어 개발하고 있었기에, 저렇게 일괄적으로 적용할 수 없었다. 따라서 아래 코드에서 살 펴 볼 수 있듯이, env파일에 실제 host주소를 적고, process.env를 통해 dynamic하게 proxy를 설정 할 수 있었다.

 

아! 물론 local환경에서만 개발할거라면 위 스택오버플로우 링크에서도 설명하듯이, 아래처럼 간단히 설정해도 된다고 한다. (이 부분은 지금 나의 환경에 필요하지는 않아 직접 적용해보지는 않았다.)

module.exports = {
devServer: {

    host: 'localhost'
    }
};

 

 

시간이 갈수록 느끼는 것은, 항상 프로젝트의 틀을 잡는 부분이 가장 어려운 부분인 것 같다.