React 应用程序在本地运行，在 Heroku 错误代码 = H10 时崩溃

Question

在 Windows 中执行“npm start”后，该应用程序运行良好，但是当我从 github 拉入 Heroku 时，我得到了一个错误。

package.json:

{
  "name": "tic-tac-toe",
  "version": "0.1.0",

  "dependencies": {
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  },
  "engines": {
      "node": "6.10.3",
      "npm":"3.10.10"
  },
  "devDependencies": {
    "react-scripts": "1.0.7"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

和错误日志：

 app[web.1]: npm ERR!     npm bugs tic-tac-toe
 app[web.1]: npm ERR! Or if that isn't available, you can get their info via:
 app[web.1]: npm ERR!     npm owner ls tic-tac-toe
 app[web.1]: npm ERR! There is likely additional logging output above.
 app[web.1]: 
 app[web.1]: npm ERR! Please include the following file with any support request:
 app[web.1]: npm ERR!     /app/npm-debug.log
 heroku[web.1]: Process exited with status 1
 heroku[web.1]: State changed from starting to crashed
 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=react-tac-to.herokuapp.com request_id=c3cf2461-1989-4734-a7d5-157eb81c9643 fwd="24.29.73.46" dyno= connect= service= status=503 bytes= protocol=https
 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=react-tac-to.herokuapp.com request_id=05109629-cbb4-4927-9d13-8a3a37fedb93 fwd="24.29.73.46" dyno= connect= service= status=503 bytes= protocol=https

问题的性质让我认为这是基于配置的，而不是在 app.js 主代码中。 主文件有点长，如果你想看的话，我会在 Github 上链接： https://github.com/owenpercoco/React-Tac-Toe

Answer 1

我遇到了同样的问题，但上面的解决方案不适用于我在 Heroku 中的 react 应用程序。 我已将构建包更新为 create-react-app，它对我有用。

heroku buildpacks:set mars/create-react-app

Answer 2

只需 npm i serve 安装 serve 或者你可以使用 yarn 代替 npm

您可以在 package.json 文件中更改您的脚本，这似乎是由 react 更新引起的。

"scripts": {
"dev": "react-scripts start",
"start": "serve -s build",
"build": "react-scripts build",
"heroku-postbuild": "npm run build"}

希望它能解决您的问题。

Answer 3

我遇到了同样的问题，它对我有用。

将“服务”添加到应用程序。

示例： npm add serve or yarn add serve

在 package.json 中更改脚本后

"scripts": {
  "dev": "react-scripts start",
  "start": "serve -s build",
  "build": "react-scripts build",
  "heroku-postbuild": "npm run build"
}

Answer 4

Heroku 默认不安装 devdependencies：。 https://devcenter.heroku.com/articles/nodejs-support。将您的 react-scripts 模块设置为始终安装或关闭 Heroku 上的生产模式。

Answer 5

1.) npm install serve --save 或 yarn install serve --save 在您的终端中

"scripts": {
"dev": "react-scripts start",
"start": "serve -s build",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"heroku-postbuild": "npm run build"
}

2.) 在我的 package.json 文件中复制上述代码以代替之前的代码“脚本”

3.) git commit -am "new update"

4.) git push heroku master

• 注意：常见问题是缺少第一步。