我在 Heroku 中部署后遇到此错误。应用在 Heroku、Post 和 Get 请求中工作正常,但是当我刷新页面时,Heroku 在 UI 中抛出此错误。 >
-- client
--- build
--- public
--- src
-- src
--- app.ts
--- server.ts
-- dist
-- .env
-- .gitignore
-- package.json
-- Procfile
我尝试了多种方法,但无法摆脱这个问题。
项目文件夹结构
import express from 'express'
import bodyParser from 'body-parser'
import mongo from 'connect-mongo'
import path from 'path'
import mongoose from 'mongoose'
import cors from 'cors'
import { MONGODB_UR } from './util/secrets'
import userRouter from './routers/Users'
const app = express()
const mongoUrl = MONGODB_URI;
(<any>mongoose).Promise = bluebird
mongoose
.connect(mongoUrl, {
useNewUrlParser: true,
useCreateIndex: true,
})
.then(() => {
console.log('database connected')
})
.catch((err: Error) => {
console.log(
'MongoDB connection error. Please make sure MongoDB is running. ' + err
)
process.exit(1)
})
app.set('port', process.env.PORT || 5000)
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
app.use(cors())
app.use('/api/v1/user', userRouter)
if (process.env.NODE_ENV === 'production') {
app.use(express.static(__dirname + '../dist/e-commerce-app'))
app.get('*', (req, res) => {
res.sendFile(path.join(__dirname + '../dist/e-commerce-app/index.html'));
})
}
export default app
app.ts
{
"name": "e-commerce-app",
"version": "0.1.0",
"scripts": {
"start": "npm run serve",
"build": "npm run build-ts && npm run copy-static-assets",
"serve": "node dist/server.js",
"watch-node": "nodemon dist/server.js",
"watch": "concurrently -k -p \"[{name}]\" -n \"TypeScript,Node\" -c \"yellow.bold,cyan.bold,green.bold\" \"npm run watch-ts\" \"npm run watch-node\"",
"test": "jest --forceExit --coverage --verbose false",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run watch\" \"npm run client\"",
"watch-test": "npm run test -- --watchAll",
"build-ts": "tsc",
"watch-ts": "tsc -w",
"copy-static-assets": "ts-node copyStaticAssets.ts",
"debug": "npm run build && npm run watch-debug",
"serve-debug": "nodemon --inspect dist/server.js",
"watch-debug": "concurrently -k -p \"[{name}]\" -n \"TypeScript,Node\" -c \"yellow.bold,cyan.bold,green.bold\" \"npm run watch-ts\" \"npm run serve-debug\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client"
},
"dependencies": {
"@sendgrid/mail": "^7.2.6",
"@types/bcrypt": "^3.0.0",
"@types/cors": "^2.8.7",
"@types/jsonwebtoken": "^8.3.7",
"async": "^3.2.0",
"bcrypt": "^5.0.0",
"bcrypt-nodejs": "^0.0.3",
"bluebird": "^3.7.2",
"body-parser": "^1.19.0",
"connect-mongo": "^3.2.0",
"cors": "^2.8.5",
"dotenv": "^8.2.0",
"express": "^4.17.1",
"express-flash": "0.0.2",
"express-session": "^1.17.0",
"jsonwebtoken": "^8.5.1",
"mongoose": "^5.9.2",
"mongoose-bcrypt": "^1.9.0",
"yup": "^0.29.3"
},
"devDependencies": {
"@types/async": "^3.0.8",
"@types/bcrypt-nodejs": "^0.0.30",
"@types/body-parser": "^1.19.0",
"@types/connect-mongo": "^3.1.3",
"@types/express-flash": "0.0.1",
"@types/mongoose": "^5.7.2",
"@types/node": "^12.12.28",
"nodemon": "^1.19.4",
"ts-node": "^8.6.2",
"typescript": "^3.9.7"
}
}
package.json
1.
if (process.env.NODE_ENV === 'production') {
app.use(express.static('client/build'))
app.get('/*', (req, res) => {
let url = path.join(__dirname + '../client/build', 'index.html');
if (!url.startsWith('/app/'))
url = url.substring(1);
res.sendFile(url);
});
}
2.
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'))
})
}
我的尝试:
{{1}}
从 gitignore 中删除了 Dist 和 build 文件夹。
任何帮助将不胜感激。
答案 0 :(得分:0)
更新。我找到了解决方案
app.ts 所在的级别低于 dist 文件夹,这就是它无法与 dist 连接的原因。
我把我的代码改成了这个,它奏效了。
app.use(express.static('client/build'))
app.get('*', function (req, res) {
const fullPath = path.join(__dirname, '../client', 'build', 'index.html')
res.sendFile(fullPath)
})