我在Heroku上上传了一个React + Node + Express应用程序。该应用程序在本地运行，但部署后显示为空白屏幕。控制台日志未显示任何错误。
这里是新手，所以请耐心等待。
我怀疑，在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}`));
您可能忽略了.gitignore文件中的public目录。
最近我遇到了这种情况，我设法解决了从.gitignore中删除public目录的问题。
您在路由之前提供静态文件。之后您需要提供静态文件。尝试将您的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}`));