当我们将Flask作为后端API服务器，并希望它也能直接服务React前端应用时，一个常见的做法是将Flask的static_folder指向React项目构建后的build目录，例如：
app = Flask(__name__, static_url_path='', static_folder='frontend/build')
这种设置在生产环境中非常有效，Flask可以高效地服务所有前端静态资源。然而，在开发过程中，这带来了巨大的不便：每当前端代码（如React组件、样式或逻辑）发生修改时，开发者都必须手动运行npm run build命令来重新编译前端代码，然后刷新浏览器才能看到变更。这个过程不仅耗时，而且严重影响了开发效率和体验，尤其是在需要频繁迭代和调试前端界面时。
为了解决上述痛点，现代全栈开发推崇一种“分离式”策略：
这种策略兼顾了开发效率和生产部署的便捷性。
在开发模式下，我们需要确保React和Flask能够独立运行并相互通信。
启动React开发服务器： 进入React项目根目录（例如frontend/），运行以下命令启动React开发服务器：
cd frontend npm start # 或 yarn start
这通常会在http://localhost:3000（默认端口）启动React应用，并支持热重载。
配置API请求代理： 由于React应用运行在http://localhost:3000，而Flask API可能运行在http://localhost:5000（默认端口），直接从前端向后端发送请求会导致跨域问题。为了避免这个问题，我们可以在React项目的package.json文件中配置一个代理。
在frontend/package.json中，添加"proxy"字段，指向你的Flask后端地址：
// frontend/package.json
{
"name": "frontend",
"version": "0.1.0",
"private": true,
"dependencies": {
// ... 其他依赖
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"proxy": "http://localhost:5000" // 将API请求代理到Flask后端
}配置"proxy"后，当你在React代码中发起fetch('/api/data')这样的请求时，React开发服务器会自动将这个请求转发到http://localhost:5000/api/data，从而避免了跨域问题。
在开发模式下，Flask作为纯API服务运行，不需要服务前端静态文件。但为了允许React开发服务器（通常在不同端口）访问API，我们需要处理CORS（跨域资源共享）问题。
安装Flask-CORS：
pip install Flask-CORS
配置Flask应用：
# app.py (开发模式配置示例)
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 API!", "status": "development"})
if __name__ == '__main__':
app.run(debug=True, port=5000)在开发模式下，Flask的static_folder可以不设置或指向一个不包含前端文件的目录，因为它不负责服务React前端。CORS(app)允许来自React开发服务器的请求。
在生产模式下，React应用会被构建成高度优化的静态文件，然后由Flask统一提供服务。
在部署到生产环境之前，需要构建React应用：
cd frontend npm run build # 或 yarn build
这个命令会在frontend/build目录下生成所有用于生产环境的静态文件（HTML, CSS, JS等）。
在生产模式下，Flask需要将static_folder指向React构建后的build目录，并配置好路由以服务index.html。
# app.py (生产模式配置示例)
from flask import Flask, jsonify, send_from_directory
import os
# 获取当前脚本所在目录的绝对路径
basedir = os.path.abspath(os.path.dirname(__file__))
# React构建后的静态文件路径
frontend_build_path = os.path.join(basedir, 'frontend', 'build')
app = Flask(__name__,
static_url_path='', # 静态文件URL前缀，设为空表示直接从根路径提供
static_folder=frontend_build_path) # 指向React构建目录
# API路由
@app.route('/api/data')
def get_data_prod():
return jsonify({"message": "Hello from Flask API!", "status": "production"})
# 捕获所有未被API路由处理的请求，并指向React的index.html
# 这是单页应用（SPA）部署的关键
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve(path):
if path != "" and os.path.exists(os.path.join(app.static_folder, path)):
return send_from_directory(app.static_folder, path)
else:
return send_from_directory(app.static_folder, 'index.html')
if __name__ == '__main__':
# 在生产环境中通常不使用debug=True
app.run(debug=False, port=5000)这段代码中：
为了方便，我们可以在同一个app.py文件中根据环境变量来动态切换开发和生产模式的配置。
import os
from flask import Flask, jsonify, send_from_directory
from flask_cors import CORS
# 获取当前脚本所在目录的绝对路径
basedir = os.path.abspath(os.path.dirname(__file__))
# 判断是否为开发模式
# 推荐使用环境变量 FLASK_ENV 来控制
# 在开发时，可以设置 FLASK_ENV=development
# 在生产时，可以设置 FLASK_ENV=production
is_development = os.environ.get('FLASK_ENV') == 'development'
if is_development:
# 开发模式下，Flask只作为API服务
# React前端由其自己的开发服务器提供
app = Flask(__name__)
CORS(app) # 允许跨域请求，方便React开发服务器访问
print("Flask运行在开发模式：仅提供API服务，前端由React开发服务器提供。")
else:
# 生产模式下，Flask服务React构建后的静态文件
frontend_build_path = os.path.join(basedir, 'frontend', 'build')
app = Flask(__name__,
static_url_path='',
static_folder=frontend_build_path)
print(f"Flask运行在生产模式：服务前端静态文件于 {frontend_build_path}。")
# 示例API路由
@app.route('/api/data')
def get_data():
mode = "development" if is_development else "production"
return jsonify({"message": f"Hello from Flask API! (Mode: {mode})"})
# 生产模式下服务前端静态文件和单页应用路由
if not is_development:
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def serve(path):
# 尝试服务静态文件
if path != "" and os.path.exists(os.path.join(app.static_folder, path)):
return send_from_directory(app.static_folder, path)
else:
# 对于所有其他路径，返回index.html，让React Router处理前端路由
return send_from_directory(app.static_folder, 'index.html')
if __name__ == '__main__':
# 根据模式设置debug状态
app.run(debug=is_development, port=5000)
如何运行：
开发模式：
export FLASK_ENV=development # macOS/Linux # 或者 set FLASK_ENV=development (Windows CMD) # 或者 $env:FLASK_ENV="development" (Windows PowerShell) python app.py
cd frontend npm start
现在，你可以访问http://localhost:3000进行前端开发，所有API请求都会被代理到http://localhost:5000。
生产模式：
cd frontend npm run build
python app.py
现在，你可以直接访问http://localhost:5000，Flask将同时提供前端静态文件和后端API。
通过在开发和生产环境采用不同的策略，我们成功地解决了Flask与React集成开发中频繁npm run build的痛点。开发时，React的热重载能力极大地提升了前端开发效率；生产时，Flask统一服务前后端资源，简化了部署。这种前后端分离的开发模式是现代Web应用开发的标准实践，它不仅提高了开发效率，也为项目的可维护性和扩展性奠定了良好基础。
以上就是优化Flask与React开发流程：实现高效前后端分离调试的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
967
收藏
