python - 在两个独立的 Heroku 应用程序上将 API 请求从 React 前端代理到 Flask 后端

Question

我正在开发一个带有 create-react-app 前端和带有 Flask-RESTful 的 Flask API 后端的 Web 应用程序。我在本地构建了该应用程序，它可以在我的计算机上运行，​​但现在我尝试将其部署到 Heroku 失败。

我将 Flask 后端和 React 前端部署为两个不同的 Heroku dyno，因此每个都有自己的 URL。当我转到前端的 URL 时，它似乎工作正常，并且后端 URL 似乎也工作。但是，该应用程序依赖于对后端的 API 调用，因此我无法成功向后端发送请求。

当我在本地工作时，我会使用 gunicorn --bind 0.0.0.0:8000 app:app 运行 Flask 后端。和前端 npm start命令。只要我输入 "proxy": "https://localhost:8000"，该应用程序就可以很好地处理我的 Axios 函数调用中的相对调用。在我的package.json文件在我的前端应用程序中。一般来说，我遵循了这个教程:https://www.fullstackreact.com/articles/using-create-react-app-with-a-server/ 。

我想我可以简单地编辑 proxy package.json 中的字段文件指向我的后端 Heroku 应用程序的 URL，然后我就不必更改任何其他内容。但是，当我使用它进行部署时，我发现对我的端点的请求是向 https://my-frontend-app.herokuapp.com/<endpoint> 发出的。而不是https://my-backend-app.herokuapp.com/<endpoint> 。

这是我的 package.json:

{
  "name": "heroku-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "axios": "^0.18.0",
    "bootstrap": "^4.1.2",
    "plotly.js": "^1.39.2",
    "react": "^16.4.1",
    "react-dom": "^16.4.1",
    "react-plotly.js": "^2.2.0",
    "react-scripts": "1.1.4",
    "reactstrap": "^6.3.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "https://star-employees-api.herokuapp.com"
}

我的请求如下所示:

axios.get('/analyze', data)
.then((response) => {
    // Handle request response here
};

谁能告诉我我在这里做错了什么？这是我第一次部署这样的应用程序并使用 Heroku，所以我不确定我是否偏离了基地。如果有更好的方法来部署此类应用程序，也请告诉我。如果有帮助的话，我可以提供任何其他代码片段或文件结构，只是不确定此时什么会有帮助。提前致谢。

Answer 1

我设法弄清楚了。正如 Tholle 提到的，package.json 文件中的代理字段仅适用于开发服务器。如果您将 create-react-app 与 Heroku 和 buildpack 一起使用，还有一些其他步骤。部署时需要按照说明here并在最顶层目录中添加一个 static.json 文件。