部署到heroku MERN时的空白页答案

【问题标题】：blank page when deploying to heroku MERN部署到heroku MERN时的空白页
【发布时间】：2021-06-03 07:15:43
【问题描述】：

我正在努力将网络应用程序部署到 Heroku。一切似乎都很好，没有显示错误，但我只得到一个空白页。

我一直在互联网上搜索并尝试了我所看到的所有内容，但似乎找不到答案。

server.js：

app.use(express.static(path.join(__dirname, '../frontend/build')));
app.get('*', (req, res) =>
  res.sendFile(path.join(__dirname, '../frontend/build/index.html'))
);

文件夹：

我不知道还要附加什么，请告诉我，我会提供。非常感谢你，这对我来说真的很重要

【问题讨论】：

你提到的空白页是 Heroku 中的Application-Error (Error Heroku Logs) Page 吗？
您好。不，这只是一个空白页:(
您的其他路线是否有效？
不，一切都是空白的。（只是说：本地效果很好）
嘿@pop 我在下面添加了一个答案。我认为您应该在 server.js 中将 ('*') 更改为 ('/*')。

标签： heroku deployment mern

【解决方案1】：

一般来说

如果您想将整个 MERN 应用部署到 Heroku，首先将 heroku-postbuild 脚本添加到 package.json

在您的情况下，因为您有目录frontend，backend 分别包含客户端和服务器。

将这些脚本添加到您的package.json，这些脚本将在推送到heroku 后build 您的反应前端。

...
"scripts": {
    "install-client":"cd frontend && npm install"
    "heroku-postbuild": "npm run install-client && npm run build"
}
...

现在在您的 server.js 文件中，

...

const path = require('path');

app.use(express.static(path.join(__dirname, '../frontend/build')));

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname, '../frontend/build', 'index.html'));
});

...

现在，如果您需要使用客户端路由（React Router），请将/ 更新为/*，如下所示，

app.get('/*', function (req, res) {
   res.sendFile(path.join(__dirname, '../frontend/build', 'index.html'));
 });

我认为这应该可以解决问题。

参考：https://create-react-app.dev/docs/deployment/

【讨论】：

嘿！刚看到这个。非常感谢您的帮助。我设法解决了这个问题，但我仍然不确定如何 tbh haha。我认为问题在于我在 index.html 中有一个 /manifest.json 而不是 manifest.json .. 但是，无论如何，谢谢你的时间！！！

【解决方案2】：

您是否尝试从 heroku 同时部署后端和前端？

过去我使用 heroku 作为后端，使用 netlify 部署前端

【讨论】：

嘿！是的，我正在尝试从heroku部署两者。但是您从同一个项目中的不同服务部署？
是的，我看了几个教程，但我认为这是一个很好的教程medium article