dev-server란 무엇인가?

dev-server

웹팩의 번들링 대상 파일이 변경되었을 때 매번 웹팩 명령어를 실행하지 않아도 코드만 변경하고 저장하면 웹팩 실행 후 브라우저를 자동으로 수정된 코드를 반영하여 렌더링해준다.

 

지금부터 webpack의 dev-server를 데브 서버라고 하겠다.

설치방법은 npm install --save-dev webpack-dev-server 을 터미널에 입력한다.

 

한편 데브 서버는 일반 웹팩 빌드와 다른 점이 있다.

데브 서버를 실행하여 웹팩 빌드를 하는 경우 결과물이 파일 탐색기나 프로젝트 폴더에서 보이지 않는다.

구체적으로 말하자면 웹팩으로 빌드한 결과물은 메모리에 저장되고 파일로 생성되지 않기 때문에 눈으로 볼 수 없다는 것이다.

또한 개발 서버를 종료하면 번들링한 결과물도 사라진다.

개발 서버를 켜놓는 동안에만 번들링한 파일 경로 안에서 접근이 가능하다.

그렇기 때문에 웹팩 데브 서버는 개발할 때만 사용하고 개발이 완료되면 웹팩 명령어를 이용하여 결과물을 파일로 생성해야 한다.

 

데브 서버를 사용할 때 webpack.config.js 혹은 webpack merge 모듈을 사용한다면 webpack.dev.js에서 데브서버의 속성 중 다음과 같이 설정해야 한다.

webpack merge 모듈에 대해 모른다면 필자의 블로그 mode란 무엇인가?를 참고하면 된다.

// webpack.config.js 혹은 webpack.dev.js
module.exports = {
  // ...
  devServer: {
    contentBase: path.resolve(__dirname,'src/main/resources/static/dist'),
    publicPath: '/dist/',
    host : 'localhost',
    hot: true,
    historyApiFallback: true,
    overlay: true,
    port: 8081,
    open : true
  },
  // ...
};

 

위 코드에 대한 설명은 다음과 같다.

contentBase : 데브 서버가 로딩할 파일 경로를 지정한다.

publicPath : 브라우저에서 url형태로 로딩할 파일의 경로를 지정하는 것이기 때문에 dist폴더에 번들링 파일이 있을 경우 "/dist/"로 표기한다.

host : devServer 실행환경의 호스트명을 입력하며 기본 값은 localhost이다.

예를 들어 쿠키 기반의 인증은 인증 서버와 동일한 호스트명으로 개발환경을 맞춰야 한다.

hot : Hot Module Replacement라고 하며 true로 설정하면 브라우저를 새로 고침되지 않아도 웹팩으로 빌드한 결과물(예를 들어 js나 css)이 웹 브라우저에 실시간으로 수정되어 반영될 수 있도록 도와준다.

프론트 개발자라면 흔히 아는 livereload라는 라이브러리와 비슷하다고 하면 이해하기 쉬울 것이다.

historyApiFallback : 히스토리API를 사용하는 웹 어플리케이션 개발 시(예를 들어 SPA) 사용하며 이때 true로 설정한다.

overlay: true로 설정 시 웹팩으로 빌드할 때 에러나 경고를 브라우져 화면에 표시한다.

해당 기능을 true로 설정 시 만약 서버 응답코드 404가 뜨면 인덱스 페이지로 리다이렉트 시킨다.

또한 새로고침 시 Cannot GET /signup이라는 에러가 뜨는 것을 해결해준다.

port : 데브서버의 포트 번호를 임의로 설정하는 곳이다.

open : true로 설정할 시 데브 서버를 실행하면 브라우저가 즉시 실행된다.

proxy : proxy서버를 띄워서 api 서버에게 요청을 보낼 때 cors에러를 피할 수 있도록 해준다.

 

module.exports = {
  // ...
  devServer: {
    // ...
    proxy:{
      "/api" : "http://localhost:8080",
    }
  },
  // ...
};

개발 서버에 들어온 HTTP 요청 중 api로 시작하는 것은 http://localhost:8080로 요청한다는 의미이다.

이것을 '요청을 proxy한다'라고 말한다.

만약 위와 같이 설정하지 않고 로컬에서 도메인이 있는 서버에 요청을 하게 되면 CORS 오류가 뜨게 된다.

CORS에 대한 설명은 여기서 생략한다.

간략히 얘기하면 다른 도메인 간에서는 자바스크립트로 타 도메인의 자원을 요청할 때 발생하는 에러다.

그렇기 때문에 proxy를 설정하고 서버에 api를 요청하면 다음 그림과 같은 구조가 되며 에러를 해결할 수 있다.