Node.js &引用；找不到所需的文件。名称：index.html“；在Heroku上部署React应用程序时出错

我正在努力让我的react应用程序部署到Heroku上，但遇到了一个又一个问题。我对开发/反应相当陌生（因此这可能是在做一些愚蠢的事情），但我始终能够在本地成功运行该应用程序

首先，我的错误是： `

反应脚本生成 找不到所需的文件。 名称：index.html 搜索范围：/tmp/build\u 7ddb1c907b9746a90f2bd6108231f553/public`

以下是我的package.json的相关部分：

“name”：“mern auth”，
“版本”：“1.0.0”，
“主页”：“/”，
“说明”：“Mern认证示例”，
“main”：“server.js”，
“节点”：“v12.13.1”，
“npm”：“6.13.4”，
“脚本”：{
“客户端安装”：“npm安装--前缀客户端”，
“构建”：“反应脚本构建”，
“开始”：“node server.js”，
“服务器”：“nodemon server.js”，
“客户端”：“npm开始--前缀客户端”，
“dev”：“并发\“npm运行服务器\”“npm运行客户端\”，
“heroku”：“npm运行生成和复制客户端/public/index.html dist/index.html”
}，

（为了让heroku能够识别index.html，我已经对heroku脚本进行了大量修改。我知道目前的情况可能不正确，但坦率地说，我不确定是否有更好的替代方案。）

这是我的server.js文件Frankenstein：

const mongoose = require("mongoose");
const bodyParser = require("body-parser");
const passport = require("passport");
const path = require('path');

const users = require("./routes/api/users");
const plaid = require("./routes/api/plaid");

const app = express();
const publicPath = path.join(__dirname, '..', 'public');

// Bodyparser middleware
app.use(
  bodyParser.urlencoded({
    extended: false
  })
);
app.use(bodyParser.json());

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

/* app.use(express.static(publicPath)); */


/* app.get('*', (req, res) => {
  res.sendFile(path.join(publicPath, 'client/public/index.html'));
}); */


/* app.listen(port, () => {
  console.log(`Server started on port ${port}.`);
}); */

/* app.get('*', (req, res) => {
  res.sendFile('../public/index.html', {root: __dirname})
}); */

const morgan = require("morgan");

app.use(morgan("tiny"));

// Serve our api message
app.get("/api/message", async (req, res, next) => {
  try {
    res.status(201).json({ message: "HELLOOOOO FROM EXPRESS" });
  } catch (err) {
    next(err);
  }
});

if (process.env.NODE_ENV === "production")
  // Express will serve up production assets
  app.use(express.static("build"));

  // Express will serve up the front-end index.html file if it doesn't recognize the route
  app.get('*', function(request, response) {
    response.sendFile(path.resolve(__dirname, '../client/public', 'index.html'));
  });

const port = process.env.PORT || 5000;

app.listen(port, () => {
  console.log('Server is up!');
});

// DB Config
const db = require("./config/keys").mongoURI;

// Connect to MongoDB
mongoose
  .connect(
    db,
    { useNewUrlParser: true }
  )
  .then(() => console.log("MongoDB successfully connected"))
  .catch(err => console.log(err));

// Passport middleware
app.use(passport.initialize());

// Passport config
require("./config/passport")(passport);

// Routes
app.use("/api/users", users);
app.use("/api/plaid", plaid);

---

从server.js中注释掉的代码中可以看出，我已经尝试了许多变通方法来实现这一点。我在这里的首要任务就是让它运行起来。理想情况下，我希望能够使用我在脚本中定义的npm run build命令在生产状态下这样做，但我非常乐意部署一个开发版本。无论您能提供什么帮助，我们都将不胜感激

我也有同样的问题

确保您没有在Git中忽略React

index.html

文件所在的文件夹（在您的情况下，我认为是在

client/public

下），否则Heroku在生成包时将无法从该文件夹复制

index.html

和其他文件

---

官方React文档中的这个链接也总结了这个问题：

我遇到了完全相同的问题

确保您没有在Git中忽略React

index.html

文件所在的文件夹（在您的情况下，我认为是在

client/public

下），否则Heroku在生成包时将无法从该文件夹复制

index.html

和其他文件

---

官方React文档中的这个链接也总结了这个问题：

嗨，Fede，通过在我的package.json中添加以下内容，我幸运地实现了这一点：

“构建”：“cd客户端和React脚本构建”

。然而，我的新问题是，每当我将这个构建推送到Heroku时，就会收到一个“无效主机头”错误。不确定你是否对此有任何指导。感谢你的帮助！您好，Fede，通过在我的package.json中添加以下内容，我幸运地实现了这一点：

“构建”：“cd客户端和反应脚本构建”

。然而，我的新问题是，每当我将这个构建推送到Heroku时，就会收到一个“无效主机头”错误。不确定你是否对此有任何指导。感谢你的帮助！