如何仅通过Flask后端服务Create-React-App构建的React应用？

我之前也遇到过一模一样的情况，直接用Flask指向create-react-app源码里的index.html肯定行不通，因为create-react-app在开发模式下的资源依赖webpack-dev-server，而生产模式需要先构建出静态文件。下面分两种场景给你解决方案：

一、生产环境：构建React应用后用Flask Serve静态资源 #

这是部署时的标准做法，步骤很简单：

• 构建React生产包
  在你的React项目根目录下运行：

  npm run build
  

  这会生成一个build文件夹，里面包含所有编译好的静态资源（优化后的HTML、CSS、JS）。

• 配置Flask指向静态资源
  修改你的Flask主文件（比如app.py），让它正确加载build里的文件：

  from flask import Flask, send_from_directory
  
  app = Flask(__name__, static_folder='../react-app/build', static_url_path='')
  
  # 处理所有路由，返回React的index.html（支持React Router的单页应用）
  @app.route('/')
  @app.route('/<path:path>')
  def serve(path=None):
      if path and path != '' and not path.startswith('static/'):
          return send_from_directory('../react-app/build', 'index.html')
      return send_from_directory('../react-app/build', path)
  
  if __name__ == '__main__':
      app.run(debug=True)
  

  注意：把../react-app/build换成你实际的React项目build文件夹路径，确保Flask能找到它。

• 运行Flask服务
  现在启动Flask，访问对应的地址（比如http://localhost:5000），React应用就能正常渲染了。

二、开发环境：Flask代理React Dev Server（支持热更新） #

如果是开发阶段，不想每次改代码都重新build，我们可以让Flask把前端请求代理到create-react-app的dev-server上：

• 安装Flask-CORS和requests（处理跨域和代理）

  pip install flask-cors requests
  

• 配置Flask代理
  修改app.py：

  from flask import Flask, request, redirect, jsonify
  from flask_cors import CORS
  import requests
  
  app = Flask(__name__)
  CORS(app)
  
  # 代理前端请求到React Dev Server（默认端口3000）
  REACT_DEV_SERVER_URL = 'http://localhost:3000'
  
  @app.route('/', defaults={'path': ''})
  @app.route('/<path:path>')
  def proxy_react(path):
      # 如果是API请求，处理后端逻辑；否则代理到React
      if path.startswith('api/'):
          # 这里写你的API路由逻辑
          return jsonify({"message": "API response"})
      else:
          # 转发请求到React Dev Server
          url = f"{REACT_DEV_SERVER_URL}/{path}"
          response = requests.get(url, headers=request.headers)
          return (response.content, response.status_code, response.headers.items())
  
  if __name__ == '__main__':
      app.run(port=5000, debug=True)
  

• 同时启动两个服务

  • 先在React项目目录下启动dev-server：npm start（默认跑在3000端口）
  • 再启动Flask服务，访问http://localhost:5000，就能看到React应用，而且修改React代码会自动热更新，API请求也能直接打到Flask上。

为什么直接链接index.js会报错？ #

你之前遇到的Uncaught...错误，大概率是因为：

• 开发模式下的index.js是webpack-dev-server动态生成的，路径指向http://localhost:3000/static/js/bundle.js，直接用Flask serve源码里的文件，浏览器找不到这个资源。
• 生产模式下如果没build，源码里的index.html引用的是开发环境的资源路径，和Flask的静态资源路径不匹配。

按照上面的方法操作，应该就能解决问题了！

内容的提问来源于stack exchange，提问作者Tagor