«Не удалось найти необходимый файл. Имя: индекс. html» Ошибка при развертывании приложения React на Heroku - PullRequest
1 голос
/ 19 января 2020

Я работаю над развертыванием моего приложения реагирования на Heroku, но столкнулся с проблемой после проблемы. Я довольно новичок в разработке / реагировании (так что это может быть чем-то глупым), но мне всегда удавалось успешно запускать приложение локально.

Во-первых, вот моя ошибка: `

build-scripts build Не удалось найти нужный файл. Имя: index. html Искать в: / tmp / build_7ddb1c907b9746a90f2bd6108231f553 / public`

Где index. html находится в моей кодовой базе

Вот мой соответствующая часть моей посылки. 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" },

(Я возился со сценарием heroku тонну, чтобы попытаться заставить Heroku распознать индекс. html. Я знаю, что то, что сейчас там, вероятно, не правильно, но, честно говоря, я не уверен в лучшей альтернативе.)

А вот Франкенштейн, который является моим сервером. js file:

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);

Как вы можете заметить по закомментированному коду на сервере. js, я пробовал множество обходных путей, чтобы попытаться заставить это работать. Мой приоритет здесь - просто иметь возможность запустить это. В идеале я хотел бы иметь возможность сделать это в рабочем состоянии с помощью команды npm run build, которую я определил в сценариях, но я был бы более чем счастлив получить развернутую версию разработки. Любая помощь, которую вы можете предложить, будет очень признательна!

1 Ответ

0 голосов
/ 29 января 2020

У меня была точно такая же проблема.

Убедитесь, что вы не игнорируете в Git папку, в которой находится файл React index.html (в вашем случае я думаю, что он находится под client/public), в противном случае Heroku не сможет скопировать index.html и другие файлы из этой папки при создании пакета.

Эта ссылка из официальных документов React также обобщает проблему: https://create-react-app.dev/docs/deployment/#could -не-найти-требуемый-файл

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...