[Webpack] devServer proxy 설정 + pathRewrite

nodejs 프로젝트 구성 시, 페이지를 표출하기 위한 서버와 api 통신을 위한 서버를 분리하는 경우가 많다.

분리하면 각각을 별도로 작업할 수 있어 전체적인 서비스에 주는 영향을 줄일 수 있지만, 그 만큼 관리해야 하는 서버가(포트가) 늘어나는 것도 사실이다.

 

따라서 작은 서비스의 경우 api 통신을 위한 서버를 분리하지 않고 합쳐서 진행할 수도 있다.

서버를 실행하면 페이지의 리소스에 접근이 가능하고, path에 따라 api 통신을 하기도 하는 것이다.

 

대략 아래와 같은 구조를 갖는 서버가 될 것이다.

const express = require("express");
const app = express();
const fetch = require("node-fetch");

app.use("/", express.static(__dirname + "/"));
app.get("/api", (req, res) => {
  fetch("some_api_url")
    .then((response) => {
      res.send(response);
      res.end();
    });
});

app.listen(8080);

결과만 보았을 때, 동작하는 데에는 큰 이상이 없다. 

 

하지만 webpack을 도입하면서(webpack devserver)는 문제가 생긴다.

webpack devserver는 위에서 작성한 서버를 실행시켜주지 않는다. 단지 엔트리 파일과 아웃풋을 지정하고 devServer의 포트 등을 설정하면 그에 맞는 별도의 개발 서버가 실행되고, 출력된 아웃풋을 사용하면 되는 것이다.

 

따라서 webpack devserver를 활용하려는 경우도 위 코드를 그대로 실행하거나, api 호출 부분을 분리해서 실행해야한다.

webpack devserver 도입으로 인해 구동이 필요한 서버가 하나에서 여럿으로 분리되는 것은 그리 좋지 않은 방법이므로,

위 코드를 그대로 실행한 채 webpack devserver를 추가로 실행한다.

(api 호출이 아닌 다른 부분에서 영향이 줄만한 곳이 있다면 주석 처리 등 임시 작업이 필요할 수 있다)

 

devServer 설정이 다음과 같다고 하면,

devServer: {
  contentBase: ".",
  port: 9090,
}

 

현재 :8080 에는 api 서버가, :9090 에는 devServer 가 실행중인 것으로 볼 수 있다.

 

devServer 도입 전 상황을 다시 생각해보면 리소스 호출과 api 호출이 같은 포트를 사용하였기 때문에 이미 코드상에서 호스트가 생략된 상태일 것이다. 

devServer 도입 후에는 두 서버의 포트가 달라지기 때문에 호스트와 포트를 명시하지 않으면 404에러가 발생한다.

이런 경우에 사용할 수 있는 것이 proxy이다.

devServer: {
  contentBase: ".",
  port: 9090,
  proxy: {
    "/api/*": {
      target: "http://localhost:8080",
    },
  },
}

위와 같이 proxy를 설정하면 api 요청에 대해서는 :8080 포트를 사용하도록 처리된다.

 

네이밍의 차이로 인해 경로가 달라져야 한다면, 다음과 같이 rewrite 하는 것도 가능하다.

devServer: {
  contentBase: ".",
  port: 9090,
  proxy: {
    "/api/*": {
      target: "http://localhost:8080",
      pathRewrite: {"^/api": "/agent"}, // /api로 시작하는 문자를 /agent 로 변경
    },
  },
}