Heroku ENOENT：没有这样的文件或目录，stat '/app/build/index.html'

Question

我在 Heroku 中运行一个简单的测试站点时遇到了问题。出于某种原因，当我希望它从 /build/ 提供内容时，它试图从 /app/build/ 提供内容。

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

我读到 here 不要在 express 应用程序中使用 __dirname，因为 Heroku 将它设置为 /app，我应该使用 process.cwd();

process.env.PWD = process.cwd();

但它没有用。下面是我的 server.js express 应用和文件夹结构

const path = require('path');
const express = require('express');
const port = process.env.PORT || 8080;
const app = express();

process.env.PWD = process.cwd();

app.use(express.static(process.env.PWD + '/build'));

app.get('*', function (req, res) {
  const index = path.join(process.env.PWD, '/build/index.html');
  res.sendFile(index);
});

app.listen(port);
console.log('server_started');

Answer 1

首先，不要使用 PWD。只需使用 __dirname。它在 Heroku 上的工作方式与在其他任何地方的工作方式完全相同。例如，如果您从非本地目录执行二进制文件，则使用 PWD 会使您的应用程序更加脆弱。

其次，该文件在 Heroku 上不存在的原因可能是因为您已将其添加到 .gitignore 文件中，或者通常没有将其签入 git。您可以从编辑器的颜色编码中看到这一点 - 签入 git 的所有文件都是白色的，被忽略的文件是灰色的（如 node_modules 目录和 build/bundle）。您的索引文件是红色的（不像签入的文件那样是白色的）。因此，当您git push heroku master 时，您引用的那些文件不存在。

最后，ENOENT 之所以说 /app/build 只是因为你在 Heroku 上的根/主目录是 /app。永远不要构建锁定在绝对文件结构中的应用程序；只需使用相对路径（否则，即使您将其移动到本地计算机上的另一个目录，您的应用也会中断）。

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

Answer 2

dist 文件夹被忽略。因此 heroku 返回此错误。 当您在 heroku 中列出您的应用程序文件时，您会发现它丢失了。

如何在heroku中列出文件夹/文件

1. 在应用文件夹内的命令行中运行 heroku run bash
2. 键入dir 并输入。然后你会看到文件夹和文件的列表

Answer 3

检查您的 package.json 文件

"postinstall": "ng build --aot --prod"

检查您的 server.js 文件

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(__dirname + '/dist/YOURPROJECTNAME'));
app.get('/*', function(req,res) {
res.sendFile(path.join(__dirname + '/dist/YOURPROJECTNAME/index.html'));

});

app.listen(process.env.PORT || 8080);

Answer 4

添加静态文件位置后：

app.use(express.static('build'));

Express 查找相对于静态目录的文件，因此静态目录的名称不是 URL 的一部分。您应该可以这样做以获取 index.html：

app.get('*', function (req, res) {
  res.sendFile('index.html');
});

见https://expressjs.com/en/starter/static-files.html

Answer 5

请注意，最好在脚本中使用heroku-postbuild 命令而不是推送build 文件夹。

"scripts": {
  "start": "node index.js",
  "heroku-postbuild": "cd client && npm install && npm run build"
}

Answer 6

我遇到了类似的问题，Heroku open 不断抱怨在/app 中缺少index.html。但是它在本地“Heroku Local”运行良好。

问题是我明确忽略了编译的文件/文件夹，例如/dist 在gitignore 文件中，因此/dist 从未被推送到heroku 部署文件夹中。

做，

heroku git bash
dir

并确保您在此处列出了dist folder (with compiled files)，一切都应该没问题。

Answer 7

我也遇到了这个问题，终于找到了解决办法。

我犯的错误： Heroku 上不存在该文件的原因可能是因为我已将其添加到 .gitignore 文件中，即 /build 文件夹。所以 index.html 没有签入到 git。

解决方案： 只需从 .gitignore 中删除 /build 文件夹，它终于可以工作了。

Answer 8

我遇到了同样的问题，但我已经设置了所有内容。 Heroku Post 在我的节点 package.json 文件中构建。 见下文

"scripts": {
  "start": "node index.js",
  "heroku-postbuild": "cd client && npm install && npm run build"
}

• 仍然出现错误 错误：ENOENT：没有这样的文件或目录，stat + app/client/build/index.html'

刚刚发现这是因为在我的反应文件夹 index.js 文件中 请看下面

import React from 'react';
import ReactDom from 'react-dom'
import App from './App' #importing the App.js component

ReactDom.render(<App/>, document.getElementById('root')) 
// render the react app

但是我没有导出我的 App.js 组件，因此，当我部署到 heroku 时，文件没有被拾取。

这是导出我的 App 组件的行

export default App;

• 希望这对某人有所帮助。

Answer 9

我在使用 dokku 的 vps 上部署 React App 时遇到了同样的问题。

我已经修复了它，但你需要在你的终端中使用 npm run build "scripts" 在你的 package.json 中，例如：

"scripts": {
    "start": "node server.js",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "heroku-postbuild": "npm install && npm run build"
  },

然后在你的 .gitignore 中添加 /build 文件夹。 现在在推送主服务器之前删除"build": "react-scripts build",（与"heroku-postbuild" 存在冲突）。

Answer 10

我对 Angular 和 node 有同样的问题。这是因为我的 dist 文件夹未包含在 repo 中，要么您更改 .gitignore 在您的 Angular 应用程序中，要么将 dist 文件夹复制到另一个位置。然后从 server.js 或 app.js 引用它