Блог

Главная - Вопросы по программированию - Развертывание приложения react с помощью NodeJS и express в Heroku

Развертывание приложения react с помощью NodeJS и express в Heroku

#node.js #reactjs #express #heroku

#node.js #reactjs #экспресс #heroku

Вопрос:

У меня есть веб-приложение, которое использует серверную часть Express и интерфейс React. Сценарий heroku-postbuild в моем package.json выглядит следующим образом:

  "heroku-postbuild": "npm run build amp;amp; cd frontend amp;amp; npm install amp;amp; npm run build"

Когда мне git push heroku master кажется, что все в порядке, пока я не получу:

«Сбой при honeyman-designs@1.0.0 heroku-сценарий postbuild.»

это сценарий:

  "scripts": {
     "start": "nodemon --watch backend --exec babel-node backend/server.js",
     "build": "del -rf dist amp;amp; babel backend -d dist",
     "heroku-postbuild": "npm run build amp;amp; cd frontend amp;amp; npm install amp;amp; npm run build"
   },

Сценарий внутри интерфейса:

  "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },

Я использую Windows 10 в качестве своей операционной системы.

Мой Procfile содержит:

  web: node dist/server.js

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

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

1. npm run build amp;amp; cd frontend amp;amp; npm install amp;amp; npm run build : Подождите, как? Вы не можете сделать npm run build это в верхней части интерфейса, верно? Значит ли это, что у вас есть a package.json в главном каталоге со build сценарием, и внутри frontend каталога тоже есть то же самое? Как выглядит ваша структура папок?

2. Да, у меня есть два файла package.json. Один в главном каталоге, а второй — в каталоге внешнего интерфейса

3. Хорошо, у него тоже есть сценарий сборки в главном каталоге? Не могли бы вы показать нам оба package.json файла, пожалуйста?

4. да, это тот, который находится в главном каталоге («build»: «del -rf dist amp; amp; babel backend -d dist»,), а это тот, который находится внутри интерфейса («build»: «react-scripts build»,), который я обновил, чтобы включить оба скрипта

5. Вы можете проверить мой проект, в нем есть рабочее развертывание React ExpressJS github.com/KiraLT/torrent-stream-server . Вы даже можете протестировать с помощью кнопки Deploy to Heroku