Развертывание приложения React на Heroku

Question

Я занимаюсь разработкой приложения React.Я нахожусь в тот момент, когда я должен развернуть свое приложение на Heroku.Я создал приложение из шаблонной реагирующей рогатки.Чтобы иметь возможность запускать приложение на сайте сервера, я определил Procfile для запуска сборки на стороне сервера, и скрипт сборки выглядит следующим образом:

web: npm run build

К сожалению, в конце процесса развертывания я получаю сообщение об ошибке:

Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

Благодаря этому я понял, что я запускаю его на неправильном порту, поэтому я обновилdistServer.js файл и теперь он выглядит так:

import {chalkProcessing} from './chalkConfig';

/* eslint-disable no-console */

console.log(chalkProcessing('Opening production build...'));

// Run Browsersync
browserSync({
  port: process.env.PORT || 4000,
  ui: {
    port: 4001
  },
  server: {
    baseDir: 'dist'
  },

  files: [
    'src/*.html'
  ],

  middleware: [historyApiFallback()]
});

И проблема все еще возникает.Мне удалось запустить сайт только один раз, но я не знаю, какие обстоятельства привели меня к успеху.Я не могу воспроизвести способ запуска приложения на Heroku.Кто-нибудь может мне помочь?

Кроме того, вот сценарии, определенные в package.json:

"scripts": {
    "preinstall": "node tools/nodeVersionCheck.js",
    "remove-demo": "babel-node tools/removeDemo.js",
    "start-message": "babel-node tools/startMessage.js",
    "prestart": "npm run start-message",
    "start": "concurrently -k -r -s first \"npm run test:watch\" \"npm run open:src\" \"npm run lint:watch\"",
    "open:src": "babel-node tools/srcServer.js",
    "open:dist": "babel-node tools/distServer.js",
    "lint": "esw webpack.config.* src tools --color",
    "lint:watch": "npm run lint -- --watch",
    "clean-dist": "npm run remove-dist && mkdir dist",
    "remove-dist": "rimraf ./dist",
    "prebuild": "npm run clean-dist",
    "build": "babel-node tools/build.js && npm run open:dist",
    "test": "jest",
    "test:CI": "babel-node tools/testCi.js",
    "test:cover": "npm run test -- --coverage ",
    "test:cover:CI": "npm run test:CI -- --coverage && cat ./coverage/lcov.info | node_modules/coveralls/bin/coveralls.js",
    "test:watch": "jest --watch",
    "open:cover": "npm run test:cover && opn ./coverage/lcov-report/index.html",
    "analyze-bundle": "babel-node ./tools/analyzeBundle.js"
  }

РЕДАКТИРОВАТЬ:

Я изменилсяпорт также для пользовательского интерфейса, как в этом фрагменте:

  port: 4000,
  ui: {
    port: process.env.PORT || 4001
  }

, и это также не работает.У кого-нибудь есть идеи, как решить мою проблему?