无法弄清楚我的部署问题（MERN 应用到 Heroku）

Question

这是我尝试推送后的提示行：（有两个后端错误和一个客户端错误）

remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! suripanta@0.1.0 build: `react-scripts build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the suripanta@0.1.0 build 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!     /tmp/npmcache.tBESZ/_logs/2020-08-09T21_38_02_253Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! backend@1.0.0 build: `cd client && npm run build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the backend@1.0.0 build 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!     /tmp/npmcache.tBESZ/_logs/2020-08-09T21_38_02_269Z-debug.log
remote: npm ERR! code ELIFECYCLE
remote: npm ERR! errno 1
remote: npm ERR! backend@1.0.0 heroku-postbuild: `npm run install-client && npm run build`
remote: npm ERR! Exit status 1
remote: npm ERR!
remote: npm ERR! Failed at the backend@1.0.0 heroku-postbuild 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!     /tmp/npmcache.tBESZ/_logs/2020-08-09T21_38_02_286Z-debug.log
remote:
remote: -----> Build failed

这里是我的 package.json 每个：

客户：

{
  "name": "suripanta",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@material-ui/icons": "^4.9.1",
    
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "axios": "^0.19.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-scripts": "3.4.1"
    
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

支持（名为 index.js 的服务器）

{
  "name": "backend",
  "version": "1.0.0",
  "description": "Backend para las notas de mi sister",
  "main": "index.js",
  "scripts": {
    "start":"nodemon index.js",   
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "cd client && npm run build",
    "install-client":"cd client && npm install",
    "heroku-postbuild":"npm run install-client && npm run build"
  },
  "engines": {
    "node": "12.18.1",
    "npm": "6.14.5"
  },
  "author": "RichterBelmont DevStudio",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.19.0",
    "connect-multiparty": "^2.2.0",
    "express": "^4.17.1",
    "mongoose": "^5.9.25",
    "validator": "^13.1.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.4"
  }
}

还有来自后端的我的 index.js：

'use strict'

//cargo el mongoose
var mongoose=require('mongoose');
const mongodb_uri_atlas_cluster='mongodb+srv://xxxxx:xxxxx@clusterxxxxx.lw1xj.mongodb.net/<dbname>?retryWrites=true&w=majority';


mongoose.set('useFindAndModify',false);
mongoose.Promise=global.Promise;
var app=require('./App');
var port=process.env.port || 3900; //primer cambio



//conexión a mongodb


/*
mongoose.connect(mongodb_uri_atlas_cluster || 'mongodb://localhost:27017/suripanta_rest',{useNewUrlParser:true})
        .then(()=>{
            //acá ya me conecté a mongodb
            console.log("conexión a bd se ha realiazo bien! Me voy para arriba");

            //Crear servidor y escuchar peticiones http
            app.listen(3900,()=>{

                console.log('Servidor corriendo correctamente en http://localhost:'+port);

            })


})

*/




mongoose.connect(process.env.mongodb_uri_atlas_cluster || 'mongodb://localhost:27017/suripanta_rest',{useNewUrlParser:true})
        .then(()=>{
            //acá ya me conecté a mongodb
            console.log("conexión a bd se ha realiazo bien! Me voy para arriba");

            if(process.env.NODE_ENV== 'production'){
                app.use(express.static('client/build'));
            }

            //Crear servidor y escuchar peticiones http
            app.listen(3900,()=>{

                console.log('Servidor corriendo correctamente en http://localhost:'+port);

            })


})

我认为这是我缺少的一个愚蠢的细节。我是部署 mern 应用程序的新手，并且我遵循了不同的教程，因为没有太多关于如何使用 heroku 的信息。

提前致谢！！！

Answer 1

我的一个项目遇到了类似的问题，其中前端和后端都在同一个根目录下。以下是我的项目的组织方式：

myproject
    |----- client
    |        | ---- build
    |        | ---- package.json
    |----- server
    |        | ---- package.json
    |        | ---- index.js
    |----- index.js
    |----- package.json

我使用根文件夹下的index.js 为前端（build 文件夹）和server 文件夹中的服务器提供服务。除此之外，我还有三个不同的package.json 文件，一个用于前端，一个用于后端，一个用于整个项目。

为了让它在 Heroku 上运行。我必须在根文件夹下的package.json 中指定所有构建命令，特别是npm install 命令。

以下是以我的构建命令为例：

"scripts": {
    "start": "node index.js",
    "build": "cd client && npm install && npm run build && cd ../server && npm install"
  },

由于 Heroku 默认只会在根文件夹下执行npm install，所以客户端文件夹和服务器文件夹不会安装依赖。在上面的命令中，我可以让 Heroku 一个一个地执行&& 之间的命令，这样就不会丢失任何依赖项，它也知道如何为应用程序提供服务。你的构建命令可能看起来有点不同，但想法是一样的。

我的回购here FYR。