Accesing nodejs process.env variables in CRA prod build in containerized Kubernetes deployment

8/21/2018

I have created a production build from CRA in it there is a connection string conn string original
that when trying to get it into kubernetes via a service, I set it up in this way :
connstring translated
The minified version prod ready of CRA translate it to this
enter image description here

"http://"+Object({NODE_ENV:"production",PUBLIC_URL:""}).APISERVER_SERVICE_HOST+":"+Object({NODE_ENV:"production",PUBLIC_URL:""}).APISERVER_SERVICE_PORT

process.env does not have any container ENV.
Could it be that the build just "baked-in" the env variables at build time and that's the reason the client sees them as strings rather that key/values while in the pod ?

The goal is to access the api url utilize env variables within the container via process.env.VARIABLE_NAME once the pod are deployed

The thing is when it gets deployed the uri is undefined enter image description here meaning the code is unable to convert/detect/translate proccess.env.VARIABLE to its value
Even console.log(process.env) returns undefined

If I get into the pod/container and check env variables they are working correctly container ENV variables
env variables via node and shell

Why am I not getting the values of env variables in my build?
Do I have to build it at a certain time?
What am I missing?

Dockerfile

FROM node:10 as build-deps
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
ENV PATH /usr/src/app/node_modules/.bin:$PATH
COPY package.json /usr/src/app/package.json
RUN npm install --silent
RUN npm install react-scripts -g --silent
COPY . /usr/src/app
RUN npm run build
RUN echo $APISERVER_SERVICE_HOST

FROM nginx:1.12-alpine
RUN  apk update && apk add nodejs 
RUN rm -rf /etc/nginx/conf.d
COPY conf /etc/nginx 
COPY --from=build-deps /usr/src/app/build /usr/share/nginx/html
RUN echo $APISERVER_SERVICE_HOST
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

Service and Deployment kubernetes

#Service for readable
apiVersion: v1
kind: Service
metadata:
  creationTimestamp: null
  labels:
    run: readable-deployment
  name: readable
spec:
  ports:
  - port: 80
    protocol: TCP
    targetPort: 80
  selector:
    run: readable-deployment
  type: LoadBalancer
status:
  loadBalancer: {}  


---
#Deployment for Readable
apiVersion: apps/v1beta1
kind: Deployment
metadata:
  creationTimestamp: null
  labels:
    run: readable-deployment
  name: readable-deployment
spec:
  replicas: 1
  selector:
    matchLabels:
      run: readable-deployment
  strategy: {}
  template:
    metadata:
      creationTimestamp: null
      labels:
        run: readable-deployment
    spec:
      containers:
      - image: gcr.io/kuberneteseval/readable:latest-01
        name: readable-deployment
        ports:
        - containerPort: 80
        resources: {}
status: {}
-- yokodev
create-react-app
docker
environment-variables
kubernetes
production-environment

1 Answer

8/24/2018

First of all, This is for a create-react-app production build

As of today Aug 24 2018 there is still a open issue for this and how it should be done.

No matter what I did the API url was always a "key string" and not the value of the env variables.

What I did: (just a workaround and does not get service variables at runtime)

  • I created .env.production file and added REACT_APP_SERVICE_HOST and REACT_APP_SERVICE_PORT
    The problem with this is that at docker build time in my local machine there is no way of getting the values of the cluster service variables hence you would have to set the values manually. like so: REACT_APP_APISERVER_SERVICE_HOST=35.15.5.0and REACT_APP_APISERVER_SERVICE_PORT=3008

Other Alternatives:

  • I try this Apparently it does grab the services variables. Couldn't make it work for me
  • I also tried Ejecting and use the Environment plugin which is a shorthand of the define Plugin used by CRA but again your not gonna have access to the services variables at build time...
-- yokodev
Source: StackOverflow