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

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

你好，我正在尝试在 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/