Heroku 上的空白应用程序：express.static 和/或 res.sendFile 问题？答案

【问题标题】：Blank app on Heroku: express.static and or res.sendFile issue?Heroku 上的空白应用程序：express.static 和/或 res.sendFile 问题？
【发布时间】：2019-01-04 06:42:42
【问题描述】：

我上传了一个React + Node + Express 应用到 Heroku。该应用程序在本地运行，但部署后显示为空白屏幕。控制台日志没有显示任何错误。

这里是新手，所以请多多包涵。

我怀疑，在 server.js 中，我出错了：

if (process.env.NODE_ENV === 'production') {
  // Serve any static files
  app.use('client/public', express.static(path.join(__dirname, '/')));
  // Handle React routing, return all requests to React app
  app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'client/public', 'index.html'));
      });
}

我们的文件夹结构有点奇怪（我们一直在研究不同的教程）。 /client/public/index.html 具有 /client/src/index.js 呈现到的 div。 App.js 持有路线。我想知道res.sendFile 是否实际上应该发送“index.js”而不是“index.html”？我也尝试过，但页面仍然是空白的。

任何其他指针将不胜感激，因为我不确定我是否明白我哪里出错了。

谢谢！

项目代码可以在https://github.com/windwardpassage/ubcplanner找到

Heroku：https://ubcplanner4.herokuapp.com/

文件夹结构

.
├── client
│   ├── App.css
│   ├── App.js
│   ├── index.js
│   ├── public
│   │   └── index.html
│   └── src
│       └── Folders of components, stores, images, etc.
├── package.json
└── server.js

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
  </body>
</html>

App.js

class App extends Component {
  render() {
    return (
      <div className="App">
        <MainHeader />
          <div className="ui-container">
              <Route path="/" exact component={ IndexPage } />
              <Route path="/signup" exact component={ SignupPage } />
              <Route path="/forgotpassword" exact component={ ForgotPasswordPage } />
          </div>
      </div>
    );
  }
}

export default App;

index.js

const store = createStore(
    rootReducer,
    composeWithDevTools(applyMiddleware(thunk))
);

ReactDOM.render(
    <BrowserRouter>
        <Provider store={store}>
            <App />
        </Provider>
    </BrowserRouter>,
    document.getElementById("root")
);
registerServiceWorker();

server.js

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const passport = require('passport');
const config = require('./config');
var cors = require('cors');
const port = process.env.PORT || 5000;

// connect to the database and load models
require('./server/models').connect(config.dbUri);

const app = express();

if (process.env.NODE_ENV === 'production') {
  // Serve any static files
  app.use('client/public', express.static(path.join(__dirname, '/')));
  // Handle React routing, return all requests to React app
  app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'client/public', 'index.html'));
      });
}

// tell the app to look for static files in these directories
//app.use(express.static('./server/static/'));
app.use(express.static('./client/dist/'));

// routes
const authRoutes = require('./server/routes/auth');
const apiRoutes = require('./server/routes/api');
app.use('/auth', authRoutes);
app.use('/api', apiRoutes);
app.use(cors());

// start the server
app.listen(port, () => console.log(`Listening on port ${port}`));

【问题讨论】：

任何修复？告诉我

标签： node.js reactjs express heroku

【解决方案1】：

您可能忽略了.gitignore 文件中的public 目录。

这最近发生在我身上，我设法从.gitignore 中删除public 目录来解决它。

【讨论】：

【解决方案2】：

您在路由之前提供静态文件。之后您需要提供静态文件。尝试将您的 server.js 文件更改为：

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');
const passport = require('passport');
const config = require('./config');
var cors = require('cors');
const port = process.env.PORT || 5000;

// connect to the database and load models
require('./server/models').connect(config.dbUri);

const app = express();

// tell the app to look for static files in these directories
//app.use(express.static('./server/static/'));
app.use(express.static('./client/dist/'));

// routes
const authRoutes = require('./server/routes/auth');
const apiRoutes = require('./server/routes/api');
app.use('/auth', authRoutes);
app.use('/api', apiRoutes);
app.use(cors());

if (process.env.NODE_ENV === 'production') {
  // Serve any static files
  app.use('client/public', express.static(path.join(__dirname, '/')));
  // Handle React routing, return all requests to React app
  app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, 'client/public', 'index.html'));
      });
}

// start the server
app.listen(port, () => console.log(`Listening on port ${port}`));

【讨论】：