Node（Express）/ React應用僅在本地工作

Question

發行大綱

我有一個簡單的Node / React應用程序，使用heroku local可以正常運行。

Node后端有一個/api/users端點，該端點返回一些硬編碼的JSON。

在heroku local ，訪問localhost:5000/users將按預期工作，並根據Users.js React組件顯示硬編碼用戶。

但是，當推送到Heroku時，僅/根頁面有效。 轉到/users顯示Not Found ，轉到/api/users將返回JSON。

我不確定為什么它可以在本地而不是在Heroku上運行，因此不勝感激。

碼

快速路線：

var express = require('express');
var router = express.Router();
var path = require('path');

router.get('/api/users', function(req, res, next) {

  res.json([{id: 1, name: 'Colin'}, {id: 2, name: 'Spodie'}])
});

module.exports = router;

Express app.js文件：

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var cors = require('cors');

var config = require('./config/dev')
var index = require('./routes/index');

var app = express();
app.use(cors())

app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());
// serve static files from React 
app.use(express.static(path.join(__dirname, '../frontend/build')));

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

React App.js文件：

import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import Users from './Users';
import NotFound from './NotFound';
import Home from './Home';

class App extends Component {
  state = {users : []}

  render() {
    return (
      <div>
        <Switch>
        <Route exact path='/' component={Home}/>
        <Route exact path='/users' component={Users}/>
        <Route component={NotFound} />
        </Switch>
      </div>
    );
  }
}

export default App;

React api.js文件：

const api = process.env.BACKEND_URL || 'http://localhost:5000'

export const getUsers = () => (
  fetch(`${api}/api/users`)
    .then(res => res.json())
)

反應package.json

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-router-dom": "^4.2.2",
    "react-scripts": "1.0.12"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000"
}

截圖

主頁在本地運行

在Heroku上運行的主頁

在本地運行的用戶頁面

在Heroku上運行的用戶頁面

Answer 1

您正在提供靜態文件，但還需要將所有HTTP GET請求轉發到客戶端react路由器，以便它可以處理。 您可能希望將此路由放入您的app.js ：

app.get("*", function (req, res) {
    res.sendFile(__dirname + "/path/to/index.html")
})