MERN 기본파일 만들기 - 10) proxy, concurrently 사용하기

 

 

 

여태까지 우리가 사용한 server와 client의 포트는 다르다. 

 

포트가 다르기 때문에 우리가 바로 생성한대로 routing할 수가 없다

이럴때 cors issue 가 발생할 수 있는데, 

이를 proxy를 이용해서 해결할 수 있다. 

 

 

그에 대한 정보는 다음에서 확인할 수 있다. 

 

 

 

https://create-react-app.dev/docs/proxying-api-requests-in-development/

Proxying API Requests in Development | Create React App

우선 dev에 proxy를 사용하면, 

 

 

$ npm install http-proxy-middleware --save-dev를 입력해준다. 

package.json 파일에 "http-proxy-middleware": "^2.0.0"이 추가된 거을 확인할 수 있다. 

 

그다음  src 폴더안에 setupProxy.js파일을 만들어준다. 

const  createProxyMiddleware = require('http-proxy-middleware');



module.exports = function(app) {

app.use(

'/api',

createProxyMiddleware({

target: 'http://localhost:5000',

changeOrigin: true,

})

);

};

 

 

여기서 proxy 오류가 생겨서 확인해보니 같은 모든 React js 컴포넌트 파일들이 그 컴포넌트 폴더안에 있거나 다른 폴더에 존재한다면, 

다음과 같이 {}을 제거해주어야만 실행이 올바르게 되었다. 

 

또는 client에 설치해서도 가능하다. 

클라이언트에 $ npm install http-proxy-middleware --save를 입력해준다. 

package.json 파일에 "http-proxy-middleware": "^2.0.0"이 추가된 거을 확인할 수 있다. 

 

그다음  src 폴더안에 setupProxy.js파일을 만들어준다. 

 

 

 

프록시 서버 설명

 

 

 

 

 

 

npm start를 할때 server와 client를 각각 실행시켜야 하는데 이런 귀찮음을 제거하기 위해서 concurrently를 사용한다. 

 

https://www.npmjs.com/package/concurrently

concurrently

npm install concurrently --save를 해주고, 

 

 

 

server의 package.json 파일에 가서 다음과 같이 수정해준다. 

  "scripts": {
    "start": "node server/index.js",
    "backend": "nodemon server/index.js",
    "frontend": "npm run start --prefix client",
    "dev" : "concurrently \"npm run backend\" \"npm run start --prefix client\""
  },

 

이렇게 하면, 

npm run dev만 실행해도 server, client가 동시에 실행되게 된다.