Question

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

我所做的是：

在React中运行构建，
提交，
使用heroku create -b https://github.com/mars/create-react-app-buildpack.git
我把它推给了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

根据您在此处分享的内容，我注意到了两点。您没有使用engines文件的package.json部分来指定要在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);

npm ERR！缺少脚本：在HEROKU中内置于REACT中

1 个答案: