在 Heroku 连接 React 前端和 Node.js 后端

Question

我已经将我的简单 React 应用程序部署到 Heroku - https://projectslist.herokuapp.com 它工作得很好，除了服务器部分根本不工作。我看过日志，它说我唯一的服务器方法 - /sendmail - 返回错误 404。我该如何解决这个问题？我想我应该在 package.json 文件中编辑一些东西，但我不确定我应该改变什么。 这是我的 github 仓库 - https://github.com/VasVV/Projects-list

Answer 1

尝试将服务器文件放在根目录文件夹中，将其他所有文件放在根目录下的客户端文件夹中：

1.) 把你的 server.js 放到根目录

2.) 将这些命令添加到您的根 package.json...

"scripts": {
    "client-install": "npm install --prefix client",
    "start": "node server.js",
    "server": "nodemon server.js",
    "client": "npm start --prefix client",
    "dev": "concurrently \"npm run server\" \"npm run client\"",
    "heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },
  "proxy": "http://localhost:4242/"

3.) 创建一个客户端文件夹并将您的 src 和 public 文件夹放入其中。

4.) 将这些命令添加到您的客户端文件夹 package.json...

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

您的根文件结构应如下所示：

Root
  client
    Public
    Src
    package.json
  server.js
  package.json

5.) 将所有与服务器相关的内容移动到根文件夹中，这样您就不必 cd 进入任何嵌套文件夹。

Answer 2

将Procfile 添加到您的根文件夹中，内容如下：

web: node server/index.js -port 8000

在您的package.json 的scripts 部分添加一个小补充，告诉Heroku 一旦它为您的项目获取了所有依赖项，它应该构建它，although that may not be necessary now。

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "heroku-postbuild": "npm run build"
},