如何将MERN栈Express服务器迁移到子目录并解决Heroku服务文件报错问题

• express.static API使用错误

  express.static 第一个入参要求传入静态资源的根目录路径，你传入了单个文件index.html，导致Express无法正确托管client/build目录下的css、js、图片等静态资源，仅能处理单文件请求。你本地开发时走的是/public目录的托管逻辑，没有触发这段prod专属的错误配置，所以本地运行正常。

• 相对路径可靠性不足

  你使用的../client/build是相对于Node进程工作目录的相对路径，虽然你在启动脚本中先cd到了server目录再启动服务，但不同环境下工作目录可能存在隐性差异，容易出现路径匹配失败的问题。

1. 先在server.js顶部引入Node内置的path模块，用于生成不受工作目录影响的绝对路径：

const path = require('path');

2. 替换原有的静态资源托管和全路径路由配置：

// 托管build目录下所有静态资源
app.use(express.static(path.join(__dirname, '../client/build')));

// 所有未匹配路由返回SPA入口文件
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '../client/build', 'index.html'));
});

在项目根目录执行npm start，模拟Heroku的启动逻辑，确认服务可以正常加载前端资源后再重新部署到Heroku即可。

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