Angular 18 SSR部署Firebase遇后端未部署问题求解决方案

核心思路 #

Firebase Hosting的SSR必须依赖Cloud Functions运行服务器端代码，但无需重新搭建独立Node项目，只需将Angular打包后的server代码整合到functions目录并完成关联配置即可。

具体操作步骤 #

1. 初始化Firebase Functions（未初始化过的话）
   在项目根目录执行：

   firebase init functions
   

   选择JavaScript作为运行环境，按提示完成初始化流程。

2. 迁移打包后的server代码
   将dist/shone-halachot/server目录完整复制到functions目录下，确保最终路径为functions/dist/server（server.mjs需存在于该路径）。

3. 配置Functions入口文件
   修改functions/index.mjs（用ES模块匹配你的server.mjs），内容如下：

   import { initializeApp } from "firebase-admin/app";
   import { https } from "firebase-functions";
   // 导入Angular打包后的SSR应用
   import app from "./dist/server/server.mjs";
   
   initializeApp();
   // 导出SSR函数，供Hosting调用
   export const ssr = https.onRequest(app);
   

   同时修改functions/package.json，添加"type": "module"，确保支持ES模块导入语法。

4. 同步依赖包
   将项目根目录package.json中的dependencies（注意不是devDependencies）复制到functions/package.json的dependencies字段中，然后在functions目录执行：

   npm install
   

5. 修正firebase.json配置
   替换为以下配置，确保Hosting指向静态资源目录，并将所有请求转发到SSR函数：

   {
     "hosting": {
       "public": "dist/shone-halachot/browser",
       "ignore": [
         "firebase.json",
         "**/.*",
         "**/node_modules/**"
       ],
       "rewrites": [
         {
           "source": "**",
           "function": "ssr"
         }
       ]
     },
     "functions": {
       "source": "functions",
       "runtime": "nodejs18" // 请与本地运行的Node版本保持一致
     }
   }
   

6. 部署应用
   在项目根目录执行完整部署命令：

   firebase deploy --only hosting,functions
   

关键注意事项 #

• 确保Firebase Functions的Node runtime版本与本地运行版本一致，避免兼容性问题。
• 检查server.mjs的导出方式：如果Angular打包后是默认导出app，用import app from ...；如果是命名导出，用import { app } from ...。
• 无需将browser目录放到functions里，Hosting会直接读取根目录下的dist/shone-halachot/browser作为静态资源。

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