14. boilerplate - proxy 설정 및 concurrently 적용

boilerplate 유튜브 강의 시리즈

Blog ReactJS NodeJS #21 Proxy Concurrently

 

참고

create react app 문서 - proxying

 

리액트 기본 포트가 3000포트 이기 때문에 백엔드 포트를 3000 -> 5000으로 변경했다.

따라서 현재 프로젝트는 프론트는 3000번, 백엔드는 5000번 포트를 사용한다.

 

1. proxy 설정

프론트에서 백엔드의 api를 사용할 때 다른 호스트나 포트로 리다이렉션 할 필요 없이 proxy 설정을 해놓으면 편하게 사용할 수 있다.

 

http-proxy-middleware 를 설치한다.

npm install -D http-proxy-middleware

 

client 루트에 setupProxy.js 파일을 생성하고 아래 코드를 작성한다.

target에는 백엔드 서버의 주소를 적고 해당 target에 접속할 url 이름을 api로 설정한다.

이와 같이 해놓으면 /api 로 백엔드 자원에 간편하게 요청할 수 있다.

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

module.exports = function(app) {
    app.use(
        '/api',
        createProxyMiddleware({
            target: 'http://localhost:5000/'
        }));
};

 

2. concurrently 적용

프론트 서버와 백엔드 서버를 따로 실행하면 불편하기 때문에

동시에 실행하기 위해 concurrently 모듈을 활용한다.

npm install concurrently --save

 

package.json에 backend와 frontend를 각각 실행하는 스크립트를 만들고나서

dev에는 concurrenly 모듈을 활용하여 동시에 실행하는 스크립트를 만든다.

 "scripts": {
    "backend": "tsc-watch --onSuccess \"node dist/src/server/index.js\"",
    "frontend": "npm run start --prefix src/client",
    "dev": "concurrently \"npm run backend\" \"npm run frontend\""
  },

 

실행

npm run dev

 

결과