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

时间:2021-01-07 12:32:25

标签: heroku mern

我在 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,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 文件夹。
任何帮助将不胜感激。

1 个答案:

答案 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)
})