使用 Docker 在 Kubernetes 上部署时如何管理 Angular 应用程序中的环境变量？

Question

编译时配置有限制 在某些场景（例如 CI/CD 管道或容器化环境）中，每次环境发生变化时都需要重新构建应用程序，这可能会很不方便。那么，我们如何解决这个问题，用Docker在Kubernetes中设置环境变量呢？

对于生产构建，我运行命令

ng build --configuration production

，在此构建中，它包含 apiServer URL 和密钥，如果我使用浏览器开发人员工具，它会在前端公开。那么，我们如何安全地管理这些事情呢？

这是我的

environment.prod.ts

export const environment = {
  production: true,
  firebase: {
  apiKey: "",
  authDomain:"",
  databaseURL:"",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
  },
};

Answer 1

在使用 Kubernetes 和 Docker 部署的 Angular 应用程序中安全地管理环境变量需要运行时配置，而不是编译时配置。这种方法消除了每当环境变量发生变化时重建应用程序的需要，并防止在前端暴露敏感数据。

实现运行时配置的步骤：

从environment.prod.ts中删除敏感数据

// environment.prod.ts
export const environment = {
  production: true,
};

创建运行时配置文件，例如assets/config/config.json

{
  "firebaseApiKey": "",
  "firebaseAuthDomain": "",
  "firebaseDatabaseURL": "",
  "firebaseProjectId": "",
  "firebaseStorageBucket": "",
  "firebaseMessagingSenderId": "",
  "firebaseAppId": "",
  "firebaseMeasurementId": ""
}

在运行时获取配置：修改 main.ts 以在引导应用程序之前获取配置文件。

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

fetch('/assets/config/config.json')
  .then((response) => response.json())
  .then((config) => {
    (window as any).__env = config; // Attach config to the global window object
    if (environment.production) {
      enableProdMode();
    }
    platformBrowserDynamic()
      .bootstrapModule(AppModule)
      .catch((err) => console.error(err));
  });

访问应用程序中的配置变量：创建一个服务来访问环境变量。

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root',
})
export class ConfigService {
  getEnv(key: string): string {
    return (window as any).__env[key] || '';
  }
}

Kubernetes ConfigMap 集成：

apiVersion: v1
kind: ConfigMap
metadata:
  name: angular-config
data:
  config.json: |
    {
      "firebaseApiKey": "your-key",
      "firebaseAuthDomain": "your-domain",
      "firebaseDatabaseURL": "your-url",
      "firebaseProjectId": "your-id",
      "firebaseStorageBucket": "your-bucket",
      "firebaseMessagingSenderId": "your-sender-id",
      "firebaseAppId": "your-app-id",
      "firebaseMeasurementId": "your-measurement-id"
    }

将ConfigMap注入Docker容器：将ConfigMap挂载到容器中的assets/config目录下。

volumeMounts:
  - name: config-volume
    mountPath: /usr/share/nginx/html/assets/config
    subPath: config.json
volumes:
  - name: config-volume
    configMap:
      name: angular-config