Angular环境变量Docker运行时覆盖及令牌安全问题咨询

问题1：实现Docker运行时覆盖baseApiUrl #

Angular默认将环境配置打包进静态文件，无法在运行时修改。要实现运行时配置，核心思路是将配置从代码中剥离，放到独立的JSON文件，应用启动时动态加载，再通过Docker环境变量替换该文件内容。

步骤1：创建可动态替换的配置模板 #

在Angular项目的src/assets目录下创建config.json.template：

{
  "baseApiUrl": "${BASE_API_URL}",
  "authConfig": {
    "clientId": "${AUTH_CLIENT_ID}"
  }
}

步骤2：编写配置加载服务 #

创建ConfigService负责加载配置文件，确保应用启动前完成加载：

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

@Injectable({ providedIn: 'root' })
export class ConfigService {
  private config: Record<string, any> = {};

  constructor(private http: HttpClient) {}

  loadConfig(): Promise<void> {
    return this.http.get('/assets/config.json')
      .toPromise()
      .then(data => this.config = data as Record<string, any>);
  }

  get baseApiUrl(): string {
    return this.config.baseApiUrl;
  }

  get authClientId(): string {
    return this.config.authConfig?.clientId;
  }
}

步骤3：配置应用初始化钩子 #

在app.module.ts中注册APP_INITIALIZER，确保配置加载完成后再启动应用：

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

const initConfig = (configService: ConfigService) => () => configService.loadConfig();

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

步骤4：调整Dockerfile与启动脚本 #

修改Dockerfile，加入配置模板替换逻辑：

# 构建阶段
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
RUN npm run build --prod

# 运行阶段
FROM nginx:alpine
COPY --from=builder /app/dist/your-app-name /usr/share/nginx/html
COPY src/assets/config.json.template /usr/share/nginx/html/assets/
COPY entrypoint.sh /entrypoint.sh
RUN chmod +x /entrypoint.sh
ENTRYPOINT ["/entrypoint.sh"]
CMD ["nginx", "-g", "daemon off;"]

创建entrypoint.sh脚本，用环境变量替换模板内容：

#!/bin/sh
# 替换配置模板中的环境变量
envsubst < /usr/share/nginx/html/assets/config.json.template > /usr/share/nginx/html/assets/config.json
# 执行原CMD命令
exec "$@"

步骤5：运行时传递环境变量 #

启动Docker容器时，直接通过-e参数传递变量：

docker run -d -p 80:80 \
  -e BASE_API_URL=https://dev-api.example.com \
  -e AUTH_CLIENT_ID=your-dev-client-id \
  your-image-name:tag

问题2：敏感变量保护 #

核心原则：前端不应存储真正敏感的密钥 #

SPA的代码完全暴露给用户，因此绝对不能将后端API密钥、私有密钥等敏感信息放在前端配置中。针对认证client ID的处理分两种情况：

1. OAuth2 PKCE/隐式流程的client ID：这类client ID本身是公开信息（前端必须用它发起认证请求），无需加密，但要确保仅在可信域名下使用（通过Azure AD的应用注册配置允许的重定向URI）。
2. 真正敏感的变量：比如后端API的访问密钥，必须通过后端代理。前端请求后端接口，由后端携带敏感密钥调用第三方服务。

结合Azure流水线的敏感变量管理 #

• 在Azure Pipeline中创建变量组，将敏感变量（如生产环境的AUTH_CLIENT_ID）标记为"保密"。
• 部署阶段，将变量组中的变量作为环境变量传递给Docker容器（或Azure App Service的应用设置），无需在构建阶段注入，避免敏感信息被打包进镜像。

适配现有Azure流水线流程 #

1. 构建阶段：移除--build-arg ENVIRONMENT参数，构建通用镜像（不再区分dev/prod），推送到镜像仓库。
2. 部署阶段：根据目标环境（dev/prod）加载对应的变量组，将环境变量传递给容器，启动时自动替换配置文件。

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