Flask와 React 연결하기

보통 flask는 express.js랑 써왔고, 둘이 연결성도 좋았는데 백엔드에 Ai 모델을 넣으려니까 역시 flask가 제일 나을 것 같아서 둘이 연결하는 방법을 찾아봤다. 

 

일단 폴더 구조는 이렇게 만들었다. 리엑트 프로젝트를 백엔드와의 구분을 위해서 client로 만들고 밖에 app.py를 비롯한 flask 파일들을 만들었다. 

 

리엑트 프로젝트는 npx를 사용해서 만들어주자

npx create-react-app client

 

그 다음에 아래 명령어로 Flask-CORS를 설치해준다

pip install flask-cors

 

app.py에 CORS를 import 해주고

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 개발 환경에서만 이렇게 사용

@app.route('/api/test')
def test():
    return {"message": "Connected to Flask!"}

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

 

React에서 concurrently를 사용하기 위해서 install 해준다. 

npm install concurrently --save-dev

 

그리고 client의 package.json에 다음과 같이 설정하자

"scripts": {
  "start": "react-scripts start",
  "start-api": "cd .. && python app.py",
  "dev": "concurrently \"npm run start-api\" \"npm start\""
}

이렇게 proxy 설정을 package.json에 했다면 /api 경로를 사용하지 않아도 된다!
package.json의 "proxy": "http://localhost:5000" 설정이 React 개발 서버에서 처리되지 않는 모든 요청을 자동으로 Flask 서버(localhost:5000)로 전달하기 때문

 

이제 터미널에서 아래 명령어로 프론트랑 백을 동시에 실행할 수 있다!

cd client
npm run dev