如何让多环境部署的Angular应用展示构建版本及提交信息

当然可以实现！完全不需要手动查看构建文件，我们可以通过Jenkins流水线把构建元信息自动注入到Angular应用中，让应用自己展示这些关键验证信息。下面是具体的实现思路和步骤：

1. 在Jenkins流水线中收集构建元信息 #

首先，我们需要在Jenkins流水线里获取所有需要的构建和Git提交信息，这些信息可以通过Jenkins内置变量或Git命令直接获取：

• 构建版本号：Jenkins内置变量 ${BUILD_NUMBER}
• 构建时间：可以自定义格式，比如用 date +"%Y-%m-%d %H:%M:%S" 生成可读时间
• Git分支名：git rev-parse --abbrev-ref HEAD
• 最后提交人：git log -1 --pretty=format:'%an'
• 最后提交内容：git log -1 --pretty=format:'%s'
• 提交哈希值（可选）：git rev-parse --short HEAD

示例Jenkinsfile片段：

pipeline {
  agent any
  stages {
    stage('Collect Build Metadata') {
      steps {
        script {
          // 收集Git相关信息
          env.GIT_BRANCH = sh(script: 'git rev-parse --abbrev-ref HEAD', returnStdout: true).trim()
          env.GIT_COMMITTER = sh(script: 'git log -1 --pretty=format:%an', returnStdout: true).trim()
          // 转义提交信息中的引号，避免JSON或变量解析错误
          env.GIT_MESSAGE = sh(script: "git log -1 --pretty=format:%s | sed 's/\"/\\\\\"/g'", returnStdout: true).trim()
          // 自定义构建时间格式
          env.BUILD_TIMESTAMP = sh(script: 'date +"%Y-%m-%d %H:%M:%S"', returnStdout: true).trim()
        }
      }
    }
    stage('Build Angular App') {
      steps {
        // 根据部署环境选择对应的configuration（dev/qa/staging/prod）
        sh 'ng build --configuration=${TARGET_ENV} --define=VERSION=${BUILD_NUMBER} --define=BUILD_DATE=${BUILD_TIMESTAMP} --define=GIT_BRANCH=${GIT_BRANCH} --define=GIT_COMMITTER=${GIT_COMMITTER} --define=GIT_MESSAGE=${GIT_MESSAGE}'
      }
    }
  }
}

2. 把元信息注入Angular应用 #

我们有两种常用的方式把这些信息注入到Angular应用中：

方式一：利用Angular环境变量 #

在Angular的环境文件（比如 src/environments/environment.ts 和对应环境的 environment.prod.ts 等）中预先声明这些变量：

export const environment = {
  production: false,
  version: '',
  buildDate: '',
  gitBranch: '',
  gitCommitter: '',
  gitMessage: ''
};

执行Jenkins里的ng build命令时，--define参数会自动替换这些环境变量的值，构建完成后这些信息就会被打包到应用的代码中。

方式二：生成独立的version.json文件 #

如果不想修改环境文件，可以在Jenkins流水线中生成一个静态的version.json文件，放到Angular的assets目录下：

// 在Jenkins的Build阶段之前添加该步骤
sh '''echo '{
  "version": "'${BUILD_NUMBER}'",
  "buildDate": "'${BUILD_TIMESTAMP}'",
  "gitBranch": "'${GIT_BRANCH}'",
  "gitCommitter": "'${GIT_COMMITTER}'",
  "gitMessage": "'${GIT_MESSAGE}'"
}' > src/assets/version.json'''

构建时这个文件会被自动打包到dist目录中，应用可以通过HTTP请求读取它。

3. 在Angular应用中展示信息 #

现在只需要在应用的某个组件（比如首页 footer 或者专门的“构建信息”页面）中展示这些信息即可：

方式一：使用环境变量 #

import { Component } from '@angular/core';
import { environment } from '../environments/environment';

@Component({
  selector: 'app-build-info',
  template: `
    <div class="build-info-card">
      <h4>构建验证信息</h4>
      <ul>
        <li>构建版本：*{{ environment.version }}*</li>
        <li>构建时间：{{ environment.buildDate }}</li>
        <li>分支：{{ environment.gitBranch }}</li>
        <li>最后提交人：{{ environment.gitCommitter }}</li>
        <li>提交内容：{{ environment.gitMessage }}</li>
      </ul>
    </div>
  `,
  styles: [`
    .build-info-card {
      margin: 20px;
      padding: 15px;
      border: 1px solid #eee;
      border-radius: 4px;
      background-color: #f9f9f9;
    }
  `]
})
export class BuildInfoComponent {
  environment = environment;
}

方式二：读取version.json文件 #

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';

interface VersionInfo {
  version: string;
  buildDate: string;
  gitBranch: string;
  gitCommitter: string;
  gitMessage: string;
}

@Component({
  selector: 'app-build-info',
  template: `
    <div class="build-info-card" *ngIf="versionInfo">
      <h4>构建验证信息</h4>
      <ul>
        <li>构建版本：*{{ versionInfo.version }}*</li>
        <li>构建时间：{{ versionInfo.buildDate }}</li>
        <li>分支：{{ versionInfo.gitBranch }}</li>
        <li>最后提交人：{{ versionInfo.gitCommitter }}</li>
        <li>提交内容：{{ versionInfo.gitMessage }}</li>
      </ul>
    </div>
  `
})
export class BuildInfoComponent implements OnInit {
  versionInfo?: VersionInfo;

  constructor(private http: HttpClient) {}

  ngOnInit(): void {
    this.http.get<VersionInfo>('/assets/version.json').subscribe(info => {
      this.versionInfo = info;
    });
  }
}

4. 注意事项 #

• 特殊字符处理：Git提交信息中可能包含引号、换行等特殊字符，一定要在Jenkins里转义（比如用sed命令处理），避免生成的JSON或环境变量出现语法错误。
• 多环境适配：确保每个环境（dev/qa/staging/prod）的Angular配置都支持注入这些信息，比如在angular.json的configurations中统一配置构建参数。
• Jenkins权限：确保Jenkins运行节点有权限执行Git命令，并且能访问你的代码仓库。

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