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

Question

我有一个使用默认配置的create-react-app。

我在.env文件中配置了一些端口和API。

REACT_APP_PORT=3000

并且使用 process.env.REACT_APP_PORT 在应用内部中。

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

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

更新 1：

我有相反的情况，我不希望我的前端环境变量在 Kubernetes Pod 容器中进行配置，而是想使用 Pod 的环境变量，比如使用 CLUSTER_IP 和 CLUSTER_PORT，并将它们的名称定义为我的 React 应用程序中的 Pod 环境变量。

例如-

NAME TYPE CLUSTER-IP 

XYZ ClusterIP x.y.z.a

我想在React应用中访问XYZ，指向集群IP（x.y.z.a）。

- Sunny

---

你打算在开发模式下使用React应用程序吗？因为env变量REACT_APP_PORT仅由create-react-app设置的开发脚本使用。尽管如此，这里是有关如何处理环境变量的Kubernetes文档链接：https://kubernetes.io/docs/tasks/inject-data-application/define-environment-variable-container/ - guzmonne

在开发模式下，就像您分享的文档中所述，如何访问EXAMPLE_SERVICE_PORT_8080_TCP_ADDR=""（在React应用程序中的pod环境变量，因为React读取以REACT_APP开头的环境变量）。 - Sunny

这里是一个链接，可以处理使用create-react-app时的环境变量。请注意，一旦应用程序构建完成，您将无法使用环境变量。您只能在运行开发服务器时使用它们，因为它会将环境变量值注入到React代码中。 - guzmonne

请问你可以分享一下你提到的链接吗？ - Sunny

抱歉，忘记粘贴了。这是链接：https://create-react-app.dev/docs/adding-custom-environment-variables/ - guzmonne

@Sunny，你是否考虑为你的React应用程序添加服务器端渲染功能，并从环境变量中读取此类信息呢？可以使用init容器将一些服务的ClusterIP填充到主容器的env var中。 - Nepomucen

Answer 1

使用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

这个例子可能对您有所帮助。

- Sravan Kumar

Answer 2

尝试一下这个：

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。

- Ivonet

---

我有相反的情况，我不想在Kubernetes Pod容器中配置我的前端环境变量，但是想要使用Pod的环境变量，例如CLUSTER_IP和CLUSTER_PORT，并使用由Pod的环境变量定义的名称在我的React应用程序中。例如： 名称 类型 CLUSTER-IP XYZ ClusterIP x.y.z.a并且希望在React应用程序中访问XYZ以指向Cluster IP（x.y.z.a）。 - Sunny

哦，如果你想让系统环境变量在React应用中可用，那么它们必须通过“后端”提供，因为据我所知，客户端代码无法访问系统变量。 - Ivonet

Answer 3

请尝试以下操作

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

- Raj Dudhare

---

我想在我的React应用程序中使用Pod的环境变量，我不想在Pod的.yaml文件中配置我的环境变量。 - Sunny