如何通过Jenkins和Docker在Angular应用中展示部署版本

我有一个调用FastAPI接口的Angular应用，用Jenkins构建Docker镜像并推送到服务器。当前UI版本是0.3，API版本是0.2，部署流程能正常跑，但不知道怎么把这两个版本号暴露出来让用户在界面上看到。我试着在Jenkinsfile里加环境变量，但不确定能不能生效。

现有Jenkins文件 #

Angular项目（UI版本0.3） #

pipeline {
    agent any
  stages {
    stage('Build') {
        steps {
          sh 'docker build -t server.firm.local/firm/proj.ui:0.3 -f ./build/Dockerfile .'
        }
    }
    stage('Push') {
       steps {
          sh 'docker push server.firm.local/firm/proj.ui:0.3'
      }
    }
  }
}

Python项目（API版本0.2） #

pipeline {
    agent any
    stages {
        stage('Build UI') {
            steps {
                build(job: 'PROJECT/develop')
            }
        }
        stage('Build base image') {
            steps {
                sh 'docker build -t py3_9_ubi8_ora:0.0.1 -f OS/Dockerfile .'
            }
        }
        stage('Build Project') {
            steps {
                sh 'export APP_VERSION=$APP_VERSION && docker build -t server.firm.local/firm/proj:0.2 -f build/Dockerfile .'
            }
        }
        stage('Push Project') {
            steps {
                sh 'docker push server.firm.local/firm/proj:0.2'
            }
        }
    }
}

尝试修改后的Python项目Jenkinsfile #

pipeline {
    agent any

    environment{
        APP_VERSION = '0.4'
    }

    stages {
        stage('Build UI') {
            steps {
                build(job: 'PROJECT/develop')
            }
        }
        stage('Build base image') {
            steps {
                sh 'docker build -t py3_9_ubi8_ora:0.0.1 -f OS/Dockerfile .'
            }
        }
        stage('Build Project') {
            steps {
                sh 'export APP_VERSION=$APP_VERSION && docker build -t server.firm.local/firm/proj:${APP_VERSION} -f build/Dockerfile .'
            }
        }
        stage('Push Project') {
            steps {
                sh 'docker push server.firm.local/firm/proj:${APP_VERSION}'
            }
        }
    }
}

要让用户看到版本号，需要分三步：Jenkins管理版本号、把版本号注入到应用里、应用展示版本号。

一、Jenkins端统一管理版本 #

1. 优化Angular项目Jenkinsfile #

给UI项目加环境变量，构建时把版本号写入Angular的环境配置文件：

pipeline {
    agent any
    environment {
        UI_VERSION = '0.3' // 后续可以改成动态版本，比如取Git标签或构建号
    }
    stages {
        stage('写入UI版本号') {
            steps {
                // 覆盖生产环境的配置文件，写入版本号
                sh "echo 'export const environment = { production: true, version: \"${UI_VERSION}\" };' > src/environments/environment.prod.ts"
            }
        }
        stage('构建镜像') {
            steps {
                sh 'ng build --configuration production'
                sh 'docker build -t server.firm.local/firm/proj.ui:${UI_VERSION} -f ./build/Dockerfile .'
            }
        }
        stage('推送镜像') {
            steps {
                sh 'docker push server.firm.local/firm/proj.ui:${UI_VERSION}'
            }
        }
    }
}

2. 优化Python项目Jenkinsfile #

你之前的环境变量设置是有效的，但可以更简洁，还能同步UI的版本号：

pipeline {
    agent any
    environment {
        API_VERSION = '0.2'
        UI_VERSION = '0.3' // 或者通过UI构建任务获取版本，避免硬编码
    }
    stages {
        stage('构建UI') {
            steps {
                // 如果UI项目的Jenkinsfile里输出了UI_VERSION变量，可以在这里捕获
                def uiBuild = build(job: 'PROJECT/develop', propagate: false)
                UI_VERSION = uiBuild.buildVariables.UI_VERSION
            }
        }
        stage('构建基础镜像') {
            steps {
                sh 'docker build -t py3_9_ubi8_ora:0.0.1 -f OS/Dockerfile .'
            }
        }
        stage('构建API镜像') {
            steps {
                // 直接用Jenkins的环境变量，不用额外export，同时传递给Docker构建参数
                sh 'docker build --build-arg API_VERSION=${API_VERSION} --build-arg UI_VERSION=${UI_VERSION} -t server.firm.local/firm/proj:${API_VERSION} -f build/Dockerfile .'
            }
        }
        stage('推送API镜像') {
            steps {
                sh 'docker push server.firm.local/firm/proj:${API_VERSION}'
            }
        }
    }
}

二、应用端展示版本号 #

1. Angular应用显示版本 #

修改任意组件（比如首页、 footer 或者设置页），读取环境变量里的版本号：

// app.component.ts
import { environment } from '../environments/environment';

@Component({
  selector: 'app-root',
  template: `
    <!-- 其他页面内容 -->
    <footer>当前UI版本：{{ version }}</footer>
  `
})
export class AppComponent {
  version = environment.version;
}

2. FastAPI暴露版本接口 #

在API里加一个获取版本的接口，同时保存UI版本号：

# main.py
from fastapi import FastAPI
import os

app = FastAPI()

# 从环境变量读取版本，Docker构建时通过--build-arg传入
API_VERSION = os.getenv("API_VERSION", "未知")
UI_VERSION = os.getenv("UI_VERSION", "未知")

@app.get("/version")
async def get_version_info():
    return {
        "api版本": API_VERSION,
        "ui版本": UI_VERSION
    }

然后修改API的Dockerfile，接收构建参数并设置环境变量：

# build/Dockerfile
FROM py3_9_ubi8_ora:0.0.1

# 接收Jenkins传递的构建参数
ARG API_VERSION
ARG UI_VERSION

# 设置环境变量，让FastAPI可以读取
ENV API_VERSION=${API_VERSION}
ENV UI_VERSION=${UI_VERSION}

# 复制应用代码和UI静态文件
COPY . /app
COPY --from=server.firm.local/firm/proj.ui:${UI_VERSION} /usr/share/nginx/html /app/ui

WORKDIR /app
CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "8000"]

三、验证是否生效 #

1. 跑Jenkins构建，检查镜像标签是否和设置的版本号一致
2. 启动API容器后，访问http://<api地址>/version，看返回的版本号是否正确
3. 打开Angular应用，看页面上显示的UI版本号是否正确

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