Heroku部署MERN项目遇404：无法找到index.html文件求助

问题根源 #

Heroku日志报错ENOENT: no such file or directory, stat '/app/backend/frontend/build/index.html'，核心原因是后端代码里的静态文件路径错误：__dirname指向backend文件夹目录，直接拼接/frontend/build会生成backend/frontend/build的无效路径，而实际build文件夹位于项目根目录下的frontend文件夹内，二者路径不匹配。

解决方案 #

1. 修正server.js中的路径配置 #

将静态文件和通配路由的路径修改为从backend目录回退到项目根目录，再定位到frontend/build：

const path = require('path');

// 修正静态资源托管路径
app.use(express.static(path.join(__dirname, '../frontend/build')));

// 修正通配路由的HTML文件路径
app.get('*', (req,res) => {
  res.sendFile(path.join(__dirname, '../frontend/build/index.html'));
})

2. 检查.gitignore配置 #

确保.gitignore文件未忽略frontend/build文件夹，否则Heroku无法获取构建后的静态资源。如果存在build/的忽略规则，修改为：

# 仅排除非frontend目录下的build文件夹
!frontend/build

3. 优化Heroku构建配置 #

• 确认根目录package.json的build脚本可正常执行：

  "scripts": {
      "build": "cd backend && npm install && cd ../frontend && npm install && npm run build",
      "start": "node backend/server.js"
  }
  

• 添加Node.js版本指定（可选但推荐），避免Heroku使用不兼容版本：

  "engines": {
      "node": "16.x",
      "npm": "8.x"
  }
  

4. 重新部署验证 #

1. 提交代码修改：

   git add .
   git commit -m "fix: correct static file path for heroku deployment"
   

2. 推送到Heroku：

   git push heroku master
   

3. 实时查看日志确认无报错：

   heroku logs --tail
   

内容的提问来源于stack exchange，提问作者Krishnadev. V