Heroku部署Node.js+React+MySQL纪念站点：首页跳转API页面求助

我正在为家人部署一个纪念站点，时间非常紧迫。已经在Heroku完成部署，但打开站点时会跳转到API首页，而不是正常的前端首页。已经解决了多个错误，但现在卡住了，求帮助。

相关信息 #

仓库地址 #

https://github.com/EsotericZ/benMemorial

client > package.json #

{
  "name": "p",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:3001",
  "dependencies": {
    "@fortawesome/fontawesome-free": "^6.4.0",
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^1.4.0",
    "date-fns": "^2.30.0",
    "mdb-react-ui-kit": "^6.1.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.11.2",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },
  "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"
    ]
  },
  "devDependencies": {
    "sass": "^1.62.1"
  }
}

client > .env.development #

HOST=rocky-fortress-51491.herokuapp.com

server > package.json #

{
  "name": "benmemorialserver",
  "version": "1.0.0",
  "description": "Backend Memorial Page for Benjamin Sanders",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon server.js",
    "start": "nodemon server.js",
    "seed": "node seeds/index.js"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/EsotericZ/benMemorial.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/EsotericZ/benMemorial/issues"
  },
  "homepage": "https://github.com/EsotericZ/benMemorial#readme",
  "dependencies": {
    "axios": "^1.4.0",
    "cors": "^2.8.5",
    "dotenv": "^16.1.1",
    "express": "^4.18.2",
    "mssql": "^9.1.1",
    "mysql2": "^3.3.3",
    "sequelize": "^6.31.1"
  }
}

server > server.js #

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const app = express();

const sequelize = require('./config');
const PORT = process.env.PORT || 3001;

let routes = require('./routes/api/routes');

app.use(
  cors({
    origin: true,
    methods: ['GET', 'POST', 'PUT', 'DELETE'],
    credentials: true,
  })
);

app.use(
  bodyParser.json({
    verify: (req, res, buf, encoding) => {
      try {
        JSON.parse(buf);
      } catch (e) {
        res.status(404).send({
          status: 'error',
          description: 'Invalid JSON',
        });
        throw Error('Invalid JSON');
      }
    },
  })
);

app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.static("public"));

app.use("/", routes);
// app.listen(PORT);

sequelize.sync({ force: false }).then(() => {
  app.listen(PORT, () => console.log(`Server listening on port: ${PORT}`));
});

根目录 > package.json #

{
  "name": "benmemorial",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "cd client && npm run build",
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "concurrently \"cd server && npm run dev\" \"cd client && npm start\"",
    "start": "concurrently \"cd server && npm run dev\" \"cd client && npm start\"",
    "develop": "concurrently \"cd server && npm run dev\" \"cd client && npm start\"",
    "install": "cd server && npm i && cd ../client && npm i",
    "seed": "node server/seeds/index.js",
    "predeploy": "cd client && npm run build",
    "deploy": "cd client && gh-pages -d build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "concurrently": "^8.1.0",
    "nodemon": "^2.0.22"
  },
  "devDependencies": {
    "gh-pages": "^5.0.0"
  }
}

站点问题截图 #

内容的提问来源于stack exchange，提问作者Zanatos