如何在Vercel上配置Angular 17 SSR项目的多环境构建？

1. 确认Angular项目的环境构建配置 #

先检查angular.json中的构建配置，确保development环境已正确关联environment.dev.ts，并配置对应的SSR构建参数：

"architect": {
  "build": {
    "configurations": {
      "production": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.prod.ts"
          }
        ],
        "optimization": true,
        "sourceMap": false
        // 其他生产环境配置
      },
      "development": {
        "fileReplacements": [
          {
            "replace": "src/environments/environment.ts",
            "with": "src/environments/environment.dev.ts"
          }
        ],
        "optimization": false,
        "sourceMap": true,
        "extractLicenses": false
        // 其他开发环境配置
      }
    }
  },
  "serve-ssr": {
    "configurations": {
      "production": {
        "browserTarget": "your-project-name:build:production",
        "serverTarget": "your-project-name:server:production"
      },
      "development": {
        "browserTarget": "your-project-name:build:development",
        "serverTarget": "your-project-name:server:development"
      }
    }
  }
}

将上述代码中的your-project-name替换为你实际的Angular项目名称。

2. 配置Vercel分支构建规则 #

有两种方式可以实现分支专属构建逻辑，选其一即可：

方式一：通过Vercel控制台配置

1. 进入你的Vercel项目后台，点击左侧Settings -> Git
2. 在Branch Configuration区域点击Add Rule
3. 分支名填写develop，构建命令输入：

   ng build --configuration development && ng run your-project-name:server:development
   

4. 保存规则后，推送代码到develop分支时，Vercel会自动使用该命令构建开发环境。

方式二：通过vercel.json配置文件

在项目根目录创建或修改vercel.json，添加分支专属构建命令：

{
  "buildCommand": "ng build --configuration production && ng run your-project-name:server:production",
  "routes": [
    {
      "src": "/(.*)",
      "dest": "dist/your-project-name/browser/$1"
    }
  ],
  "functions": {
    "dist/your-project-name/server/main.js": {
      "runtime": "@vercel/node@3"
    }
  },
  "git": {
    "jobs": [
      {
        "src": "develop",
        "buildCommand": "ng build --configuration development && ng run your-project-name:server:development"
      }
    ]
  }
}

buildCommand为默认的生产环境构建命令，git.jobs中针对develop分支指定了开发环境构建逻辑，同样替换your-project-name为实际项目名。

3. （可选）简化构建命令 #

在package.json的scripts中添加SSR构建脚本，让命令更简洁：

"scripts": {
  "build:ssr:prod": "ng build --configuration production && ng run your-project-name:server:production",
  "build:ssr:dev": "ng build --configuration development && ng run your-project-name:server:development"
}

之后在Vercel的构建命令中就可以直接写npm run build:ssr:prod或npm run build:ssr:dev。

4. 验证配置 #

推送代码到develop分支，查看Vercel构建日志，确认构建命令中使用了--configuration development，且日志中能看到environment.dev.ts被正确加载的记录。

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