Блог

Главная - Вопросы по программированию - пустая страница при развертывании в heroku MERN

пустая страница при развертывании в heroku MERN

#heroku #deployment #mern

Вопрос:

Я борюсь с развертыванием веб-приложения в Heroku. Все вроде нормально, ошибок не видно, но я получаю только пустую страницу.

Я искал в Интернете и перепробовал все, что видел, но, похоже, не могу найти ответ.

server.js:

 app.use(express.static(path.join(__dirname, '../frontend/build')));
app.get('*', (req, res) =>
  res.sendFile(path.join(__dirname, '../frontend/build/index.html'))
);

папки:

введите описание изображения здесь

Я не знаю, что еще прикрепить, просто скажите мне, и я предоставлю это. Заранее большое вам спасибо, это действительно очень важно для меня

Комментарии:

1. Является ли пустая страница, о которой вы упомянули Application-Error (Error Heroku Logs) Page в Heroku, пустой страницей?

2. Всем привет. Нет, это просто пустая страница 🙁

3. Работает ли какой-нибудь из ваших других маршрутов?

4. нет, все пустое. (просто чтобы сказать: локально это работает идеально)

5. Эй, @pop, я добавил ответ ниже. Я думаю, тебе следует переодеться ('*') ('/*') в свою server.js.

Ответ №1:

Обычно,

Если вы хотите развернуть все свое приложение MERN в Heroku, сначала добавьте heroku-postbuild скрипт в package.json

В вашем случае, так как у вас есть каталоги frontend , backend содержащие клиент и сервер соответственно.

Добавьте эти скрипты в свой package.json , эти скрипты будут build вашим интерфейсом react после нажатия на heroku.

 ...
"scripts": {
    "install-client":"cd frontend amp;amp; npm install"
    "heroku-postbuild": "npm run install-client amp;amp; npm run build"
}
...

Теперь в вашем server.js файле,

 ...

const path = require('path');

app.use(express.static(path.join(__dirname, '../frontend/build')));

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

...

Теперь, если вам нужно использовать маршрутизацию на стороне клиента (маршрутизатор React), обновите / /* , как показано ниже,

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

Я думаю, что это должно решить проблему.

Обратитесь: https://create-react-app.dev/docs/deployment/

Комментарии:

1. Эй!! Только что видел это. Большое вам спасибо за вашу помощь. Мне удается решить проблему, но я все еще не уверен, как это сделать, ха-ха-ха. Я думаю, проблема заключалась в том, что у меня был /manifest.json вместо manifest.json в index.html.. Но, в любом случае, спасибо вам за потраченное время!!!

Ответ №2:

Вы пытаетесь развернуть как бэкэнд, так и интерфейс вместе с heroku?

В прошлом я использовал heroku для своего бэкенда и использовал netlify для развертывания своего интерфейса

Комментарии:

1. Эй! да, я пытаюсь развернуть оба из heroku. Но вы развернуты из разных служб в одном и том же проекте?

2. да, я просмотрел несколько учебных пособий, но я думаю, что это хорошая статья среднего уровня

Метки: