如何使用自定义后端 api 将“create-react-app”部署到 Heroku答案

【问题标题】：How to deploy 'create-react-app' to Heroku with custom back-end api如何使用自定义后端 api 将“create-react-app”部署到 Heroku
【发布时间】：2018-02-27 08:24:24
【问题描述】：

我正在尝试将“create-react-app”项目部署到 Heroku。我使用了Heroku Create-React-App 样板文件并按照setting up a backend api 上的另一个教程连接到我的自定义server.js 文件。

当我部署到 Heroku 时，构建运行良好，但我的应用仍然无法连接到我的 server.js 文件。

我认为这是因为我的package.json 中的proxy 属性应该指向我的server.js 文件中定义的相同端口（Heroku 会自动分配，我不知道如何检查) 或者我的 server.js 文件根本没有运行。

很难找到正确解释如何使用自定义后端 (server.js) 部署“create-react-app”的任何资源。

package.json:

{
    "name": "my-app",
    "version": "0.1.0",
    "private": true,
    "proxy": "https://localhost:5000",
    "dependencies": {
      "axios": "^0.17.1",
      "body-parser": "^1.18.2",
      "md5": "^2.2.1",
      "mongodb": "^3.0.2",
      "react": "^16.2.0",
      "react-dom": "^16.2.0",
      "react-scripts": "1.1.1",
      "react-router": "^4.2.0",
      "react-router-dom": "^4.2.2"
    },
    "scripts": {
      "start": "react-scripts start",
      "start:server":"node server.js",
      "build": "react-scripts build",
      "test": "react-scripts test --env=jsdom",
      "eject": "react-scripts eject"
    }
}

在我设置端口的server.js 中输入：

const port = process.env.PORT || 5000;

【问题讨论】：

以上package.json是来自服务器端（express）还是客户端（create-react-app）？
我猜是客户端。我从来没有为前端和后端使用单独的 package.json 文件的项目工作过，我只有一个在根文件夹中。
您是否尝试从server.js 获取任何特定路径，即任何auth 或其他任何路径？如果是，您能否将route 提供给路径？
我不确定你的意思。 server.js 文件包含我的前端（反应代码）通过 AJAX (axios) 连接的所有代码，因此当您转到子路由 (www.example.com/playlist) 时，它会返回该路由的 json。这是一个非常简单的api。

标签： node.js reactjs express heroku

【解决方案1】：

通过关注来自 fullstackreact.com 的 this tutorial 并研究随附的 repo，我能够将我的应用程序部署到 Heroku。

基本上，我需要捆绑我的客户端代码，然后确保我的 server.js 文件将该捆绑包作为静态文件提供服务。我敢肯定还有其他方法可以解决这个问题，比如为 webpack-dev-server 和后端 api (server.js) 运行并发脚本，但这对我来说很有效，而且不会让人头疼。

【讨论】：