MERN 应用程序在本地运行，但在部署到 Heroku 时得到 503

如何解决MERN 应用程序在本地运行，但在部署到 Heroku 时得到 503

我正在开发一个 MERN 应用程序，大功告成，剩下要做的就是部署它。当我在本地运行该应用程序时，它运行良好，但我部署到 Heroku 时，在浏览器控制台中出现以下错误：

frozen-basin-00083.herokuapp.com/:1 Failed to load resource: the server responded with a status of 503 (Service Unavailable)
/favicon.ico:1 Failed to load resource: the server responded with a status of 503 (Service Unavailable)

Heroku logs show the following:

2021-01-12T16:35:14.000000+00:00 app[api]: Build succeeded

2021-01-12T16:35:25.312880+00:00 heroku[web.1]: Starting process with command `npm start`

2021-01-12T16:35:30.220170+00:00 app[web.1]:

2021-01-12T16:35:30.220351+00:00 app[web.1]: > budget-app@1.0.0 start /app

2021-01-12T16:35:30.220352+00:00 app[web.1]: > node server.js

2021-01-12T16:35:30.220356+00:00 app[web.1]:

2021-01-12T16:35:32.450275+00:00 app[web.1]: Server is running on port 7834

2021-01-12T16:35:32.457602+00:00 app[web.1]: Error: The `uri` parameter to `openUri()` must be a string,got "undefined". Make sure the first parameter to `mongoose.connect()` or `mongoose.createConnection()` is a string.

2021-01-12T16:35:32.532983+00:00 app[web.1]: npm ERR! code ELIFECYCLE

2021-01-12T16:35:32.533749+00:00 app[web.1]: npm ERR! errno 1


2021-01-12T16:35:32.553311+00:00 app[web.1]: npm ERR! budget-app@1.0.0 start: `node server.js`

2021-01-12T16:35:32.553624+00:00 app[web.1]: npm ERR! Exit status 1

2021-01-12T16:35:32.553937+00:00 app[web.1]: npm ERR!

2021-01-12T16:35:32.554191+00:00 app[web.1]: npm ERR! Failed at the budget-app@1.0.0 start script.

2021-01-12T16:35:32.554488+00:00 app[web.1]: npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

2021-01-12T16:35:33.032396+00:00 app[web.1]:

2021-01-12T16:35:33.036236+00:00 app[web.1]: npm ERR! A complete log of this run can be found in:

2021-01-12T16:35:33.036435+00:00 app[web.1]: npm ERR!     /app/.npm/_logs/2021-01-12T16_35_32_555Z-debug.log

2021-01-12T16:35:33.119008+00:00 heroku[web.1]: Process exited with status 1

2021-01-12T16:35:33.187983+00:00 heroku[web.1]: State changed from starting to crashed

2021-01-12T16:35:37.653703+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=frozen-basin-00083.herokuapp.com request_id=8403a766-1141-47b9-8fa3-79d77bbf5d01 fwd="208.104.192.108" dyno= connect= service= status=503 bytes= protocol=https

2021-01-12T16:35:39.026779+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=frozen-basin-00083.herokuapp.com request_id=50f48bcf-4534-450d-825d-1b9e91d7ad44 fwd="208.104.192.108" dyno= connect= service= status=503 bytes= protocol=https

2021-01-12T16:38:29.709828+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=frozen-basin-00083.herokuapp.com request_id=ca7f559f-2125-48b2-a22f-9f3180acb70b fwd="208.104.192.108" dyno= connect= service= status=503 bytes= protocol=https

2021-01-12T16:38:30.395524+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=frozen-basin-00083.herokuapp.com request_id=d0937812-09be-49df-8138-564ee7bbfce0 fwd="208.104.192.108" dyno= connect= service= status=503 bytes= protocol=https

2021-01-12T16:42:35.305633+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/" host=frozen-basin-00083.herokuapp.com request_id=3d35bf8c-5c7f-441c-817a-6e15581d3bdc fwd="208.104.192.108" dyno= connect= service= status=503 bytes= protocol=https

2021-01-12T16:42:35.923358+00:00 heroku[router]: at=error code=H10 desc="App crashed" method=GET path="/favicon.ico" host=frozen-basin-00083.herokuapp.com request_id=cd050371-fb57-49b5-93f0-05a928a5fe77 fwd="208.104.192.108" dyno= connect= service= status=503 bytes= protocol=https

最初我认为可能是由于控制台错误，favicon 有问题。有一次我尝试使用我自己的图标，所以我删除了它的 favicon 和 HTML 标签。我看到了错误，把它加回来，没有任何改变。我还看到 heroku 日志中存在猫鼬错误，但是在本地运行 npm start 时，它可以很好地连接数据库。当我在本地运行应用程序时，一切都应该是这样，我只是在部署时遇到这些问题。

这是服务器的 package.json：

{
  "name": "budget-app","version": "1.0.0","description": "back end for budget tool","main": "server.js","scripts": {
    "start": "node server.js","server": "nodemon server.js","client": "npm start --prefix client","dev": "concurrently \"npm run server\" \"npm run client\"","heroku-postbuild": "NPM_CONfig_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
  },"author": "Evan Barton","license": "MIT","dependencies": {
    "colors": "^1.4.0","dotenv": "^8.2.0","express": "^4.17.1","mongoose": "^5.11.11","morgan": "^1.10.0","node": "^15.4.0"
  },"devDependencies": {
    "concurrently": "^5.3.0","nodemon": "^2.0.7"
  }
}

这是客户端的 package.json：

{
  "name": "budget-app","version": "0.1.0","private": true,"dependencies": {
    "@testing-library/jest-dom": "^5.11.8","@testing-library/react": "^11.2.3","@testing-library/user-event": "^12.6.0","axios": "^0.21.1","react": "^17.0.1","react-dom": "^17.0.1","react-scripts": "4.0.1","shortid": "^2.2.16","web-vitals": "^0.2.4"
  },"scripts": {
    "start": "react-scripts start","build": "react-scripts build","test": "react-scripts test","eject": "react-scripts eject"
  },"eslintConfig": {
    "extends": [
      "react-app","react-app/jest"
    ]
  },"browserslist": {
    "production": [
      ">0.2%","not dead","not op_mini all"
    ],"development": [
      "last 1 chrome version","last 1 firefox version","last 1 safari version"
    ]
  },"proxy": "http://localhost:5000"
}

这是 server.js 文件：

require('dotenv').config()
const path  = require('path')
const express = require('express')
const colors = require('colors')
const morgan = require('morgan')
const connectDB = require('./config/db-config')

connectDB()

const app = express()

app.use(express.json())

const transactionsRouter = require('./routes/transactions-router')

app.use('/api/transactions',transactionsRouter)

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

    app.get('*',(req,res) => {
        res.sendFile(path.resolve(__dirname,'client','build','index.html'))
    })

    // app.use('*',express.static(path.join(__dirname,"client","build")))
}

const PORT = process.env.PORT || 5000

app.get('/',res) => res.send('Hello'))

app.listen(PORT,console.log(`Server is running on port ${PORT}`.blue.bold))

数据库配置：

const mongoose = require('mongoose')

const connectDB = async () => {
    try {
        const conn = await mongoose.connect(process.env.MONGO_URI,{
            useNewUrlParser: true,useCreateIndex: true,useUnifiedTopology: true
        })

        console.log(`MongoDB connected: ${conn.connection.host}`.cyan.underline.bold)
    } catch(err) {
        console.log(`Error: ${err.message}`.red)
        process.exit(1)
    }
}

module.exports = connectDB

解决方法

问题是环境变量。它在我的本地机器上工作的原因是因为 env 文件，但是当我部署到 Heroku 时，env 文件被 gitignored。所以我不得不通过设置> config vars在Heroku中再次设置环境变量，并像在我的本地机器上一样配置变量。这立即解决了问题。