如何在Firebase上部署Angular 17 SSR模式？部署故障求助

1. 确认项目构建结果 #

先确保 Angular SSR 项目构建完成，执行命令：

ng build --configuration production && ng run <你的项目名>:server:production

构建后 dist/<你的项目名> 下会生成 browser（前端静态资源）和 server（SSR 服务端代码）两个目录，这是部署的核心基础。

2. 修正 Firebase 初始化配置 #

重新执行 firebase init hosting，关键选项选择：

• 关联目标 Firebase 项目
• 托管目录指定为 dist/<你的项目名>/browser（静态资源存放目录）
• 单页应用选项选 N
• GitHub 自动部署选 N
• 其余选项按需选 Y

3. 配置 firebase.json #

修改配置文件，让动态请求转发到 SSR 云函数，同时保证静态资源 MIME 类型正确：

{
  "hosting": {
    "public": "dist/<你的项目名>/browser",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function": "ssr"
      }
    ]
  },
  "functions": [
    {
      "source": "dist/<你的项目名>/server",
      "codebase": "ssr",
      "ignore": [
        "node_modules",
        ".git",
        "firebase-debug.log",
        "firebase-debug.*.log"
      ],
      "runtime": "nodejs20"
    }
  ]
}

核心要点：

• public 指向 browser 目录，确保静态资源（如 polyfills.js）被 Firebase 正确识别 MIME 类型
• 重写规则将所有请求转发到 ssr 云函数，由服务端渲染返回内容
• 配置 functions 指向 server 目录，指定兼容 Angular 17 的 Node.js 运行时（推荐 nodejs20）

4. 执行部署 #

运行命令同时部署 SSR 云函数和托管资源：

firebase deploy --only functions:ssr,hosting

问题根源说明 #

• 之前指定托管目录为 server 错误：server 是服务端代码目录，无静态 index.html，导致页面找不到
• 直接重写到 index.server.html 错误：会让所有静态资源被当作 HTML 返回，触发 MIME 类型不匹配问题

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