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”）作为您路径的根目录。因此，除非您更改目录名称或移动文件，否则应该没问题。