将反应项目部署到heroku时遇到问题

Question

我正在尝试将 React 项目部署到 Heroku。以前这样做没有问题，但现在有问题 - 我怀疑是因为版本控制？对此仍然很陌生，因此可以在这里感谢一些有用的输入。

终端错误消息：

remote:        Installing any new modules (package.json)
remote:        
remote:        > react-boilerplate@1.0.0 postinstall /tmp/build_66d2f41eb413351a0a39128a0fae4330
remote:        > NODE_ENV='production' webpack -p
remote:        
remote:        sh: 1: webpack: not found
remote:        npm ERR! file sh
remote:        npm ERR! code ELIFECYCLE
remote:        npm ERR! errno ENOENT
remote:        npm ERR! syscall spawn
remote:        npm ERR! react-boilerplate@1.0.0 postinstall: `NODE_ENV='production' webpack -p`
remote:        npm ERR! spawn ENOENT
remote:        npm ERR!
remote:        npm ERR! Failed at the react-boilerplate@1.0.0 postinstall script.
remote:        npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
remote:        
remote:        npm ERR! A complete log of this run can be found in:
remote:        npm ERR!     /app/.npm/_logs/2017-06-30T10_39_42_230Z-debug.log
remote: 
remote: -----> Build failed
remote:        
remote:        We're sorry this build is failing! You can troubleshoot common issues here:
remote:        https://devcenter.heroku.com/articles/troubleshooting-node-deploys
remote:        
remote:        Some possible problems:
remote:        
remote:        - node_modules checked into source control
remote:        https://blog.heroku.com/node-habits-2016#9-only-git-the-important-bits
remote:        
remote:        Love,
remote:        Heroku
remote:        
remote:  !     Push rejected, failed to compile Node.js app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !   Push rejected to d3-barchart-drhectapus.
remote: 
To https://git.heroku.com/d3-barchart-drhectapus.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/d3-barchart-drhectapus.git'

包.json：

{
  "name": "react-boilerplate",
  "version": "1.0.0",
  "description": "Minimal boilerplate for react",
  "main": "index.js",
  "engines": {
    "node": "6.10.2",
    "npm": "5.0.4"
  },
  "scripts": {
    "dev": "webpack-dev-server --progress --inline --colors --hot --config ./webpack.config.js",
    "postinstall": "NODE_ENV='production' webpack -p",
    "start": "node server.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "babel": {
    "presets": [
      "es2015",
      "react",
      "stage-2"
    ]
  },
  "devDependencies": {
    "babel-core": "^6.24.1",
    "babel-loader": "^7.0.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "babel-preset-stage-2": "^6.24.1",
    "css-loader": "^0.28.0",
    "node-sass": "^4.5.2",
    "sass-loader": "^6.0.5",
    "style-loader": "^0.16.1",
    "webpack": "^2.4.1",
    "webpack-dev-server": "^2.4.5"
  },
  "dependencies": {
    "axios": "^0.16.2",
    "d3": "^4.9.1",
    "react": "^15.5.4",
    "react-dom": "^15.5.4",
    "react-redux": "^5.0.5",
    "redux": "^3.7.1",
    "redux-thunk": "^2.2.0"
  }
}

我怀疑这与我的 node/npm 版本有关？我最近更新了 node 或 npm（不记得是哪一个），但在那之后我似乎在部署时遇到了问题。这是我在终端命令中注意到的：

remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:        
remote:        Resolving node version 6.x via semver.io...
remote:        Downloading and installing node 6.11.0...
remote:        Detected package-lock.json: defaulting npm to version 5.x.x
remote:        Resolving npm version 5.x.x via semver.io...
remote:        Downloading and installing npm 5.0.4 (replacing version 3.10.10)...
remote: 
remote: -----> Restoring cache
remote:        Skipping cache restore (new-signature)

Answer 1

这里的主要问题是缺少模块 webpack。这是因为它没有列在 package.json 中的dependencies 属性中，该属性定义了生产环境所需的模块。

要解决这个问题，你应该把 webpack 放在 dependencies 中，然后从 devDependencies 中删除。

您还应该确保 node_modules 不包含在 git 存储库中。因此，您应该在 gitignore 中包含 node_modules 并在部署到 heroku 之前删除 git 存储库中的 node_modules。