使用MongoDB Atlas在Heroku上部署MERN应用程序时出现问题

Question

我是一名前端开发人员，正在努力进入全栈。我制作了一个简单的应用程序来了解MERN堆栈的工作原理。我用过这个(https://github.com/mars/heroku-cra-node)作为构建它的基础。该应用程序在localhost中运行良好，但当我将其部署到Heroku时，我会收到一个Cannot get/错误。

server/db/mongoose.js

const mongoose = require('mongoose')
mongoose.connect(process.env.MONGODB_URL, {
useNewUrlParser: true,
useCreateIndex: true
})
const User = mongoose.model('user', {
username: {
type: String,
required: true,
trim: true
},
password: {
type: String,
required: true,
trim: true
}
});

server/index.js

const express = require('express');
require('./db/mongoose');
const User = require('./model/user');

const app = express();
const port = process.env.PORT;
app.use(express.json());
app.get('/getUser', async (req, res) => {
User.find({}).then((users) => {
res.send(users);
}).catch((e) => {
console.log('error: ' + e);
})
});
app.listen(port, () => {
console.log('server is up on port ' + port);
});

server/model/user.js

const mongoose = require('mongoose');
const User = mongoose.model('User', {
username: {
type: String,
required: true,
trim: true
},
password: {
type: String,
required: true,
trim: true
}
});
module.exports = User;

服务器的package.json

"scripts": {
"start": "node server",
"dev": "env-cmd -f ./config/dev.env nodemon server/index.js",
"build": "cd react-ui/ && npm install && npm run build"
},

react ui/Home.js

import React, { Component } from "react";
class Home extends Component {
constructor() {
super();
this.state = {
dataFromJson: {},
};
}
componentDidMount() {
fetch('/getUser')
.then(response => response.json())
.then((responseJson)=> {
this.setState({
dataFromJson: responseJson[0],
});
})
.catch(error=>console.log(error));
}
render() {
return (
<div className="container">
Data from mongodb
<p>name: {this.state.dataFromJson.username}</p>
<p>pwd: {this.state.dataFromJson.password}</p>
</div>
);
}
}
export default Home;

react package.json

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

这就是文件设置的方式

我使用mongodb图集和heroku配置来设置mongodb_URI。heroku构建成功，没有任何错误。

remote:        found 0 vulnerabilities
remote:        
remote:        
remote: -----> Build succeeded!
remote: -----> Discovering process types
remote:        Procfile declares types     -> (none)
remote:        Default types for buildpack -> web
remote: 
remote: -----> Compressing...
remote:        Done: 54.6M
remote: -----> Launching...
remote:        Released v4
remote:        https://mernsample1.herokuapp.com/ deployed to Heroku
remote: 
remote: Verifying deploy... done.
To https://git.heroku.com/mernsample1.git
* [new branch]      main -> main

但是当我加载页面时出现"无法获取/"错误

错误：加载资源失败：服务器响应状态为404(未找到(

正在加载heroku应用程序主页

当我在我的机器上运行它时，这就是应用程序的外观。本地主机主页

我不确定我错过了什么。如何在不出现404错误的情况下成功地将其部署到heroku？

Answer 1

Cannot GET /

显示您的应用程序中未定义对相对url"/"的GET请求。正如我所看到的，您有一个定义为"/getUser"的请求，但没有定义为"/"。