Heroku部署React+Express+Node应用显示空白页build未执行问题求助

问题根源梳理 #

• server.js 逻辑与路径错误：全局的静态资源托管和路由匹配写在生产环境判断之前，优先级更高，生产环境的逻辑完全不会生效；同时生产环境下sendFile指向了frontend/public目录而非构建后的frontend/build目录，路径拼接也存在语法错误。
• 构建脚本执行异常：heroku-postbuild 执行失败导致frontend/build目录未生成。

修复步骤 #

1. 首先替换你的server.js相关代码为以下内容：

// 仅保留生产环境相关逻辑，删除之前重复的、路径错误的static和get配置
if(process.env.NODE_ENV === 'production'){ 
  // 托管构建后的静态资源
  app.use(express.static(path.join(__dirname, 'frontend/build')));
  // 所有请求返回build目录下的index.html
  app.get('*', (req, res)=>{ 
    res.sendFile(path.resolve(__dirname, 'frontend', 'build', 'index.html'));
  });
}

2. 修正根目录package.json的heroku-postbuild脚本，确保路径正确：

"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix frontend && npm run build --prefix frontend"

原脚本缺少--prefix frontend后缀，npm run build会默认在根目录执行而非frontend目录，自然不会生成前端构建产物。

3. 额外排查点：

• 确认你的项目根目录下存在frontend文件夹，且frontend内部有完整的React项目代码和对应的package.json文件
• 本地执行一次npm run heroku-postbuild，确认执行完成后frontend/build目录正常生成
• 重新提交代码到Heroku触发部署，部署完成后可通过heroku run bash进入实例确认frontend/build目录是否存在

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