如何在Flask应用的指定URL前缀下部署React应用

刚好做过类似的配置，给你一步步讲清楚怎么实现！要让Flask和React这种嵌套路由完美配合，核心要搞定React的基础路径配置和Flask的路由转发逻辑，具体步骤如下：

因为React默认以/作为应用根路径，但我们需要它挂载在/search下，所以得先修改React的打包配置，确保所有静态资源路径都带上/search前缀：

• 如果是Create React App搭建的项目：在项目根目录的package.json里添加一行：

  "homepage": "/search"
  

• 如果是Vite搭建的项目：在vite.config.js（或.ts）里设置base属性：

  export default defineConfig({
    base: '/search/',
    // 其他配置...
  })
  

配置完成后，运行打包命令生成生产环境文件：

• Create React App：npm run build
• Vite：npm run build

打包完成后会得到一个build（Vite是dist）文件夹，里面包含React应用的所有静态资源和入口index.html。

接下来把React打包好的文件放到Flask项目里，并设置路由规则：

第一步：放置React静态文件 #

把React打包文件夹里的所有内容，复制到Flask项目的static/react_build目录下（你也可以自定义目录名，比如static/search_app，后面代码对应修改路径即可）。

第二步：编写Flask路由逻辑 #

Flask需要处理三类请求：

• 原生Flask页面（/和/about）：直接返回对应的模板
• search根路径：返回React的入口index.html
• search下的所有子路径：优先返回静态资源（比如js、css），否则返回React入口，让React的SPA路由接管

示例代码如下：

from flask import Flask, render_template, send_from_directory, send_file
import os

app = Flask(__name__)

# Flask原生页面路由
@app.route('/')
def home():
    return render_template('index.html')  # 对应templates/index.html

@app.route('/about')
def about():
    return render_template('about.html')  # 对应templates/about.html

# React应用相关配置
REACT_BUILD_DIR = os.path.join(app.static_folder, 'react_build')

# 处理/search根路径
@app.route('/search')
def react_root():
    return send_file(os.path.join(REACT_BUILD_DIR, 'index.html'))

# 处理/search下的所有子路径
@app.route('/search/<path:subpath>')
def react_subpaths(subpath):
    # 先检查是否是React的静态资源（如js、css、图片）
    static_file_path = os.path.join(REACT_BUILD_DIR, subpath)
    if os.path.exists(static_file_path) and os.path.isfile(static_file_path):
        return send_from_directory(REACT_BUILD_DIR, subpath)
    # 非静态资源请求，交给React路由处理
    return send_file(os.path.join(REACT_BUILD_DIR, 'index.html'))

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

• 静态资源匹配：必须先检查请求的子路径是否是React的静态文件，否则会导致React的js、css等资源无法加载（因为Flask会直接返回index.html）。
• 开发环境调试：如果在React开发过程中想直接对接Flask后端，可以用代理配置（比如Create React App的proxy字段），但生产环境一定要用打包后的静态文件。
• 生产环境优化：如果是部署到生产环境，建议用Nginx做反向代理，把/search路径的请求转发到Flask，同时直接托管React的静态资源，这样性能会更好。

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