Реакция / экспресс-чтение локально, но не может быть найдено в Heroku

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 Not Found.

Общие заголовки:

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.