flask如何运行react

运行 Flask 与 React 的集成方法

将 Flask 作为后端 API 服务器，React 作为前端框架，可以通过以下方式实现两者的协同运行。

方法一：分离开发模式（开发阶段）

在开发阶段，Flask 和 React 可以分别运行在不同的端口上。React 通过 create-react-app 或其他工具启动开发服务器，Flask 则运行 API 服务。

1. 配置 Flask 后端

   • 创建 Flask 应用并启用 CORS（跨域资源共享），以便 React 前端可以访问 API。

   • 示例 Flask 代码：

     from flask import Flask, jsonify
     from flask_cors import CORS
     
     app = Flask(__name__)
     CORS(app)
     
     @app.route('/api/data')
     def get_data():
         return jsonify({"message": "Hello from Flask!"})
     
     if __name__ == '__main__':
         app.run(debug=True, port=5000)

2. 配置 React 前端

   • 使用 create-react-app 创建 React 项目。

     

   • 在 React 组件中调用 Flask API：

     import React, { useEffect, useState } from 'react';
     
     function App() {
       const [data, setData] = useState(null);
     
       useEffect(() => {
         fetch('http://localhost:5000/api/data')
           .then(response => response.json())
           .then(data => setData(data));
       }, []);
     
       return (
         <div>
           {data ? <p>{data.message}</p> : <p>Loading...</p>}
         </div>
       );
     }
     
     export default App;

3. 运行项目

   • 启动 Flask 后端：python app.py（假设 Flask 文件名为 app.py）。
   • 启动 React 前端：npm start（在 React 项目目录中）。

方法二：集成生产模式（部署阶段）

在生产环境中，可以将 React 构建的静态文件托管在 Flask 中，以减少跨域问题并简化部署。

1. 构建 React 项目

   

   • 在 React 项目目录中运行 npm run build，生成静态文件（位于 build 文件夹）。

2. 配置 Flask 托管静态文件

   • 修改 Flask 应用以提供 React 的静态文件：

     from flask import Flask, send_from_directory
     
     app = Flask(__name__, static_folder='../react-app/build')
     
     @app.route('/')
     def serve():
         return send_from_directory(app.static_folder, 'index.html')
     
     @app.route('/static/<path:path>')
     def serve_static(path):
         return send_from_directory(app.static_folder, path)
     
     @app.route('/api/data')
     def get_data():
         return jsonify({"message": "Hello from Flask!"})
     
     if __name__ == '__main__':
         app.run()

3. 文件结构

   • 确保 React 的 build 文件夹与 Flask 项目在同一目录层级：

     project/
     ├── flask-app/
     │   ├── app.py
     └── react-app/
         ├── build/

4. 运行 Flask

   • 启动 Flask 应用后，访问 http://localhost:5000 即可看到 React 前端与 Flask 后端集成运行。

注意事项

• 开发阶段建议使用分离模式，便于前后端独立调试。
• 生产阶段建议使用集成模式，减少跨域问题并简化部署流程。
• 确保 React 的路由（如 react-router）与 Flask 的路由兼容，避免页面刷新时出现 404 错误。