如何从Kubernetes读取Secrets并应用到Angular的environment.ts文件中

为什么直接用process.env.MY_SECRET不生效 #

Angular编译后生成的是静态前端资源，运行在浏览器环境中，而process.env是Node.js专属的环境变量API，浏览器无法识别该语法，因此直接使用会报错。

解决方案步骤 #

1. 将Kubernetes Secrets映射为容器环境变量 #

首先在K8s Deployment配置中，把目标Secret的密钥映射为容器的环境变量。示例Deployment配置片段：

apiVersion: apps/v1
kind: Deployment
metadata:
  name: your-angular-app
spec:
  template:
    spec:
      containers:
      - name: app-container
        image: your-angular-image:latest
        env:
        - name: MY_SECRET
          valueFrom:
            secretKeyRef:
              name: your-k8s-secret-name  # 你的K8s Secret名称
              key: client-secret          # Secret中存储密钥的键名

2. 在Angular中注入环境变量 #

有两种常用的实现方式：

方式一：通过模板文件替换生成环境配置

• 创建环境模板文件environment.template.ts：

export const environment = {
  production: true,
  oauthClientSecret: '${MY_SECRET}'
};

• 在Dockerfile中添加环境变量替换逻辑（以Nginx部署为例）：

FROM nginx:alpine

# 复制编译后的Angular资源
COPY dist/your-app-name /usr/share/nginx/html

# 添加替换脚本并赋予执行权限
COPY replace-env.sh /docker-entrypoint.d/
RUN chmod +x /docker-entrypoint.d/replace-env.sh

• 编写replace-env.sh脚本：

#!/bin/sh
# 替换模板中的占位符为容器环境变量
envsubst < /usr/share/nginx/html/environment.template.ts > /usr/share/nginx/html/environment.prod.ts

# 启动Nginx服务
exec nginx -g 'daemon off;'

• 构建镜像时确保模板文件被复制到dist目录，Angular应用直接导入environment.prod.ts即可使用密钥。

方式二：通过全局变量注入

• 在index.html中添加全局变量模板：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Your Angular App</title>
</head>
<body>
  <app-root></app-root>
  <script>
    window.appEnv = {
      oauthClientSecret: "${MY_SECRET}"
    };
  </script>
</body>
</html>

• 在Dockerfile中完成占位符替换：

FROM nginx:alpine
COPY dist/your-app-name /usr/share/nginx/html
RUN sed -i "s/\${MY_SECRET}/$MY_SECRET/g" /usr/share/nginx/html/index.html
CMD ["nginx", "-g", "daemon off;"]

• 在Angular环境文件中读取全局变量：

export const environment = {
  production: true,
  oauthClientSecret: (window as any).appEnv?.oauthClientSecret || ''
};

注意事项 #

前端代码中的密钥最终会暴露在浏览器中，若该密钥属于敏感信息，建议通过后端代理OAuth请求，由后端持有并使用密钥，前端仅与后端交互，避免直接暴露敏感数据。

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