在Heroku部署React应用时出现错误：“找不到所需的文件。名称：index.html”。

Question

在Heroku部署React应用时出现错误：“找不到所需的文件。名称：index.html”。

3

我正在尝试在Heroku上部署我的React应用程序，但是遇到了一系列问题。我对开发/React比较陌生（所以这可能是一个愚蠢的错误），但我总是能够成功地在本地运行该应用程序。

首先，这是我的错误信息：

` react-scripts build Could not find a required file. Name: index.html Searched in: /tmp/build_7ddb1c907b9746a90f2bd6108231f553/public` index.html在我的代码库中的位置以下是我package.json文件的相关部分：

"name": "mern-auth", "version": "1.0.0", "homepage": "./", "description": "Mern Auth Example", "main": "server.js", "node": "v12.13.1", "npm": "6.13.4", "scripts": { "client-install": "npm install --prefix client", "build": "react-scripts build", "start": "node server.js", "server": "nodemon server.js", "client": "npm start --prefix client", "dev": "concurrently \"npm run server\" \"npm run client\"", "heroku": "npm run build && copy client/public/index.html dist/index.html" },

这是我的server.js文件：

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中被注释掉的代码可以看出，我尝试了很多解决方法来使它工作。我的首要任务是让它能够运行起来。理想情况下，我希望能够使用我在scripts中定义的npm run build命令在生产环境中运行，但我也很乐意部署开发版本。非常感谢您所提供的任何帮助！

- wharfchillin

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fede · Accepted Answer

我遇到了完全相同的问题。

请确保在 Git 中不要忽略 React index.html 文件所在的文件夹（在您的情况下，我认为它位于client/public下），否则 Heroku 在生成捆绑包时将无法复制此文件夹中的index.html和其他文件。

来自官方React文档的此链接还总结了这个问题：https://create-react-app.dev/docs/deployment/#could-not-find-a-required-file