微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Heroku - 404 错误:ENOENT:没有这样的文件或目录,stat '/app/dist../client/build/index.html'

如何解决Heroku - 404 错误:ENOENT:没有这样的文件或目录,stat '/app/dist../client/build/index.html'

我在 Heroku 中部署后遇到此错误。应用在 HerokuPostGet 请求中工作正常,但是当我刷新页面时,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,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('/*',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('*',res) => {
    res.sendFile(path.resolve(__dirname,'client','build','index.html'))
  })
}

我的尝试:

{{1}}

从 gitignore 中删除dist 和 build 文件夹。
任何帮助将不胜感激。

解决方法

更新。我找到了解决方案
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)
})

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。