reactjs - 在 React 应用程序 Pod 中无法访问 kubectl secret

Question

我试图避免，但实际上没有必要，为 React FE 设置特定的环境变量。但我正在研究社交身份验证，特别是 Azure AD，现在我确实有了它的用例。

我承认 AAD_TENANT_ID 和 AAD_CLIENT_ID 并不完全是“ secret ”或敏感信息，将在 JS 中进行编译，但我正在尝试这样做几个原因:

1. 我可以更轻松地管理 Key Vault 中的开发 key 和产品 key ...
2. 拥有独立于环境的代码(即 process.env.AAD_TENANT_ID 无论是开发还是生产都可以使用)。

但是这不起作用。

我遇到的问题是，尽管具有以下内容，但无法在 process.env 访问环境变量:

apiVersion: apps/v1
kind: Deployment
metadata:
  name: admin-v2-deployment-dev
  namespace: dev
spec:
  replicas: 1
  revisionHistoryLimit: 5
  selector:
    matchLabels:
      component: admin-v2
  template:
    metadata:
      labels:
        component: admin-v2
    spec:
      containers:
        - name: admin-v2
          image: admin-v2
          ports:
            - containerPort: 4001
          env:
            - name: AAD_CLIENT_ID
              valueFrom:
                secretKeyRef:
                  name: app-dev-secrets
                  key: AAD_CLIENT_ID
            - name: AAD_TENANT_ID
              valueFrom:
                secretKeyRef:
                  name: app-dev-secrets
                  key: AAD_TENANT_ID
---
apiVersion: v1
kind: Service
metadata:
  name: admin-v2-cluster-ip-service-dev
  namespace: dev
spec:
  type: ClusterIP
  selector:
    component: admin-v2
  ports:
    - port: 4001
      targetPort: 4001

当我在代码中的任何位置执行以下操作时，它会返回undefined:

console.log(process.env.AAD_CLIENT_ID);
console.log(process.env.AAD_TENANT_ID);

当我检查命名空间和 Pod 本身中的 secret 时，这些值肯定存在:

    Environment:
      AAD_CLIENT_ID:  <set to the key 'AAD_CLIENT_ID' in secret 'app-dev-secrets'>  Optional: false
      AAD_TENANT_ID:  <set to the key 'AAD_TENANT_ID' in secret 'app-dev-secrets'>  Optional: false

那么，应该如何将 kubectl secret 获取到 React Pods 中呢？

Answer 1

我猜您正在使用 React FE 的 create-react-app 应用程序。您必须确保您的环境变量以 REACT_APP_ 开头，否则它将在应用程序内被忽略。 根据create-react-app文档

Note: You must create custom environment variables beginning with REACT_APP_.
Any other variables except NODE_ENV will be ignored to avoid accidentally 
exposing a private key on the machine that could have the same name. 

来源 - https://create-react-app.dev/docs/adding-custom-environment-variables/