如何在Heroku上部署应用程序-ReactJS和ExpressJS

时间:2018-08-16 12:14:24

标签: node.js mongodb reactjs express heroku

我试图在Heroku上部署应用程序,但是当我打开应用程序https://site-web-france.herokuapp.com/时,它显示为:

Application error
An error occurred in the application and your page could not be served. If you are the application owner, check your logs for details. You can do this from the Heroku CLI with the command
Heroku logs --tail

我认为它在端口5000上运行服务器,但在端口3000上的客户端应用程序未运行。

MyProject / package.json:

{
  "name": "site-web-france",
  "version": "1.0.0",
  "scripts": {
    "client": "cd client && yarn start",
    "server": "nodemon server.js",
    "dev": "concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"",
    "dev:server": "cd client && yarn build && cd .. && yarn start",
    "start": "node server.js",
    "heroku-postbuild": "cd client && npm install && npm install --only=dev --no-shrinkwrap && npm run build"
  },
  "dependencies": {
    "body-parser": "^1.18.3",
    "express": "^4.16.3",
    "mongodb": "^3.1.1",
    "mongoose": "^5.2.6",
    "react-scripts": "^1.1.4"
  },
  "devDependencies": {
    "concurrently": "^3.5.0"
  }
}

MyProject / client / package.json:

{
  "name": "test",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@fortawesome/fontawesome-svg-core": "^1.2.0-14",
    "@fortawesome/free-solid-svg-icons": "^5.1.0-11",
    "@fortawesome/react-fontawesome": "0.1.0-11",
    "mongodb": "^3.1.1",
    "mongoose": "^5.2.7",
    "react": "^15.6.1",
    "react-bootstrap": "^0.31.3",
    "react-dom": "^15.6.1",
    "react-google-auth": "^0.4.1",
    "react-router-dom": "^4.2.2",
    "react-router-hash-link": "^1.2.0",
    "react-scripts": "1.0.13",
    "video-react": "^0.9.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  },
  "proxy": "http://localhost:5000/"
}

当我在本地启动Heroku时,我会看到:

MB-Pro:MyProjects admin$ heroku local
    [WARN] ENOENT: no such file or directory, open 'Procfile'
    [OKAY] package.json file found - trying 'npm start'
    [WARN] No ENV file found
    [WARN] ENOENT: no such file or directory, open 'Procfile'
    [OKAY] package.json file found - trying 'npm start'
    13:23:40 web.1   |  > site-web-france@1.0.0 start /Users/site-web-france/informatique/MyProjects
    13:23:40 web.1   |  > node server.js
    13:23:41 web.1   |  (node:79181) DeprecationWarning: current URL string parser is deprecated, and will be removed in a future version. To use the new parser, pass option { useNewUrlParser: true } to MongoClient.connect.
    13:23:41 web.1   |  Listening on port 5000
    13:23:42 web.1   |  { MongoError: Authentication failed.
    13:23:42 web.1   |      at /Users/site-web-france/informatique/MyProjects/node_modules/mongodb-core/lib/connection/pool.js:580:63
    13:23:42 web.1   |      at authenticateStragglers (/Users/site-web-france/informatique/MyProjects/node_modules/mongodb-core/lib/connection/pool.js:503:16)
    13:23:42 web.1   |      at Connection.messageHandler (/Users/site-web-france/informatique/MyProjects/node_modules/mongodb-core/lib/connection/pool.js:539:5)
    13:23:42 web.1   |      at emitMessageHandler (/Users/site-web-france/informatique/MyProjects/node_modules/mongodb-core/lib/connection/connection.js:309:10)
    13:23:42 web.1   |      at Socket.<anonymous> (/Users/site-web-france/informatique/MyProjects/node_modules/mongodb-core/lib/connection/connection.js:452:17)
    13:23:42 web.1   |      at Socket.emit (events.js:182:13)
    13:23:42 web.1   |      at addChunk (_stream_readable.js:283:12)
    13:23:42 web.1   |      at readableAddChunk (_stream_readable.js:264:11)
    13:23:42 web.1   |      at Socket.Readable.push (_stream_readable.js:219:10)
    13:23:42 web.1   |      at TCP.onread (net.js:639:20)
    13:23:42 web.1   |    name: 'MongoError',
    13:23:42 web.1   |    message: 'Authentication failed.',
    13:23:42 web.1   |    ok: 0,
    13:23:42 web.1   |    errmsg: 'Authentication failed.',
    13:23:42 web.1   |    code: 18,
    13:23:42 web.1   |    codeName: 'AuthenticationFailed',
    13:23:42 web.1   |    operationTime:
    13:23:42 web.1   |     Timestamp { _bsontype: 'Timestamp', low_: 9, high_: 1534418622 },
    13:23:42 web.1   |    '$clusterTime':
    13:23:42 web.1   |     { clusterTime:
    13:23:42 web.1   |        Timestamp { _bsontype: 'Timestamp', low_: 9, high_: 1534418622 },
    13:23:42 web.1   |       signature: { hash: [Binary], keyId: [Long] } },
    13:23:42 web.1   |    [Symbol(mongoErrorContextSymbol)]: {} }
    13:23:54 web.1   |  TypeError: Cannot read property 'collection' of undefined
    13:23:54 web.1   |      at app.get (/Users/site-web-france/informatique/MyProjects/server.js:95:18)
    13:23:54 web.1   |      at Layer.handle [as handle_request] (/Users/site-web-france/informatique/MyProjects/node_modules/express/lib/router/layer.js:95:5)
    13:23:54 web.1   |      at next (/Users/site-web-france/informatique/MyProjects/node_modules/express/lib/router/route.js:137:13)
    13:23:54 web.1   |      at Route.dispatch (/Users/site-web-france/informatique/MyProjects/node_modules/express/lib/router/route.js:112:3)
    13:23:54 web.1   |      at Layer.handle [as handle_request] (/Users/site-web-france/informatique/MyProjects/node_modules/express/lib/router/layer.js:95:5)
    13:23:54 web.1   |      at /Users/site-web-france/informatique/MyProjects/node_modules/express/lib/router/index.js:281:22
    13:23:54 web.1   |      at Function.process_params (/Users/site-web-france/informatique/MyProjects/node_modules/express/lib/router/index.js:335:12)
    13:23:54 web.1   |      at next (/Users/site-web-france/informatique/MyProjects/node_modules/express/lib/router/index.js:275:10)
    13:23:54 web.1   |      at urlencodedParser (/Users/site-web-france/informatique/MyProjects/node_modules/body-parser/lib/types/urlencoded.js:91:7)
    13:23:54 web.1   |      at Layer.handle [as handle_request] (/Users/site-web-france/informatique/MyProjects/node_modules/express/lib/router/layer.js:95:5)
    13:23:54 web.1   |      at trim_prefix (/Users/site-web-france/informatique/MyProjects/node_modules/express/lib/router/index.js:317:13)
    13:23:54 web.1   |      at /Users/site-web-france/informatique/MyProjects/node_modules/express/lib/router/index.js:284:7
    13:23:54 web.1   |      at Function.process_params (/Users/site-web-france/informatique/MyProjects/node_modules/express/lib/router/index.js:335:12)
    13:23:54 web.1   |      at next (/Users/site-web-france/informatique/MyProjects/node_modules/express/lib/router/index.js:275:10)
    13:23:54 web.1   |      at expressInit (/Users/site-web-france/informatique/MyProjects/node_modules/express/lib/middleware/init.js:40:5)
    13:23:54 web.1   |      at Layer.handle [as handle_request] (/Users/site-web-france/informatique/MyProjects/node_modules/express/lib/router/layer.js:95:5)
    ^C[WARN] Interrupted by User
    [DONE] Killing all processes with signal  SIGINT
    MB-Pro:MyProjects admin$ 13:30:19 web.1   Exited with exit code null

您知道为什么这行不通吗?需要做什么?

1 个答案:

答案 0 :(得分:0)

正如我在这里看到的,您有一个Node.js + Mongoose服务器应用程序和React客户端应用程序,因此您尝试在单个Heroku应用程序上同时运行。根据我的经验,我会说我无法以这种方式配置应用程序。如果您想浪费时间,请阅读this article about how to run two servers on a single Heroku dyno并尝试重现它。

最好的解决方案是将客户端和服务器部分分为两个单独的项目,并分别托管它们。

如果说到您的本地尝试,我发现您没有ENV文件,并且遇到过Mongoose身份验证错误。好像您有连接字符串undefined