如何为Firebase Hosting部署Angular SSR项目指定构建配置？

你可以通过以下几种方式让firebase deploy使用指定的Angular构建配置（比如staging）：

1. 直接在firebase.json中定义构建命令 #

Firebase的Web框架实验功能允许你在firebase.json的hosting配置里自定义构建命令，替代默认的自动构建逻辑。

修改你的firebase.json，添加build字段，明确指定带配置参数的Angular构建命令（包括SSR的server端构建）：

{
  "hosting": {
    "source": ".",
    "frameworksBackend": {
      "region": "us-central1" // 根据你的实际部署区域调整
    },
    "build": {
      "command": "ng build --configuration staging && ng run your-project-name:server:staging",
      "outputs": [
        "dist/your-project-name/browser",
        "dist/your-project-name/server"
      ]
    }
  }
}

• 把your-project-name替换成你的Angular项目实际名称
• outputs要和Angular SSR构建后的产物目录完全对应，确保Firebase能找到正确的静态文件和server端代码
• 之后运行firebase deploy就会自动执行你指定的staging配置构建流程

2. 通过环境变量动态切换构建配置 #

如果需要灵活切换不同配置，不想每次修改firebase.json，可以用环境变量传递构建参数：

步骤1：修改package.json的构建脚本 #

在package.json的scripts里添加一个通用构建命令，读取环境变量：

"scripts": {
  "build:firebase": "ng build --configuration ${FIREBASE_CONFIG:-production} && ng run your-project-name:server:${FIREBASE_CONFIG:-production}"
}

这里${FIREBASE_CONFIG:-production}表示：如果未设置环境变量，默认使用production配置。

步骤2：部署时指定环境变量 #

根据你的操作系统执行对应命令：

• Linux/macOS：

  FIREBASE_CONFIG=staging firebase deploy
  

• Windows（命令提示符）：

  set FIREBASE_CONFIG=staging && firebase deploy
  

• Windows（PowerShell）：

  $env:FIREBASE_CONFIG="staging"; firebase deploy
  

步骤3：更新firebase.json调用自定义脚本 #

让Firebase执行你在package.json里定义的脚本：

{
  "hosting": {
    "source": ".",
    "frameworksBackend": {
      "region": "us-central1"
    },
    "build": {
      "command": "npm run build:firebase",
      "outputs": [
        "dist/your-project-name/browser",
        "dist/your-project-name/server"
      ]
    }
  }
}

注意事项 #

• 确保你的angular.json已经正确配置了staging构建配置（包括环境文件替换、编译选项等）——毕竟你之前已经能通过ng build --configuration staging正常构建
• 如果部署后仍有CORS问题，检查staging环境下的API域名是否已添加到对应的CORS白名单中

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