React App работает локально, но вылетает с кодом ошибки = H10 на Heroku

Question

Я пытаюсь разместить свое приложение реакции на герою. Локально работает без ошибок, но на героку приложение вылетает. Вот мой пакет. json:

{
  "name": "steptracker-admin",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "@wojtekmaj/react-daterange-picker": "^2.5.0",
    "axios": "^0.19.2",
    "bootstrap": "^4.4.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.4.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Версия узла: 12.16.1 npm версия: 6.13.4

При проверке логов heroku появляется следующая ошибка:

2020-03-25T10:12:12.437479+00:00 app[web.1]: > steptracker-admin@0.1.0 start /app
2020-03-25T10:12:12.437480+00:00 app[web.1]: > react-scripts start
2020-03-25T10:12:12.437480+00:00 app[web.1]:
2020-03-25T10:12:15.473839+00:00 heroku[web.1]: State changed from starting to up
2020-03-25T10:12:15.444327+00:00 app[web.1]: ℹ ｢wds｣: Project is running at http://172.18.165.2/
2020-03-25T10:12:15.444903+00:00 app[web.1]: ℹ ｢wds｣: webpack output is served from
2020-03-25T10:12:15.445032+00:00 app[web.1]: ℹ ｢wds｣: Content not from webpack is served from /app/public
2020-03-25T10:12:15.445120+00:00 app[web.1]: ℹ ｢wds｣: 404s will fallback to /
2020-03-25T10:12:15.445390+00:00 app[web.1]: Starting the development server...
2020-03-25T10:12:15.445391+00:00 app[web.1]:
2020-03-25T10:12:15.642416+00:00 heroku[web.1]: State changed from up to crashed
2020-03-25T10:12:15.626641+00:00 heroku[web.1]: Process exited with status 0
2020-03-25T10:15:28.913535+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=steptrack-admin.herokuapp.com request_id=9ca7fdff-2d75-48fc-bb91-edd54ca49c1b fwd="223.233.97.23" dyno= connect= service= status=503 bytes= protocol=https
2020-03-25T10:15:29.456687+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=steptrack-admin.herokuapp.com request_id=906e140e-dd4f-4caa-a9bd-c732cc64d4bd fwd="223.233.97.23" dyno= connect= service= status=503 bytes= protocol=https

Answer 1

Что-то не так с новым стартовым скриптом CRA. Вместо этого используйте подачу:

npm install --save serve

Измените начало, чтобы использовать serve в упаковке. json

start: "serve -s build"

Answer 2

Мне удалось исправить эту проблему в приложении реакции, используя Windows 10, выполнив следующие шаги. Сначала убедитесь, что вы включили Express в свой проект. Из вашего проекта root:

npm install express --save

Затем создайте файл server. js в папке root вашего проекта и добавьте в него следующее:

const express = require('express');
const path = require('path');
const app = express();
const PORT = process.env.PORT || 5000;

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

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

app.listen(PORT);

Следующее создание файл Procfile (без расширения) в папке root вашего проекта. Убедитесь, что вы назвали его Procfile с большой буквы "P". Heroku ищет точное имя файла и, если оно не находит его, оно не будет включать его в сборку. В Procfile добавьте:

web: node server.js

Опять же, убедитесь, что он напечатан именно так. Если есть лишние пробелы, приложение взломает sh и снова выдаст ошибку H10. Это должно быть все, что вам нужно. Передайте изменения в Heroku и heroku restart, прежде чем heroku open

Надеюсь, что это поможет кому-то еще, у кого все еще есть эта проблема.