Question

今天，我学会了在Heroku中部署我的React App。我的应用程序基本上是一个单页应用程序，它具有一些组件和一个反馈表单，我可以将访问者的反馈发送到数据库。为此，我创建了一个REST api发送反馈。 Rest API是使用Express路由器和mongodb创建的，用于数据库。

现在我已经通过github在heroku上部署了我的应用程序。一切似乎都正常，但是当我发送一些反馈时，它不起作用，因为我认为server.js无法启动服务器，因为package.json无法找到server.js来启动服务器。我想将前端和后端都部署在同一服务器上。有可能吗？如何？请帮帮我。

我试图在我的package.json中包含“ node server.js”，以使其正常运行，但没有成功。我也在考虑为后端连接创建一个单独的应用程序。

这是我的应用程序的文件夹结构：

这是我的package.json：

{
 "name": "cocina_sitio",
 "version": "1.0.0",
 "description": "",
 "private": true,
 "main": "index.js",
 "scripts": {
   "start": "react-scripts start",
   "build": "react-scripts build",
   "test": "react-scripts test",
   "eject": "react-scripts eject"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
   "body-parser": "^1.19.0",
   "bootstrap": "^4.3.1",
   "express": "^4.17.0",
   "google-maps-react": "^2.0.2",
   "jquery": "^3.4.1",
   "mongoose": "^5.5.10",
   "morgan": "^1.9.1",
   "popper.js": "^1.14.7",
   "react": "^16.8.4",
   "react-bootstrap": "^1.0.0-beta.5",
   "react-dom": "^16.8.4",
   "react-router": "^5.0.0",
   "react-router-dom": "^5.0.0",
   "react-scripts": "^2.1.8",
   "reactstrap": "^7.1.0"
 },
 "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
 ],
  "devDependencies": {}
}

和server.js：

const http = require('http');
const app = require('./backend_connectivity/app.js');
const port = process.env.PORT || 4000;
const server = http.createServer(app);
server.listen(port);

和feedback.js：

import React, {Component} from 'react';
import {
    Jumbotron,
    Button,
    Container,
    Form,
    Row,
    Col
} from 'react-bootstrap';

import './style/style-parallex.css';

class Feedback extends Component {
    constructor(props) {
        super(props);
        this.state= {
            user: {
                Name: '',
                Email: '',
                Message: ''
            },
            submitted: false
        }
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

handleChange(event) {
    const {name, value} = event.target;
    const {user} = this.state;
    this.setState({
        user: {
            ...user,
            [name]:value
        }
    })
}

handleSubmit(event) {
    event.preventDefault();
    this.setState({submitted: true});
    const {user} = this.state;
    const URL = "http://localhost:4000/signup";   // ----> this is in case of locally. Dontknow if this should change in case of Heroku
    const data = JSON.stringify({
        name: user.Name,
        email: user.Email,
        message: user.Message
    });
    const otherParam= {
        mode: 'cors',
        headers: {
            'Accept': 'application/json, text/plain, */*',
            "Content-Type": "application/json"
        },
        body: data,
        method: 'POST'
    }
    fetch(URL, otherParam)
        .then(data => data.json())
        .then(data => console.log(data))
        .catch(err => console.log(err));
}

    render() {
        const {user,submitted} = this.state;
        return(
            <React.Fragment>

                <Jumbotron fluid style={{height: 500, background: '#38507d45'}} id="feedbackform">
                    <Container style={{display: 'flex', justifyContent: 'center', alignItems: 'center'}}>                    
                        <h1 style={{color: 'white', textDecorationColor: 'white'}}>feedback are always welcome</h1>
                    </Container>
                    <Container>
                        <Form onSubmit={this.handleSubmit}>
                            <Row>
                                <Col>
                                    <Form.Group controlId="Name" className={(submitted && !user.name ? 'has-error' : '')}>
                                        <Form.Label>Name</Form.Label>
                                        <Form.Control type="text" name="Name" id="Name" placeholder="Your Name" onChange={this.handleChange}/>
                                    </Form.Group>
                                </Col>
                                <Col>
                                    <Form.Group controlId="Email" className={(submitted && !user.email ? 'has-error' : '')}>
                                        <Form.Label>Email address</Form.Label>
                                        <Form.Control type="email" placeholder="Your email" name="Email" id="Email" onChange={this.handleChange}/>
                                        <Form.Text className="text-muted">
                                            We'll never share your email with anyone else.
                                        </Form.Text>
                                    </Form.Group> 
                                </Col>
                            </Row>
                            <Form.Group controlId="ControlTextarea" className={(submitted && !user.message ? 'has-error' : '')}>
                                <Form.Label>Message</Form.Label>
                                <Form.Control as="textarea" rows="5" placeholder="Your Message" name="Message" id="Message" onChange={this.handleChange}/>
                            </Form.Group>
                            <Button variant="primary" type="submit" style={{float: 'right'}}>
                                Submit
                            </Button>
                        </Form>
                    </Container>
                </Jumbotron>
            </React.Fragment>
        );
    }
}

export default Feedback;

在Heroku中的单个应用程序中同时部署前端和后端的问题

0 个答案: