Node/Express部署后页面显示数据库JSON而非index.html问题求助

核心原因 #

缺失静态资源托管与兜底路由配置，且路由注册顺序错误，触发部署环境的路由匹配规则冲突，本地开发时的默认服务逻辑掩盖了该问题。

修复步骤 #

• 调整路由注册顺序，app.listen必须放在所有中间件、路由定义完成之后，避免服务启动时路由未完成注册。
• 补充静态资源托管配置，放在所有路由定义最前方，指定前端产物存放目录，示例中假设index.html存放在项目根目录的public文件夹下：

const path = require('path');
// 放在所有路由定义之前
app.use(express.static(path.join(__dirname, 'public')));

• 补充根路径兜底路由，放在所有接口路由之后，避免直接访问根路径时匹配到异常接口规则：

// 放在所有接口路由最后
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

• 调整后的完整代码示例：

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

// 1. 静态资源托管中间件
app.use(express.static(path.join(__dirname, 'public')));

// 2. 业务接口路由
app.get('/api', (request, response) => {
    db.find({}, (err, data) => {
        response.json(data);
    });
});

// 3. 前端路由兜底
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

// 4. 最后启动服务监听
app.listen(3000, () => console.log('listening'));

• 部署环境反向代理规则校验
  若使用Nginx部署，需配置try_files规则，避免请求直接转发到Node服务而不走静态资源匹配：

location / {
  root /your/project/path/public;
  try_files $uri $uri/ /index.html;
}

location /api {
  proxy_pass http://localhost:3000;
}

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