react-scripts 버전이 2 이상인 경우 수동으로 프록시 설정하기

 

client에서 백엔드의 api 데이터를 요청하기 위해서 package.json에서 proxy를 설정합니다.

그러나 

 

react-script의 버전이 2.0.0이상 일 경우 수동으로 프록시를 설정해야 합니다.

 

 

(1) 먼저 http-proxy-middleware를 npm 또는 yarm을 사용하여 설치합니다.

$ npm install http-proxy-middleware --save
$ # or
$ yarn add http-proxy-middleware

 

 

(2) cline/src에 setupProxy.js라는 파일을 생성, 다음 코드를 입력한다.

const proxy = require("http-proxy-middleware");

module.exports = function(app) {
  app.use(proxy("apiにリクエストするリンク, { target: "http://localhost:5000" }));
};

 

proxy middleware가 src/ 파일 내에서 setupProxy.js의 설정을 차고하여 설정을 합니다.

apiにリクエストするリンク라는 경로로 요청이 들어올 경우 localhost:5000 서버를 이용하도록 설정했습니다.

 

만약 /api 로 시작하는 모든 경로에 리다이렉션을 실행하고 싶다면 

app.use(proxy("/api", { target: "http://localhost:5000" }));

 

 

*주의해야할 점

proxy-middleware를 사용하는 경우 client/package.json에는 proxy설정이 있으면 안됩니다.