使用 MongoDB Atlas 在 Heroku 上部署 MERN 应用程序的问题

Question

我是一名前端开发人员，正在尝试进入全栈。 我制作了一个简单的应用程序来了解 MERN 堆栈的工作原理。 我用这个（ https://github.com/mars/heroku-cra-node ）作为构建它的基础。 该应用程序在 localhost 中运行良好，但是当我将其部署到 Heroku 时，出现无法获取/错误。

服务器/数据库/猫鼬.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
    }
});

服务器/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);
});

服务器/模型/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"
  },

反应-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;

反应包.json

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

这是文件的设置方式

我使用 mongodb atlas 和 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”但未定义为“/”的请求。