React

React에서 Python Flask 서버 호출하기

huipark 2025. 5. 25. 00:35

react 프로젝트 중 python을 써야 할 일이 생겼다

어떻게 두 프로젝트를 관리할까 하다가 평소 모노레포를 좋아해 이번 프로젝트 역시 모노레포를 적용하기로 했다

❗️환경

npm

 

파이썬 서버와 클라이언트를 동시에 실행하려면 concurrently 라이브러리를 설치 한다.

각자 환경에 맞게 concurrently 설치

npm install --save-dev concurrently

package.json 예시

 

{
  "scripts": {
    "dev:client": "cd client && npm run dev",
    "dev:server": "cd server && source venv/bin/activate && python server.py",
    "dev": "concurrently \"npm run dev:client\" \"npm run dev:server\""
  },
  "devDependencies": {
    "concurrently": "^7.0.0"
  }
}

모노레포 구조 잡기

  • client / server 디렉토리 생성
my-fullstack-app/
├── client/            ← React 기반 프론트엔드
├── node_modules/
├── package.json
├── package-lock.json
└── server/            ← Python Flask 백엔드

파이썬 플라스크 세팅

파이썬 가상환경 생성

cd server
python3 -m venv venv

가상환경 실행

source venv/bin/activate

플라스크 설치

pip3 install Flask

파이썬 서버 코드 작성 

touch server.py
from flask import Flask

app = Flask(__name__)

# Members API Route
@app.route("/members")
def members():
    return {"members": ["Member1", "Member2", "Member3"]}

if __name__ == "__main__":
    app.run(debug=True)

 

여기까지 하면 ptyhon flask 세팅은 끝

클라이언트 세팅

client로 이동 후 각자 원하는 리액트 기반의 프레임워크 생성

나는 react router로 결정!

react router는 빌드 도구로 vite를 사용하고 있다. 파이썬 서버로 요청을 보내기 위해서는 proxy 설정을 해줘야 한다

proxy 설정 - vite.config.ts에 추가

server: {
    proxy: {
      '/python': {
        target: 'http://127.0.0.1:5000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/python/, ''),
      },
    },
  },

 

  • /python/members → http://127.0.0.1:5000/members로 프록시
  • Flask 서버는 기본적으로 5000번 포트에서 리스닝을 시작한다

실행

npm run dev

위 명령어로 server, client를 실행시키고

/python/members로 요청을 보내면 정상적으로 요청이 된다.