Question

我正在开发React应用程序。我正在将我的应用程序部署到Heroku的那一刻。我已经从样板react-slingshot创建了一个应用程序。为了能够在服务器站点上运行该应用程序，我定义了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"
  }

编辑：

我也更改了UI的端口，如以下代码片段：

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

，这也不起作用。有谁知道如何解决我的问题？

将React应用程序部署到Heroku

0 个答案: