部署ReactJS/Node.js Express应用到Heroku时遭遇404错误求助

问题核心 #

日志报错Error: ENOENT: no such file or directory, stat '/src/App.js'，本质是生产环境下Express错误指向了未编译的前端源码文件，而非React构建后的静态资源包，同时路径配置完全不符合你的项目结构。

修复步骤 #

1. 修正Express生产环境资源配置 #

修改根目录index.js中的生产环境代码块，将静态资源指向前端build后的目录，同时让所有非API路由指向React的入口index.html（单页应用必需）：

if (process.env.NODE_ENV === "production") {
    const path = require('path');
    console.log("Current directory:", __dirname);
    // 指向app目录下构建完成的静态资源
    app.use(express.static(path.join(__dirname, 'app/build')));
    // 所有非API请求都返回React的index.html，保证路由正常
    app.get("*", (req, res) => {
      res.sendFile(path.resolve(__dirname, 'app/build', 'index.html'));
    });
}

2. 确认前端build脚本有效性 #

确保app目录下的package.json包含正确的构建脚本（Create React App默认自带）：

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  // 其他脚本...
}

3. 清理无效配置 #

根目录package.json中的proxy字段仅在本地开发环境生效，生产环境无需保留，可直接删除：

// 删除此行
"proxy": "http://localhost:4000/",

4. 验证现有正确配置 #

当前的Procfile和heroku-postbuild命令无需修改，是正确的：

• Procfile：web: node index.js
• heroku-postbuild：npm install --prefix app && npm run build --prefix app

额外验证 #

部署前可本地模拟生产环境测试：运行NODE_ENV=production node index.js，访问http://localhost:4000确认页面正常加载。

内容的提问来源于stack exchange，提问作者Ben Audidier