如何从 React.js 应用程序访问 Kubernetes 容器环境变量？答案

【问题标题】：How to access Kubernetes container environment variables from React.js application?如何从 React.js 应用程序访问 Kubernetes 容器环境变量？
【发布时间】：2021-08-10 14:31:21
【问题描述】：

我有一个默认配置的 create-react-app。我在 .env 文件 中有一些 PORT 和 API 配置了

REACT_APP_PORT=3000

并通过 process.env.REACT_APP_PORT 使用内部应用程序。

我的服务器部署在 Kubernetes 上。有人可以解释如何配置我的 create-react-app 以使用 pod/containers 提供的环境变量吗？

我想通过 kubectl svc 给出的名称访问集群 IP

更新 1：

我有相反的情况，我不希望在 kubernetes pod 容器中配置我的前端环境变量，但想使用 pod 的环境变量

e.x CLUSTER_IP 和 CLUSTER_PORT，它们的名称由我的 react 应用程序中 pod 的 env 变量定义。

例如-

NAME TYPE CLUSTER-IP 

XYZ ClusterIP x.y.z.a

并希望在 react 应用中访问 XYZ 以指向集群 IP (x.y.z.a)

【问题讨论】：

您打算在开发模式下使用您的 React 应用程序吗？因为env 变量REACT_APP_PORT 仅由create-react-app 设置的开发脚本使用。尽管如此，这里是关于如何处理环境变量的 Kubernetes 文档的链接：kubernetes.io/docs/tasks/inject-data-application/…
是的，在开发模式下，也像你分享的文档中一样，如何访问EXAMPLE_SERVICE_PORT_8080_TCP_ADDR=""（react app中的pod env变量，因为react读取以REACT_APP开头的env变量）
这里是使用create-react-app时处理环境变量的链接。请记住，一旦构建了应用程序，您将无法使用环境变量。您只能在运行开发服务器时使用它们，因为它将环境变量值注入到 React 的代码中。
你能分享链接吗，你提到的是
抱歉，忘记粘贴了。这是：create-react-app.dev/docs/adding-custom-environment-variables

标签： reactjs kubernetes server environment-variables

【解决方案1】：

试试这个：

kubectl create configmap react-config --from-literal=REACT_APP_PORT=3000

然后：

     spec:
       containers:
       - name: create-react-app
         image: gcr.io/google-samples/node-hello:1.0
         envFrom:
         - configMapRef:
             name: react-config

现在您从 pod 的“外部”配置了您的环境

另请参阅文档：https://kubernetes.io/docs/tasks/configure-pod-container/configure-pod-configmap/#configure-all-key-value-pairs-in-a-configmap-as-container-environment-variables

【讨论】：

我有相反的情况，我不希望在 kubernetes pod 容器中配置我的前端环境变量，但希望使用 pod 的环境变量 ex CLUSTER_IP 和 CLUSTER_PORT ，它们的名称由 pod 的 env 定义我的反应应用程序中的变量。 E.x- NAME TYPE CLUSTER-IP XYZ ClusterIP x.y.z.a 并希望在 react 应用中访问 XYZ 以指向集群 IP (x.y.z.a)
嗯，如果您希望系统环境变量在您的反应应用程序中可用，那么它们必须通过“后端”提供，因为客户端代码无法访问系统变量 AFAIK

【解决方案2】：

使用 Pod 字段作为环境变量的值

apiVersion: v1
kind: Pod
metadata:
  name: dapi-envars-fieldref
spec:
  containers:
    - name: test-container
      image: k8s.gcr.io/busybox
      command: [ "sh", "-c"]
      args:
      - while true; do
          echo -en '\n';
          printenv MY_NODE_NAME MY_POD_NAME MY_POD_NAMESPACE;
          printenv MY_POD_IP MY_POD_SERVICE_ACCOUNT;
          sleep 10;
        done;
      env:
        - name: MY_NODE_NAME
          valueFrom:
            fieldRef:
              fieldPath: spec.nodeName
        - name: MY_POD_NAME
          valueFrom:
            fieldRef:
              fieldPath: metadata.name
        - name: MY_POD_NAMESPACE
          valueFrom:
            fieldRef:
              fieldPath: metadata.namespace
        - name: MY_POD_IP
          valueFrom:
            fieldRef:
              fieldPath: status.podIP
        - name: MY_POD_SERVICE_ACCOUNT
          valueFrom:
            fieldRef:
              fieldPath: spec.serviceAccountName
  restartPolicy: Never

https://kubernetes.io/docs/tasks/inject-data-application/_print/ 也许上面的例子会对你有所帮助。

【讨论】：

【解决方案3】：

尝试关注

     spec:
       containers:
       - name: create-react-app
         image: gcr.io/google-samples/node-hello:1.0
         env:
         - name: REACT_APP_PORT
           value: "3000"

【讨论】：

我想在我的 react-app 中使用 Pod 的 env 变量，我不想在 pod 的 .yaml 中配置我的 env。