如何将含独立api目录的Flask+React项目部署到Heroku

方案1：前后端单独部署（适配你已完成后端部署的现状） #

• 打包前端静态资源
  在项目根目录执行npm run build，命令执行完成后所有可部署的静态资源会自动生成到build文件夹内。
• 新增前端静态服务配置
  在前端项目根目录（和src、package.json同级）新建static.json文件，内容如下：

{
"root": "build/",
"routes": {
"/**": "index.html"
},
"proxies": {
"/api/": {
"origin": "替换为你已部署的Flask API的Heroku访问域名"
}
}
}
该配置会将静态资源根目录指向build文件夹，解决前端单页应用路由刷新404问题，同时将所有/api开头的请求自动转发到已部署的后端服务，规避跨域问题。

• 部署前端到Heroku
  在前端项目根目录依次执行以下命令：
  heroku create 自定义你的前端应用名
heroku buildpacks:set heroku/static
git add .
git commit -m "feat: 部署前端静态资源"
git push heroku main
  执行完成后直接访问前端应用的Heroku域名即可正常使用。

方案2：前后端合并部署到同一个Heroku实例 #

如果想要仅维护一个Heroku应用，可以调整配置让Flask托管前端静态资源，步骤如下：

• 修改Flask服务配置
  在api目录下的Flask启动文件（通常为app.py/wsgi.py）中修改静态资源路径配置：

import os
from flask import Flask, send_from_directory

# 指定静态资源路径为上层目录的build文件夹
app = Flask(__name__, static_folder='../build', static_url_path='/')

# 前端路由匹配，所有非API请求返回前端入口文件
@app.route('/')
def index():
    return send_from_directory(app.static_folder, 'index.html')

# 原有API接口保持不变，建议统一加/api前缀
@app.route('/api/health')
def health_check():
    return {'status': 'ok'}

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

• 新增Heroku部署所需配置文件
  在整个项目的根目录（和api、src、build同级）新建以下文件：

1. requirements.txt：写入Flask项目的所有依赖包及版本
2. Procfile：内容为web: gunicorn --pythonpath api app:app，其中--pythonpath api指定Python代码存放在api目录，app:app需对应你Flask启动文件的文件名和实例名，可根据实际情况修改
3. 调整原有package.json的scripts配置，新增postinstall钩子："postinstall": "npm run build"，让Heroku部署时自动执行前端打包命令

• 推送项目部署
  将整个项目（包含api、src、package.json、新增的配置文件）作为git仓库，直接推送到Heroku即可完成部署，应用会自动匹配请求：API请求走后端逻辑，其他请求返回前端静态资源。

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