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

2
votes

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)

3
reactjskubernetesserverenvironment-variables
Are you intending to use your React App in development mode? Because the env variable REACT_APP_PORT is only used by the development script setup by create-react-app. Nonetheless, here is the link to Kubernetes documentation on how to handle environment variables: kubernetes.io/docs/tasks/inject-data-application/… – guzmonne
Yes in the development mode, also like in the documentation you shared, how to access EXAMPLE_SERVICE_PORT_8080_TCP_ADDR="" ( pod env variable in react app, since react reads env variables starting with REACT_APP) – Sunny
Here is a link to handle environment variables when using create-react-app. Bare in mind that you won't be able to consume environment variables once the app is built. You will only be able to use them while you run your development server since it injects the environment variables values into React's code. – guzmonne
Can you share the link, you are mentioning about – Sunny
Sorry, forgot to paste it. Here it is: create-react-app.dev/docs/adding-custom-environment-variables – guzmonne

3 Answers

0
votes

Try Following

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

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

0
votes

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.