[init] 여러 개의 서버 연결을 위한 프록시 설정, components 하위 파일 정리

[otcroz]

⚙️ 기능 설명

Flask 서버, Spring boot 서버의 경로를 연결하여 리액트 서버에서 여러 개의 서버와 통신할 수 있도록 설정한다.

✅ To-do

• [x] http-proxy-middleware를 설치하여 프록시 설정, CORS 오류 피하기
• [x] axios 설치, API 연결 확인하기
• [x] components 폴더의 하위 파일 정리

📑 참고 자료

• https://otcrotcr.notion.site/Proxy-React-8b14eab5ed354327832caf12e94de441?pvs=4
• https://github.com/chimurai/http-proxy-middleware

[otcroz]

패키지 설치

npm i http-proxy-middleware@^2.0.1

1. react + typescript 환경에서 http-proxy-middleware 적용하기

우선 결론만 말하자면, react+javascript 환경과 달라진 내용은 없다. typescript를 사용하기 때문에 다르게 작성해야 하는 코드가 있나 싶어 공식 문서를 찾아봤지만 typescript에 대한 업데이트를 중지했다고 한다.

// setProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function (app) {
  app.use(
    createProxyMiddleware('/spring', { // 리액트 서버에서 사용할 경로
      target: 'http://localhost:8080', // 서버 경로 1
      changeOrigin: true,
      pathRewrite: { '^/spring': '/' },
    })
  );
  app.use(
    createProxyMiddleware('/flask', { // 리액트 서버에서 사용할 경로
      target: 'http://localhost:5000', // 서버 경로 2
      changeOrigin: true,
      pathRewrite: { '^/flask': '/' },
    })
  );
};

API 통신 코드 작성 방법

• spring은 /spring/으로 시작하도록 경로를 작성한다.

• Flask는 /flask/으로 시작하도록 경로를 작성한다.

  • e.g. AI 서버의 http://localhost:5000/convert_script 호출하려면 /flask/convert_script를 작성하면 됩니다.

    
    const testFlaskAPI = async () => {
    const result = await axios.get('/flask/');
    const data = result.data;
    console.log('flask data: ', data);
    return data;
    };

  const testSpringAPI = async () => { const result = await axios.get('/spring/'); const data = result.data; console.log('spring data: ', data); return data; };

1. /flask/convert_script를 작성하면 원래는 http://localhost:5000/flask/convert_script를 호출하게 된다.
2. pathRewrite 속성에 의해 flask가 /로 rewrite된다.
3. 즉, http://localhost:5000/convert_script를 호출한다.

[otcroz]

‼️ http-proxy-middleware 최신 버전 적용 문제

몇 달 전에 http-proxy-middleware의 업데이트가 있었다. 그래서 npm install http-proxy-middleware 명령어로 설치하면 3.0.0 버전으로 설치된다. 하지만 err_connection_refused 오류가 발생하였다. https://github.com/chimurai/http-proxy-middleware/blob/master/MIGRATION.md 코드를 참고하여 버전에 맞게 재작성했지만 오류가 해결되지 않아 버전을 낮추는 방법(v3.0.0 -> v2.0.1)을 택했다.