Express应用根路由无法返回index.html文件问题求助

我用Express搭建了Node服务器，部署在Azure App Service上，要求通过server.js处理客户端内容。之前运行正常，调整文件结构后（把React客户端从client文件夹移到主目录，服务器API独立为单独应用）出现问题：直接访问根路由/时加载不出index.html，但访问其他路由（比如/login）或者通过页面按钮跳转回主页都正常。开发控制台无报错，目标目录也确认正确，但服务器似乎未匹配到根路由的处理逻辑。

生产环境相关代码：

if (process.env.NODE_ENV === 'production') {
  console.log('running');

  app.use(express.static(path.resolve(path.join(__dirname, 'build'))));
  // no matter what route is hit, send the index.html file
  app.get('*', (req, res) => {
    res.sendFile(path.resolve(path.join(__dirname, 'build', 'index.html')));
  });
} else {
  app.get('/', (req, res) => {
    res.send('API is running...');
  });
}

代码逻辑：生产环境下将build文件夹设为静态资源目录，用app.get('*')匹配所有路由返回index.html。试过/*、/等路由格式都无效（之前同部署用/*正常）。环境变量配置正确，启动时会打印running，但在app.get('*')内加日志发现：直接访问/时无日志输出，访问/login等路由则会打印日志并正常返回页面。

排查与解决思路 #

• 静态资源优先级冲突
  Express的express.static中间件会优先匹配静态文件，当访问/时，如果build目录下存在index.html，静态中间件会直接返回该文件，不会走到后续的app.get('*')路由。若此时静态文件路径错误或文件本身有问题，就会出现加载失败但无路由日志的情况。

可以先验证文件路径与存在性：

const fs = require('fs');
const buildPath = path.resolve(path.join(__dirname, 'build'));
const indexPath = path.join(buildPath, 'index.html');
console.log('Build目录路径:', buildPath);
console.log('index.html路径:', indexPath);
console.log('index.html是否存在:', fs.existsSync(indexPath));

若文件存在仍有问题，可修改静态中间件配置，强制不向下传递请求：

app.use(express.static(buildPath, { fallthrough: false }));

fallthrough: false会让静态中间件在找不到文件时直接返回404，明确问题出在静态文件还是路由匹配环节。

• Azure App Service默认文档干扰
  Azure App Service自带默认文档配置，会优先寻找index.html、default.html等文件，可能绕开了Express路由处理。可在Azure门户检查：

  1. 进入目标App Service，选择「配置」→「默认文档」
  2. 确保index.html在列表顶部，或暂时移除默认文档，让Express完全接管路由。

• 路由定义顺序错误
  如果代码中还有其他路由（如API路由）定义在静态资源配置之前，可能拦截根路由请求。需确保静态资源配置和app.get('*')是最后定义的：

// 先定义所有API路由
app.use('/api', apiRoutes);

// 再处理静态资源与SPA路由
if (process.env.NODE_ENV === 'production') {
  app.use(express.static(buildPath));
  app.get('*', (req, res) => {
    res.sendFile(indexPath);
  });
}

• 缓存导致的旧代码残留
  Azure App Service可能缓存了静态资源，导致修改后的代码未生效。可尝试：
  • 在Azure门户重启应用服务
  • 部署时给静态资源文件名添加哈希（缓存破坏策略）
  • 访问时强制刷新页面（Ctrl+F5）

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