npm 错误！缺少脚本：构建在 HEROKU 中部署的 REACT

Question

我正在尝试在 Heroku 中使用 create-react-app 部署一个项目，使用 Node 作为我的服务器，使用 MongoDB 作为我的数据库，但我遇到了一个错误。这是我第一次使用 React 部署项目。我有 2 个package.json 文件。一个用于create-react-app，另一个用于我的节点服务器。

我所做的是：

1. 在 React 中运行构建，
2. 提交，
3. 使用heroku create -b https://github.com/mars/create-react-app-buildpack.git 创建一个 Heroku 应用程序
4. 我把它推送给 Heroku master。

这里是日志。

Counting objects: 203, done.
Delta compression using up to 8 threads.
Compressing objects: 100% (187/187), done.
Writing objects: 100% (203/203), 191.40 KiB | 5.80 MiB/s, done.
Total 203 (delta 91), reused 0 (delta 0)
remote: Compressing source files... done.
remote: Building source:
remote: 
remote: -----> React.js (create-react-app) multi app detected
remote: -----> Configure create-react-app build environment
remote:        Using `NODE_ENV=development`
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-multi.git
remote: =====> Detected Framework: Multipack
remote: =====> Downloading Buildpack: https://github.com/heroku/heroku-buildpack-nodejs.git
remote: =====> Detected Framework: Node.js
remote: 
remote: -----> Creating runtime environment
remote:        
remote:        NPM_CONFIG_LOGLEVEL=error
remote:        NPM_CONFIG_PRODUCTION=false
remote:        NODE_VERBOSE=false
remote:        NODE_ENV=development
remote:        NODE_MODULES_CACHE=true
remote: 
remote: -----> Installing binaries
remote:        engines.node (package.json):  unspecified
remote:        engines.npm (package.json):   unspecified (use default)
remote:        
remote:        Resolving node version 8.x...
remote:        Downloading and installing node 8.11.4...
remote:        Using default npm version: 5.6.0
remote: 
remote: -----> Restoring cache
remote:        Skipping cache restore (not-found)
remote: 
remote: -----> Building dependencies
remote:        Installing node modules (package.json + package-lock)
remote:        added 85 packages in 3.391s
remote: 
remote: -----> Caching build
remote:        Clearing previous node cache
remote:        Saving 2 cacheDirectories (default):
remote:        - node_modules
remote:        - bower_components (nothing to cache)
remote: 
remote: -----> Pruning devDependencies
remote:        Skipping because NODE_ENV is not 'production'
remote: 
remote: -----> Build succeeded!
remote: =====> Downloading Buildpack: https://github.com/mars/create-react-app-inner-buildpack.git
remote: =====> Detected Framework: React.js (create-react-app)
remote:        Writing `static.json` to support create-react-app
remote:        Enabling runtime environment variables
remote: npm ERR! missing script: build
remote: 
remote: npm ERR! A complete log of this run can be found in:
remote: npm ERR!     /app/.npm/_logs/2018-09-04T05_56_24_845Z-debug.log
remote:  !     Push rejected, failed to compile React.js (create-react-app) multi app.
remote: 
remote:  !     Push failed
remote: Verifying deploy...
remote: 
remote: !   Push rejected to klikie.
remote: 
To https://git.heroku.com/klikie.git
 ! [remote rejected] master -> master (pre-receive hook declined)
error: failed to push some refs to 'https://git.heroku.com/klikie.git

这是我在 create-react-app 中的 package.json

{
  "name": "klikme",
  "version": "0.1.0",
  "private": true,
  "proxy": "http://localhost:8000/",
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-router-dom": "^4.3.1",
    "react-scripts": "1.1.5",
    "styled-components": "^3.4.5"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }
}

这是给我的服务器部门的：

{
  "name": "klikme",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon server.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.3",
    "mongoose": "^5.2.12",
    "morgan": "^1.9.0"
  }
}

我也在我的服务器中添加了它，因为它在文档中：

app.use(express.static(path.join(__dirname, 'client/build')));
app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, 'client/build', 'index.html'));
});

Answer 1

根据您在此处分享的内容，我注意到了几件事。您没有使用 package.json 文件的 engines 部分来指定要在 Heroku 上使用的 Node.js 版本。它看起来像这样：

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "engines": {
    "node": "9.3.0",
    "npm": "5.6.0"
  },

您还会看到上面分离出npm 的版本，Node.js 与 npm 捆绑在一起，因此大多数时候您不需要指定单独的 npm 版本。但是，如果您有意在本地使用不同版本的 npm，您可以在 Heroku 上指定相同版本的 npm。

最后，有 Heroku 构建步骤，我在您的主 package.json 文件中没有看到。请记住，我在这里写的内容不适用于您的 create-react-app package.json 文件，因为当您部署到 Heroku 时，它会被吹走。 create-react-app 将在 Heroku 中不复存在。

因此，对于 Heroku 特定的操作，您需要将类似这样的内容添加到您的主 package.json 文件中：

"heroku-postbuild":
      "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"

关于您在服务器中添加的内容，请尝试这样编写：

if (process.env.NODE_ENV === 'production') {
  // Express will serve up production assets
  // like main.js or main.css
  app.use(express.static('client/build'));

  // Express will serve up the index.html file if
  // it doesnt recognize the route
  const path = require('path');
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'client', 'build', 'index.html'));
  });
}

另外，我假设这是在您的主 index.js 文件中，您还应该在文件底部有这两行代码：

const PORT = process.env.PORT || 5000;
app.listen(PORT);