部署到heroku的React/Node应用程序显示空白屏幕

Question

我第一次尝试将我的应用程序部署到 Heroku。我在后端使用 create-react-app、redux 和 node/mongodb。当我通过

heroku open

访问我的应用程序时，我看到的是空白屏幕。当我查看源代码时，我的 React index.html 模板已就位，但当我单击任何资产（如 manifest.json 或 main.js 文件）时，它们完全是空白的。我的所有后端 API 都在工作（我转到了我的 google oauth 路线，并收到了 google 登录屏幕的正确欢迎），但没有一个视图正在渲染。

我检查了我的构建目录，从我的菜鸟眼睛看来，所有构建似乎都工作正常。我检查了 Heroku 日志，没有任何错误。

我知道这很模糊，但是有什么我应该检查的吗？我可以在这里分享什么来帮助获得一些指导吗？我很抱歉没有在这篇文章的初稿上分享更多内容，但老实说，我不知道该分享什么来澄清。我很高兴编辑和添加代码。这是我的第一次“全栈”部署，所以我对此完全陌生，3 小时的故障排除和谷歌搜索并没有帮助我解决这个问题。该应用程序在我的笔记本电脑上开发时运行得很好，所以我猜测它与我的 create-react-app 构建有关。

这是我在 Heroku 上的应用程序的链接。 https://desolate-stream-86031.herokuapp.com/

Answer 1

JS 文件不是空的，只是无论您请求什么，服务器都会返回index.html。我不知道您使用的是什么服务器，但它似乎配置为提供单页应用程序（始终是index.html），但不是静态资产（JS、CSS 等）。

编辑： 我可以从 JS 文件请求中的 X-Powered-By 标头看出，您正在使用 Express 框架来提供静态资源。您可以参阅 https://expressjs.com/en/starter/static-files.html 上的文档，了解如何配置 Express 以正确提供静态资源。您需要指定提供静态资产的路径，例如/static 为 yourdomain.com/static，静态文件在系统上实际存在的路径。我假设 create-react-app 默认在 /static 寻找静态资源。

Answer 2

打开应用程序时查看控制台。

您的 javascript 似乎存在语法错误，导致屏幕上无法呈现任何内容。