How to access Kubernetes container environment variables from React.js application?

5/21/2021

I have a create-react-app with default configurations. I have some PORT and APIs inside .env file configured with

REACT_APP_PORT=3000

and using inside app with process.env.REACT_APP_PORT.

I have my server deployed on Kubernetes. Can someone explain how to configure my create-react-app, to use environment variables provided by pods/containers?

I want to access cluster IP via Name given by kubectl svc

Update 1 :

I have the opposite scenario, I don't want my frontend env variables to be configured in kubernetes pod container, but want to use the pod's env variable

e.x CLUSTER_IP and CLUSTER_PORT with their name defined by pod's env variable inside my react app.

For eg.-

NAME TYPE CLUSTER-IP 

XYZ ClusterIP x.y.z.a

and want to access XYZ in react app to point to the Cluster IP (x.y.z.a)

-- Sunny
environment-variables
kubernetes
reactjs
server

3 Answers

5/21/2021

try this:

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

and then:

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

Now you configured your env from "outside" the pod

See also the documentation: https://kubernetes.io/docs/tasks/configure-pod-container/configure-pod-configmap/#configure-all-key-value-pairs-in-a-configmap-as-container-environment-variables

-- Ivonet
Source: StackOverflow

5/21/2021

Use Pod fields as values for environment variables

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/ Maybe above example will help you.

-- Sravan Kumar
Source: StackOverflow

5/21/2021

Try Following

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