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

user_8745900 0
Viewed 4748

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)

kubernetes reactjs server environment-variables
3 Answers
user_64475730

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.

user_92506740

Try Following

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