部署Flask+React到Heroku遇问题：打开React时Flask服务器未启动

核心问题 #

部署到Heroku后，React前端仍在请求http://localhost:5000，这是因为生产环境下的API地址环境变量未被正确加载或配置错误，导致前端没有指向Heroku上的Flask服务地址。

解决方案步骤 #

1. 修正React生产环境变量配置 #

React的环境变量值不要添加引号，否则会导致变量内容包含引号，拼接后的API地址无效。修改.env.production：

REACT_APP_NAME=customer-flask-data the customers app (from .env.production)
REACT_APP_VERSION=1.0
REACT_APP_API_ENDPOINT=https://customer-flask-data-final-1e31465d9b53.herokuapp.com

2. 确保React项目以生产环境构建部署 #

• 确认package.json中的build脚本为：

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    // 其他脚本...
  }
  

• Heroku部署时会自动执行npm run build，若之前用开发模式部署过，需重新部署确保生产构建生效。

3. 直接在Heroku控制台设置环境变量（更可靠） #

避免本地.env文件的配置问题，直接在Heroku的React项目后台操作：

• 进入项目的「Settings」>「Config Vars」
• 添加键值对：REACT_APP_API_ENDPOINT=https://customer-flask-data-final-1e31465d9b53.herokuapp.com

4. 修正Flask应用的启动配置 #

Heroku使用WSGI服务器（如Gunicorn）启动Flask，不会执行if __name__=='__main__'分支，因此需要暴露WSGI入口：
修改app.py末尾：

app = Flask(__name__)
# 其他业务代码...

# 供WSGI服务器使用的入口
application = app

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

同时确保Flask项目的Procfile配置正确：

web: gunicorn app:application

5. 验证配置是否生效 #

部署完成后，打开浏览器开发者工具：

• 查看「网络」面板，确认登录请求的URL是Heroku的Flask地址，而非localhost:5000
• 可在authServices.js中临时添加日志验证：

  import http from './httpServices'
  console.log('API Endpoint:', process.env.REACT_APP_API_ENDPOINT)
  const apiEndPoint = process.env.REACT_APP_API_ENDPOINT+'/visitor_login'
  export function login(username, password){
      return http.post(apiEndPoint, {username, password})
  }
  

  部署后在浏览器控制台查看输出，确认地址正确后再删除日志。

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