Heroku部署React Webpack应用完成但站点无内容显示求助

先别急，咱们一步步来排查——本地能正常跑但Heroku上没内容，大概率是环境配置、路径或者构建环节出了小问题：

1. 先看Heroku日志找线索 #

这是最直接的排查方式，先在本地终端跑这个命令，实时查看Heroku的运行日志：

heroku logs --tail

重点看有没有报错信息：比如找不到静态文件、端口绑定失败、webpack构建中断之类的，日志会直接告诉你哪里出了问题。

2. 确认postinstall脚本是否真的生效了 #

你已经加了postinstall，但得确保它在Heroku上顺利完成了webpack构建。首先检查你的package.json脚本是不是类似这样：

"scripts": {
  "start": "node server.js",
  "build": "webpack -p",
  "postinstall": "npm run build"
}

另外要注意：Heroku默认不会安装devDependencies里的包，如果webpack被你放在devDependencies里，构建就会失败。解决方法二选一：

• 把webpack、webpack-cli这类生产构建需要的依赖移到dependencies里
• 或者给Heroku设置环境变量，让它安装所有依赖：

heroku config:set NPM_CONFIG_PRODUCTION=false

（更推荐第一种，能减少部署包的大小）

3. 检查server.js的静态文件路径与端口配置 #

本地跑没问题，很可能是Heroku上的路径或端口不对：

• 端口必须用Heroku的动态端口：不能硬写8080，要改成process.env.PORT || 8080，Heroku会自动分配可用端口
• 静态目录路径要准确：确保express.static指向的是webpack输出的文件夹（比如dist），示例代码参考：

const express = require('express');
const path = require('path');
const app = express();

// 指向webpack构建后的静态文件目录
app.use(express.static(path.join(__dirname, 'dist')));

// 处理SPA的路由 fallback
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist', 'index.html'));
});

// 用Heroku分配的端口，本地 fallback 到8080
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`Server started on port ${PORT}`);
});

4. 检查webpack的publicPath配置 #

如果你的webpack配置里有publicPath，别写死本地地址（比如http://localhost:8080/），改成相对路径'/'或者空字符串，这样资源路径才能正确适配Heroku的域名。

5. 验证Heroku上的文件结构 #

可以直接登录Heroku的服务器查看文件：

heroku run bash

然后用ls或者tree命令看看有没有dist文件夹，里面有没有index.html和打包后的js/css文件。如果没有，说明构建环节出了问题，回到第一步看日志找原因。

6. 检查.gitignore文件 #

别不小心把dist/加到.gitignore里了！虽然postinstall会在Heroku上构建，但如果构建失败，服务器上就没有静态文件。保险起见，可以先本地构建好dist，确认.gitignore没排除它，或者确保postinstall能稳定生成dist文件。

先把这些步骤过一遍，基本能定位到问题所在～

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