尝试将 MERN 堆栈部署到 Heroku 时，前端工作正常，但无法登录我的应用程序

Question

你好，我正在尝试在 heroku 上部署我的应用程序，但到目前为止，当它被部署时，后端没有启动，它告诉我 xhr.js:177 GET http://localhost:5000/users/700988758 net： :ERR_CONNECTION_REFUSED 我尝试了很多东西，但到目前为止我一无所获 https://github.com/esmailessameldin/newproject 这是我的 github 任何帮助将不胜感激

这是我的 app.js

const express = require('express');
const cors = require('cors');
const mongoose = require('mongoose');
require('dotenv').config();
const app = express();
app.get('/', (req, res) => { res.send('Hello from Express!')})
const port = process.env.PORT || 5000
console.log(port)
app.use( (req, response, next)=> {
  response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET,HEAD,OPTIONS,POST,PUT");
response.setHeader("Access-Control-Allow-Headers", "Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers");

  next();
});

app.use(cors())
app.use(express.json());

const uri = process.env.ATLAS_URI;
console.log(uri)
mongoose.connect(  uri, { useNewUrlParser: true, useCreateIndex: true, useUnifiedTopology: true }
);
const connection = mongoose.connection;
connection.once('open', () => {
  console.log("MongoDB database connection established successfully"+" "+connection.toString());
})

const classesRouter = require('./routes/classes');
const usersRouter = require('./routes/users');
const facultyRouter = require('./routes/faculty');
const sectionsRouter = require('./routes/section');
const adminRouter = require('./routes/admins');

app.use('/classes', classesRouter);
app.use('/users', usersRouter);
app.use('/faculty', facultyRouter);
app.use('/section', sectionsRouter);
app.use('/admins', adminRouter);

app.listen(port, () => {
    console.log('Server is running on port: ${port}');
});

module.exports = app;

这是我的路由器

import React from 'react';
import {BrowserRouter as Router , Route} from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";
import login from  "./components/homepage.component";
import Navbar from "./components/navbar.component"
import classes from "./components/classes.component"
import studentscreen from "./components/student.component"
import majors from "./components/majors.component"
import sections from "./components/sections.components"
import passerror from "./components/passerror.component"
import calendar from "./components/calendar.component"
import faculty from "./components/faculty.component"
import facultyhome from "./components/facultyhome.component"
import spring from "./components/spring.component"
import audit from "./components/audit.component"
import masterspring from "./components/masterspring.component"
import masterfall from "./components/masterfall.component"
import register from "./components/register.component"
import mark from "./components/add.component"
import fall from "./components/fall.component"
import transcript from "./components/transcript.component"
function App() {
  
  return (
    <Router>
          <Navbar />
          <br/>
    <div className="Pineapple">
    <Route path="/" exact component={login} />
    <Route path="/student/:id" exact component={studentscreen} />
    <Route path="/classes/:id" exact component={classes} />
    <Route path="/majors/:name" exact component={majors} />
    <Route path="/sections/:name" exact component={sections} />
    <Route path="/passerror" exact component={passerror} />
    <Route path="/calendar/:id" exact component={calendar} />
    <Route path="/spring" exact component={spring} />
    <Route path="/audit/:major" exact component={audit} />
    <Route path="/adddrop/:id" exact component={mark}/>
    <Route path="/masterfall" exact component={masterfall} />
    <Route path="/masterspring" exact component={masterspring} />
    <Route path="/register" exact component={register} />
    <Route path="/faculty" exact component={faculty}/>
    <Route path="/facultyhome/:id" exact component={facultyhome}/>
    <Route path="/fall" exact component={fall}/>
    <Route path="/transcript/:id" exact component={transcript}/>
    </div>
    </Router>

  );
}

export default App;

这是我的 package.json

{
  "name": "system-design",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@devexpress/dx-react-core": "^2.7.5",
    "@devexpress/dx-react-scheduler": "^2.7.5",
    "@devexpress/dx-react-scheduler-material-ui": "^2.7.5",
    "@material-ui/core": "^4.11.3",
    "@popperjs/core": "^2.7.0",
    "@syncfusion/ej2-react-schedule": "^18.4.46",
    "@testing-library/jest-dom": "^5.11.9",
    "@testing-library/react": "^11.2.5",
    "@testing-library/user-event": "^12.6.3",
    "@types/react-router-dom": "^5.1.7",
    "axios": "^0.21.1",
    "bootstrap": "^4.6.0",
    "dotenv": "^8.2.0",
    "node-schedule": "^2.0.0",
    "react": "^17.0.1",
    "react-big-calendar": "^0.33.0",
    "react-bootstrap": "^1.5.0",
    "react-dom": "^17.0.1",
    "react-native-timetable": "^1.0.4",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.3",
    "semantic-ui-css": "^2.4.1",
    "semantic-ui-react": "^2.0.3",
    "web-vitals": "^1.1.0"
  },
  "scripts": {
    "import": "mongo-import",
    "server": "nodemon server.js",
    "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"
    ]
  }

}

这里是已部署网站的链接 https://alpha-uni.herokuapp.com/