React与Node.js全栈应用部署至Heroku后空白页及资源报错求助

控制台报出的Unexpected token '<'、manifest.json语法错误，本质是服务端无法正确定位静态资源目录，所有对js、json等静态文件的请求都被前端路由兜底逻辑拦截，返回了开头为<的index.html内容，浏览器尝试将HTML内容作为JS、JSON解析时就会触发对应语法错误。

1. 修正静态资源路径的拼接方式 #

当前静态资源托管的代码存在跨平台兼容bug：

// 错误写法：__dirname 与相对路径之间缺少路径分隔符，手拼字符串的方式在Linux环境下（Heroku运行环境）会生成非法路径
app.use(express.static(__dirname + '../client/build'));

上述代码拼接完成的路径会类似/app/server../client/build，属于不存在的非法路径，完全匹配不到真实的build静态资源目录。本地开发时Windows的路径解析容错性可能掩盖了这个错误，但Heroku的Linux环境会严格按照路径字符串做匹配，直接触发静态资源404。
修正为使用内置path模块做跨平台的可靠路径拼接：

// 先在服务端文件头部引入path模块
const path = require('path');
// 替换原来的静态资源托管代码
app.use(express.static(path.join(__dirname, '../client/build')));

2. 确保构建产物被推送到Heroku仓库 #

Create React App默认会在client目录的.gitignore配置中，将build目录加入忽略列表，本地构建生成的静态文件不会被纳入Git提交。如果推送到Heroku的代码里根本不存在client/build目录，服务端自然无法正常返回静态资源。
对应修正步骤：

• 检查client目录下的.gitignore文件，临时移除/build的忽略规则
• 执行强制提交命令，将构建产物加入Git追踪：git add -f client/build
• 重新推送代码到Heroku完成部署

3. 校验前端路由兜底逻辑 #

修正完静态资源路径后，确认兜底路由的写法不会错误拦截静态资源请求：

app.get('*', (req, res) => {
  // 同样使用path.join做路径拼接，避免硬编码路径错误
  res.sendFile(path.join(__dirname, '../client/build/index.html'));
});

内容的提问来源于stack exchange，提问作者Sarah Mohammēđ