React.js：Heroku：错误：ENOENT：没有这样的文件或目录，stat '/app/src/client/build/index.html'

Question

如果这不是正确的做法，我深表歉意。我在这个问题上花了 4 天时间，最终想出了一个解决方案，如果其他人遇到这个问题，我想发布这个可能的解决方案。

我正在运行一个带有 React 客户端的 Node.js 服务器，这里是文件夹结构的图像供参考。

我在 package.json 中使用 postbuild 脚本在 heroku 上构建我的项目

出于我无法理解的原因，以下 GET catch all 语句

app.get("*", (req, res) => {
res.sendFile(path.resolve(__dirname, "client", "build", "index.html"))
});

路径返回 '/app/src/client/build/index.html' 这是不正确的路径，因为您的应用程序托管在 /app/client/build/index.html 我必须编辑我的 GET catch all 语句到以下。

app.get("*", (req, res) => {
res.sendFile(path.resolve("client", "build", "index.html"));
});

它现在可以正确重定向到我的索引文件并且应用程序可以正常工作。就像我说的不幸的是，我无法说明为什么 __dirname 没有指向正确的文件夹，所以如果有人能阐明这一点，那就太好了。

此外，解决方案的稳健性可能是一个问题，因为如果 Heroku 更改文件结构，GET catch all 语句可能会中断。

Answer 1

__dirname 返回包含已执行文件的文件夹的路径。

所以如果包含__dirname 的代码在文件'/app/src/app.js' 中，__dirname 将解析为'/app/src'。 如果您的 __dirname 在文件 '/app/foo/bar/baz.js' 中，它将解析为 '/app/foo/bar'。

由于您希望将路径解析为“/app/client/...”，因此您的解决方法很好。

您使用的解决方案应该足够强大。 path.resolve() 会将您的工作目录（您运行应用程序的目录，因此我假设在 heroku 上的“/app”）设置为路径的根目录。因此，除非您更改目录名称或移动文件，否则应该没问题。