Firebase Frameworks Hosting部署Express应用异常，首页显示404

以下是针对该问题的具体排查与解决步骤：

1. 确认server.js入口文件的正确性 #

• 首先检查web目录下是否存在server.js，你的package.json已指定main: "server.js"，这是Firebase托管识别Express后端的核心入口。
• 确保server.js使用ES模块语法（因package.json中type: "module"），且正确导出Express应用，同时处理所有路由（包括根路径/），示例代码如下：

  import express from 'express';
  import { dirname, join } from 'path';
  import { fileURLToPath } from 'url';
  
  const __dirname = dirname(fileURLToPath(import.meta.url));
  const app = express();
  
  // 托管整个dist/client目录（包含index.html和静态资源）
  app.use(express.static(join(__dirname, 'dist/client')));
  
  // 兜底处理所有路由，避免404
  app.get('*', (req, res) => {
    res.sendFile(join(__dirname, 'dist/client', 'index.html'));
  });
  
  export default app;
  

• 若为SSR应用，需确保entry-server.tsx的编译产物被正确引入到server.js中，处理服务端渲染逻辑。

2. 验证Firebase托管配置细节 #

• 检查firebase.json的hosting配置：可尝试添加明确的重写规则（部分场景下能解决自动识别后端的问题）：

  "hosting": {
    "source": "web",
    "frameworksBackend": {
      "region": "europe-west1"
    },
    "rewrites": [
      {
        "source": "**",
        "function": "server"
      }
    ]
  }
  

• 部署时留意日志，确认包含"Deploying to Cloud Functions"相关内容，说明后端正在部署；若缺失该日志，需检查server.js的位置与导出格式是否符合Firebase要求。

3. 检查构建产物与路径匹配 #

• 确认build:client执行后，dist/client目录下存在index.html文件，这是首页访问的核心文件；你的directories.serve设置为dist/client/assets，但Express需要托管整个dist/client目录才能访问到index.html。
• 本地构建后，手动检查dist/server目录是否有entry-server.tsx的编译产物，确保SSR服务端代码已正确生成。

4. 本地模拟环境测试 #

• 使用firebase emulators:start启动本地模拟器，访问http://localhost:5000（托管默认端口），若本地也出现404，说明问题出在代码或配置上，而非部署环节。
• 直接本地启动Express服务：在web目录下执行node server.js，访问对应端口验证后端逻辑是否正常。

5. 检查Firebase控制台状态 #

• 登录Firebase控制台，进入「托管」页面查看部署历史，确认是否有后端部署记录。
• 进入「Cloud Functions」页面，检查是否存在名为server的函数（Firebase托管会自动创建该函数运行Express后端），若函数不存在或状态异常，可查看函数日志排查错误。

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