How to pass variables to Reactjs through kubernetes - node.js

Question

I have a simple reactjs application and I am going to deploy this in my kubernetes cluster.
The Dockerfile for the reactjs application looks like below:
# build env
FROM node:13.12.0-alpine as build
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . ./
RUN npm run build
# production env
FROM nginx:stable-alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
And I want to pass two environment variables through kubernetes as below:
apiVersion: apps/v1
kind: Deployment
metadata:
name: frontend
spec:
selector:
matchLabels:
app: frontend
replicas: 1
template:
metadata:
labels:
app: frontend
spec:
containers:
- name: frontend
image: 19950818/k8s:frontend
imagePullPolicy: Always
ports:
- containerPort: 80
env:
- name: REACT_APP_BACKEND_URL
valueFrom:
configMapKeyRef:
name: backend-configs
key: backend.url
- name: REACT_APP_BACKEND_PORT
valueFrom:
configMapKeyRef:
name: backend-configs
key: backend.port
I am accessing these variables with the NodeJs as below:
let url = process.env.REACT_APP_BACKEND_URL
let port = process.env.REACT_APP_BACKEND_PORT
But How can I modify the Dockerfile mentioned above to pass these two variable?

Answer 1

The js you have shown:
let url = process.env.REACT_APP_BACKEND_URL
let port = process.env.REACT_APP_BACKEND_PORT
runs in the user's browser, not in kubernetes or docker, therefore the environment variables you set on the server do not exist at the time the code is run. The kubernetes/docker container only serves the javascript as a file to the user's browser.
Basically, you cannot use environment variables in this way.