如何在Kubernetes中通过Helm覆盖已构建Angular的environment.ts

核心思路 #

Angular构建后的bundle是静态文件，但可以通过容器启动时动态替换占位符或Angular原生初始化钩子读取外部配置两种方式，实现用Helm传递的K8s环境变量动态配置应用，无需维护多份environment.ts或在构建阶段硬编码环境参数。

方案一：容器启动时替换bundle中的占位符 #

1. 改造environment.ts，使用占位符 #

将原本的环境配置改为占位符，构建时保留这些标记：

export const environment = {
  production: true,
  apiBaseUrl: '__API_BASE_URL__',
  envName: '__ENVIRONMENT__'
};

2. 构建镜像时保留占位符 #

执行常规构建命令，无需指定环境参数：

ng build --prod

3. 修改Dockerfile，添加启动替换脚本 #

创建start-nginx.sh脚本，在Nginx启动前替换bundle中的占位符为K8s环境变量值：

#!/bin/sh
# 匹配所有main开头的js文件（处理构建后的哈希文件名）
sed -i "s/__API_BASE_URL__/$API_BASE_URL/g" /usr/share/nginx/html/main*.js
sed -i "s/__ENVIRONMENT__/$ENVIRONMENT/g" /usr/share/nginx/html/main*.js
# 启动Nginx
nginx -g 'daemon off;'

更新Dockerfile，复制脚本并设置为启动命令：

# 构建阶段：用Node镜像编译Angular
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN ng build --prod

# 运行阶段：基于Nginx部署
FROM nginx:alpine
COPY --from=builder /app/dist/your-app-name /usr/share/nginx/html
COPY start-nginx.sh /usr/local/bin/
RUN chmod +x /usr/local/bin/start-nginx.sh
CMD ["start-nginx.sh"]

4. Helm Deployment中配置环境变量 #

在Helm的deployment.yaml模板里添加环境变量：

env:
  - name: ENVIRONMENT
    value: {{ .Values.app.environment }}
  - name: API_BASE_URL
    value: {{ .Values.app.apiBaseUrl }}

方案二：Angular原生APP_INITIALIZER读取外部配置 #

这种方法无需修改bundle文件，通过Angular初始化钩子加载外部配置文件，该文件由容器启动时生成。

1. 创建配置服务 #

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({ providedIn: 'root' })
export class ConfigService {
  private appConfig: any;

  constructor(private http: HttpClient) {}

  // 加载外部配置文件
  loadConfig(): Promise<void> {
    return this.http.get('/assets/config.json')
      .toPromise()
      .then(config => {
        this.appConfig = config;
      });
  }

  getConfig(key: string): any {
    return this.appConfig?.[key];
  }
}

2. 配置APP_INITIALIZER #

在app.module.ts中注册初始化钩子，确保应用启动前加载配置：

import { APP_INITIALIZER, NgModule } from '@angular/core';
import { ConfigService } from './config.service';

// 初始化工厂函数
export function initConfig(configService: ConfigService) {
  return () => configService.loadConfig();
}

@NgModule({
  // ...其他模块配置
  providers: [
    ConfigService,
    {
      provide: APP_INITIALIZER,
      useFactory: initConfig,
      deps: [ConfigService],
      multi: true
    }
  ]
})
export class AppModule {}

3. 容器启动时生成配置文件 #

修改start-nginx.sh，在Nginx启动前生成assets/config.json：

#!/bin/sh
# 生成动态配置文件
cat > /usr/share/nginx/html/assets/config.json <<EOF
{
  "envName": "$ENVIRONMENT",
  "apiBaseUrl": "$API_BASE_URL"
}
EOF
# 启动Nginx
nginx -g 'daemon off;'

4. Helm配置同方案一 #

在Deployment的env字段中传递环境变量即可。

两种方案对比 #

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