node.js - 如何使用自定义后端 api 将 'create-react-app' 部署到 Heroku

Question

我正在尝试将“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;

Answer 1

我能够按照 this tutorial 将我的应用程序部署到 Heroku来自 fullstackreact.com 并研究随附的存储库。

基本上，我需要捆绑我的客户端代码，然后确保我的 server.js 文件将该 bundle 作为静态文件提供服务。我确信还有其他方法可以解决这个问题，例如为 webpack-dev-server 和后端 api (server.js) 运行并发脚本，但这对我来说没有太多麻烦。