问题描述
我正在开发一个 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中再次设置环境变量,并像在我的本地机器上一样配置变量。这立即解决了问题。