错误 R10（启动超时）-> Web 进程在使用 React 在 HEROKU 上启动后 60 秒内无法绑定到 $PORT

Question

我在 10 次部署尝试中有 9 次遇到此错误，我不知道是什么原因造成的。我已经尝试了我在 Whosebug 上找到的所有建议，但没有一个是稳定的。我不知道为什么会这样，伙计们，我会提供任何帮助！

Procfile

web: npm start

initializers/server/index.js

import Express from 'express';

import handleRender from './handleRender';

const app = Express();
const port = process.env.PORT || 3000;

// Serve static files
app.use('/assets', Express.static('./dist/assets/'));

// This is fired every time the server side receives a request
app.use(handleRender);

// We are going to fill these out in the sections to follow

/* eslint no-console: 0 */
app.listen(port, () => console.log('App is listening on', port));

package.json

{
  "name": "planner",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fullhuman/postcss-purgecss": "^3.1.3",
    "@reduxjs/toolkit": "^1.5.0",
    "@tailwindcss/postcss7-compat": "^2.0.2",
    "autoprefixer": "^9.8.6",
    "axios": "^0.21.1",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "history": "^4.1.0",
    "html-webpack-plugin": "^4.5.0",
    "i18next": "^19.8.5",
    "mini-css-extract-plugin": "^1.3.3",
    "msw": "^0.25.0",
    "postcss": "^7.0.35",
    "prop-types": "^15.7.2",
    "qs": "^6.9.4",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "react-i18next": "^11.8.5",
    "react-redux": "^7.2.2",
    "react-router-dom": "^5.2.0",
    "react-scripts": "^4.0.2",
    "redux": "^4.0.5",
    "redux-undo": "^1.0.1",
    "regenerator-runtime": "^0.13.7",
    "sass-loader": "^7.3.1",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
    "universal-cookie": "^4.0.4",
    "uuid-random": "^1.3.2",
    "webpack": "^4.40.2",
    "webpack-bundle-analyzer": "^4.3.0",
    "webpack-cli": "^3.3.12",
    "webpack-manifest-plugin": "^3.0.0",
    "webpack-node-externals": "^2.5.2"
  },
  "engines": {
    "node": "14.5.0",
    "npm": "6.14.9"
  },
  "scripts": {
    "test": "jest",
    "build:css": "tailwind build src/assets/tailwind.css -o src/assets/main.css",
    "watch:css": "chokidar 'src/assets/tailwind.css' -c 'npm run build:css'",
    "start:dev": "concurrently -n Tailwind,React 'npm run watch:css' 'webpack-dev-server --config ./initializers/webpack/development.js'",
    "build:client": " rimraf ./dist/assets/* && webpack --config ./initializers/webpack/production.js",
    "build:server": "NODE_ENV=production npm run build:css && webpack --config ./initializers/webpack/server.js",
    "start:server": "NODE_ENV=production node --enable-source-maps ./dist/server/server",
    "start": "NODE_ENV=production npm run build:css && npm run build:client && npm run build:server && npm run start:server"
  },
  "jest": {
    "verbose": true,
    "moduleDirectories": [
      "src",
      "node_modules"
    ],
    "moduleNameMapper": {
      "\.(css|less|scss|sass)$": "identity-obj-proxy"
    },
    "setupFilesAfterEnv": [
      "<rootDir>src/tests/setupTests.js"
    ],
    "transform": {
      "^.+\.svg$": "<rootDir>/src/tests/svgTransform.js",
      "^.+\.(js|jsx)$": "babel-jest"
    }
  },
  "devDependencies": {
    "@babel/preset-env": "^7.12.11",
    "@babel/preset-react": "^7.12.10",
    "@testing-library/dom": "^7.29.4",
    "@testing-library/jest-dom": "^5.11.8",
    "@testing-library/react": "^11.2.3",
    "@testing-library/user-event": "^12.6.0",
    "@typescript-eslint/eslint-plugin": "^4.11.1",
    "@typescript-eslint/parser": "^4.11.1",
    "babel-eslint": "^10.1.0",
    "chokidar-cli": "^2.1.0",
    "concurrently": "^5.3.0",
    "eslint": "^7.16.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-loader": "^4.0.2",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.3",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "react-test-renderer": "^17.0.1",
    "redux-mock-store": "^1.5.4",
    "webpack-dev-server": "^3.11.0"
  }
}

我还能做些什么来解决这个问题？

Answer 1

您的代码看起来不错但是：

"start": "NODE_ENV=production npm run build:css && npm run build:client && npm run build:server && npm run start:server"

这太多了。

将它们放在 build 或 heroku-postbuild 中，参见 https://devcenter.heroku.com/changelog-items/1557 and https://devcenter.heroku.com/articles/nodejs-support#customizing-the-build-process

不要在您的 start 脚本中进行任何“构建”。使用您的 start 脚本仅执行您的代码。

由于正在构建，它无法在 60 秒内绑定到 $PORT。

错误 R10（启动超时）-> Web 进程在使用 React 在 HEROKU 上启动后 60 秒内无法绑定到 $PORT

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

deployment

heroku

reactjs

webpack

server-side-rendering