为什么不能在Heroku上使用JSON-Server和Express.js部署React应用程序？

Question

我正在尝试在Heroku上部署我的应用程序 - 使用json -server和express.js，而不是查看前端接收空白页，并使用{}接收空白页。我有关于express.js的基本知识，因此很高兴从您那里获得任何帮助。

以下是代码的链接和部分：package.json，server.js

链接到我的回购

这是一个项目结构：

客户端的软件包JSON：

{
  "name": "react-sign-in-up",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@emotion/react": "^11.9.3",
    "@emotion/styled": "^11.9.3",
    "@hookform/resolvers": "^2.9.1",
    "@material-ui/core": "^4.12.4",
    "@material-ui/lab": "^4.0.0-alpha.61",
    "@mui/icons-material": "^5.8.4",
    "@mui/material": "^5.8.4",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.3.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "concurrently": "^7.2.2",
    "http-proxy-middleware": "^2.0.6",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-hook-form": "^7.32.1",
    "react-scripts": "5.0.1",
    "react-toastify": "^9.0.4",
    "uuid": "^8.3.2",
    "web-vitals": "^2.1.4",
    "yup": "^0.32.11"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

服务器端的软件包JSON ：

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "engines": {
    "node": "16.5.0",
    "npm": "7.19.1"
  },
  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "cd client && npm install && npm run build"
  },
  "author": "Szymon Rojek",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.20.0",
    "cors": "^2.8.5",
    "express": "^4.18.1",
    "http-proxy-middleware": "^2.0.6",
    "json-server": "^0.17.0",
    "nodemon": "^2.0.16",
    "path": "^0.12.7"
  }
}

最后，server.js-我将json-server与express.js集成：

const express = require("express");
const jsonServer = require("json-server");
const cors = require("cors");

const app = express();
const router = jsonServer.router(path.join(__dirname, "./db.json"));

app.use(cors());

app.use("/", router);

if (process.env.NODE_ENV === "production") {
  app.use(express.static(path.join(__dirname, "./client/build")));

  app.get("*", (req, res) => {
    res.sendFile(path.join(__dirname, "./client/build/index.html"));
  });
}

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

app.listen(PORT, () => {
  console.log(`Server is running on ${PORT}`);
});

一开始我只有一个没有Express.js的JSON服务器，这很好。我可以看到页面，带有端点“/用户”的假API。

谢谢您的时间，很多问候。