Question

在检查我的React / Express应用程序在本地运行没有问题之后，我将其部署到了Heroku。但是，在部署到Heroku后，该应用程序将不再起作用。我收到404错误，但不明白为什么应用程序无法连接。

我仔细检查了代码，看是否能找到明显的错别字或类似的东西。我已经在这里搜索了所有问题，但找不到与我的问题类似的东西。

树看起来像这样：

express-backend
|__client
|   |__node_modules
|   |__src
|   |   |_App.js
|   |   |_index.js
|   |   |_{other components)
|   |__package-lock.json
|   |__package.json
|   |__README.md
|
|__node_modules
|__index.js
|__package-lock.json
|__package.json

我的express package.json文件夹中的片段：

const Joi = require('joi');
const bodyParser = require('body-parser')
const express = require('express');
const multer = require('multer');
var upload = multer();
const app = express();
const path = require('path');

const urlencodedParser = bodyParser.urlencoded({ extended: false });

app.use(express.json());
app.use(express.static(path.join(__dirname, 'client')));


const recipes = [
    {
        id: 0,
        title: 'PBJ',
        url:'https://www.hormelfoods.com/wp-content/uploads/Newsroom_20170724_SKIPPY-Peanut-Butter-and-Jelly-Sandwich.jpg',
        ingredients: [null, null],
        directions: [null, null]
    }, 
]

app.get('/api/recipes', (req, res) =>
    res.send(recipes)
);

...
//PORT
const port = process.env.PORT || 3001;
app.listen(port, () => console.log(`Listening on Port ${port}`));

应该在主页上呈现的我的客户端组件，应该可以循环浏览配方并为每个配方创建一个配方图块。

import React, {Component} from 'react';
import {Link} from 'react-router-dom';
import Tile from './tile';
import './App.css';

class RecipeBook extends Component {
    constructor() {
        super();
        this.state = {
            recipes: [],
        }
    }

    componentDidMount() {
        fetch('/api/recipes')
            .then(res => res.json())
            .then(recipes => this.setState({ recipes: recipes }))
    }

    render() {
        return(
            <div className="wrapper">
                {this.state.recipes.map((recipe) => {
                    return <Tile recipe={recipe} key={recipe.id} />
                })}

                <Link to="./form.js">
                    <button className="Recipe-Card Tiny-Card">

                        <h1>+</h1>

                        <h2 className="Recipe-Label">ADD NEW RECIPE</h2>

                    </button>
                </Link>
            </div>        
        )
    }
}



export default RecipeBook;

当我在本地打开应用程序时，它运行正常。在Heroku上打开已部署的应用程序时，出现404未找到错误。

一般标题：

Request URL: https://deployed-recipe-book.herokuapp.com/
Request Method: GET
Status Code: 404 Not Found
Remote Address: 52.21.245.216:443
Referrer Policy: no-referrer-when-downgrade

响应标题

HTTP/1.1 404 Not Found
Connection: keep-alive
Server: nginx
Date: Thu, 27 Jun 2019 00:42:01 GMT
Content-Type: text/html; charset=UTF-8
Transfer-Encoding: chunked
Vary: Accept-Encoding
Content-Encoding: gzip
Via: 1.1 vegur

错误消息显示Failed to load resource: the server responded with a status of 404 (Not Found)

Answer 1

您需要分别运行客户端和服务器，客户端文件夹根本没有运行，这就是为什么您得到404的原因。

React / Express在本地读取，但在Heroku中找不到

1 个答案: