npm ERR！ 缺少腳本：在HEROKU中內置於REACT中

Question

我正在嘗試使用create-react-app在Heroku中部署一個項目，使用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大師。

這是日志。

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);