reactjs - Deployment problems with React-Express App

Question

I'm trying to deploy a MERN app (built with create react app) to Heroku, but whenever I try to access the URL, it returns with a 404 error.

During development I structured my project so that it runs on two different servers: client side on local host:3000, which proxies requests to express (at localhost:5000).

I've run npm run build, set up static middleware, and tried to configure my api calls/routes correctly, but it still isn't working. Any suggestions as to why, and how I can fix it? Details as follows:

Project Structure

+client
   |
   +-build
      +-static
        +-css
        +-js
        +-media
   +-node_modules
   +-public
   +-src
     |
     +-components
        +-App.js
        +-index.js
//server
+-models
+-node-modules
+-package-lock.json
+-package.json
+-server.js

Proxy (in package.json):
"proxy": "http://localhost:5000"

Server config:

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


//Middleware
if (process.env.NODE_ENV === 'production') {
    app.use(express.static(path.join(__dirname, '../client/build')));
}
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(express.urlencoded())
app.use(cors())

Here's how I;ve structured my APIs. Note: I've removed the 'localhost:5000' from the URL of my axios requests:

API call from React component:

    useEffect(() => {
    axios.get('/api/all-reviews')
    .then(review => {
        setReviews(review.data)
    })
    .catch(err => {
        console.log(err)
    })
},[])

Corresponding express route

app.get('/api/all-reviews', (req,res) => {
    Review.find()
    .then((result) => {
        res.send(result)
    })
    .catch(err => {
        console.log(err)
    })
})

Answer 1

等待大神解答