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

Question

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

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;

反应package.json

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

This is how the files are setup

我使用 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

但是当我加载页面时出现“Cannot GET /”错误

错误：无法加载资源：服务器响应状态为 404（未找到）

Loading heroku app home page

当我运行它在我的机器上时，这就是应用程序的外观。 Localhost home page

我不确定我错过了什么。如何成功将其部署到 heroku 而不会出现 404 错误？

Answer 1

Cannot GET /

显示您的应用中未定义对相对 url“/”的 GET 请求。如我所见，您有一个定义为“/getUser”但没有定义为“/”的请求。

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

Problem with deploying a MERN app on Heroku with MongoDB Atlas

node.js

reactjs

mongodb

heroku

mongodb-atlas