求助：Vercel部署Flask后端+React前端的教程/示例仓库

核心配置方案 #

Vercel支持同时部署前端静态资源和后端Serverless函数，针对React+Flask的组合，关键配置如下：

1. Vercel配置文件（vercel.json） #

放在项目根目录，用来指定静态资源目录和后端函数路由规则：

{
  "buildCommand": "cd client && npm install && npm run build",
  "outputDirectory": "client/build",
  "functions": {
    "api/**/*.py": {
      "runtime": "@vercel/python@3.10"
    }
  },
  "routes": [
    { "src": "/api/(.*)", "dest": "/api/index.py" },
    { "src": "/(.*)", "dest": "/client/build/$1" }
  ]
}

• buildCommand：进入React前端目录（假设为client），安装依赖并构建静态文件
• outputDirectory：指定Vercel要部署的静态资源目录
• functions：指定后端Flask代码以Serverless函数运行，使用Python 3.10 runtime
• routes：将/api开头的请求转发到Flask入口，其余请求指向React静态页面

2. Flask后端入口（api/index.py） #

后端代码需放在api目录下，入口文件命名为index.py，适配Vercel的Serverless规范：

from flask import Flask, jsonify
import os

app = Flask(__name__)

@app.route('/api/hello')
def hello():
    return jsonify({"message": "Hello from Flask!"})

# Vercel要求的WSGI入口
app = app.wsgi_app

同时在项目根目录创建requirements.txt，列出Flask依赖：

Flask==2.3.3

示例项目结构 #

标准层级如下：

• 项目根目录
  • api/
    • index.py
  • client/
    • React项目文件（src/、public/、package.json等）
  • vercel.json
  • requirements.txt

部署步骤要点 #

1. 本地验证：先分别运行React前端（cd client && npm start）和Flask后端（cd api && flask run），确保接口与页面交互正常
2. 代码上传：将整个项目推送到GitHub仓库
3. Vercel部署：
   • 登录Vercel，导入GitHub仓库
   • Vercel会自动读取vercel.json中的配置，无需额外设置构建命令
   • 若有环境变量，在Vercel项目的Settings > Environment Variables中添加
4. 功能测试：部署完成后，访问域名验证前端页面和后端接口是否正常工作

拆分部署思路 #

如果React和Flask是独立仓库，可分开部署：

• React前端直接导入Vercel（Vercel对React有原生支持）
• Flask后端部署为Vercel Serverless函数，在React中配置API_BASE_URL指向后端域名

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