如何解决在 Heroku 上部署 React 应用程序时出现的错误

Posted 2023-02-16

【中文标题】如何解决在 Heroku 上部署 React 应用程序时出现的错误

【英文标题】：How to solve the Error in deploying react app on Heroku

【发布时间】：2021-08-01 03:11:55

【问题描述】：

我在本地为我的项目运行 yarn install 和 yarn start，它运行良好。但是，一旦我将它推送到 Heroku，我就无法使用以下错误日志进行部署：

2021-05-10T16:40:06.622555+00:00 app[web.1]: > react-scripts start
2021-05-10T16:40:06.622556+00:00 app[web.1]: 
2021-05-10T16:40:06.627252+00:00 app[web.1]: sh: 1: react-scripts: not found
2021-05-10T16:40:06.636894+00:00 app[web.1]: npm ERR! code ELIFECYCLE
2021-05-10T16:40:06.637303+00:00 app[web.1]: npm ERR! syscall spawn
2021-05-10T16:40:06.637496+00:00 app[web.1]: npm ERR! file sh
2021-05-10T16:40:06.637766+00:00 app[web.1]: npm ERR! errno ENOENT
2021-05-10T16:40:06.644457+00:00 app[web.1]: npm ERR! bleh@0.1.0 start: `react-scripts start`
2021-05-10T16:40:06.644627+00:00 app[web.1]: npm ERR! spawn ENOENT
2021-05-10T16:40:06.644771+00:00 app[web.1]: npm ERR!
2021-05-10T16:40:06.644922+00:00 app[web.1]: npm ERR! Failed at the bleh@0.1.0 start script.
2021-05-10T16:40:06.645043+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
2021-05-10T16:40:06.654910+00:00 app[web.1]: 
2021-05-10T16:40:06.655128+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:
2021-05-10T16:40:06.655306+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2021-05-10T16_40_06_646Z-debug.log
2021-05-10T16:40:06.706089+00:00 heroku[web.1]: Process exited with status 1
2021-05-10T16:40:06.778374+00:00 heroku[web.1]: State changed from starting to crashed
2021-05-10T16:41:26.103511+00:00 app[api]: Deploy 1f4ec645 by user [e-mail]
2021-05-10T16:41:26.103511+00:00 app[api]: Release v7 created by user [e-mail]
2021-05-10T16:41:26.390448+00:00 heroku[web.1]: State changed from crashed to starting
2021-05-10T16:41:30.000000+00:00 app[api]: Build succeeded
2021-05-10T16:41:32.398941+00:00 heroku[web.1]: Starting process with command `npm start`

此外，我的目录中只包含yarn.lock，所以我很困惑为什么它仍在运行 npm。这是我的package.json 文件：

  "name": "bleh",
  "version": "0.1.0",
  "private": true,
  "devDependencies": 
    "react-scripts": "0.9.0"
  ,
  "dependencies": 
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-fontawesome": "^1.6.1",
    "react-infinite": "^0.11.2",
    "react-infinite-loader": "^1.0.2",
    "react-router": "^3.0.2"
  ,
  "scripts": 
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  

【参考方案1】：

你需要一个后端服务器，比如 node 和 express 并配置脚本 npm start。转到 Package.json --> scripts --> 并添加脚本 --> "start": "node app or index" 取决于您的根文件。顺便说一句，您需要将 react 应用程序放在后端的公共文件夹中。

Heroku 需要一个后端才能正确启动。

你可以看到快速设置https://www.npmjs.com/package/express或http://expressjs.com/en/starter/hello-world.html

【讨论】：

我是用Github API做一个github搜索器，还需要express setup吗？

@HongleiLiu 如果你想在 Heroku 上部署，是的，你需要后端。但我认为您只能在 github 页面上部署 react 应用程序。