So I have a project which builds 3 kubernetes pods connecting to each other, namely server, manager and browser, the browser part is implemented using Vue.js, others are using Python Flask.
I have a configMap storing the address of their services, which is supposed to be shared by the three:
apiVersion: v1
kind: ConfigMap
metadata:
name: env-config
data:
SERVER_ADDRESS: http://ai-recommender-service:3518
MANAGER_ADDRESS: http://manager-service:2354
with the browser, the deployment part is as follows:
apiVersion: apps/v1
kind: Deployment
metadata:
name: browser-deployment
labels:
app: browser
spec:
replicas: 1
selector:
matchLabels:
app: browser
template:
metadata:
labels:
app: browser
spec:
containers:
- name: browser
image: browser:latest
imagePullPolicy: Never
ports:
- containerPort: 80
env:
- name: MANAGER_ADDRESS
valueFrom:
configMapKeyRef:
name: env-config
key: MANAGER_ADDRESS
In the Vue.js project browser, I have a .js file which tries to get the env variable through:
const ServiceManagerUrl = process.env.MANAGER_ADDRESS;
But this doesn't work.
I know that there are other ways, such as creating a .env file with the variable with prefix VUE_APP_ in the root folder, and then load it using something like process.env.VUE_APP_MANAGER_ADDRESS, but are there any ways for Vue.js to directly get the environment variables passed through the Kubernetes deployment (as these are shared by other parts of the system), without having to resort to creating extra files?
--- added ---
Dockerfile of browser
# build stage
FROM node:14-alpine as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build
# production stage
FROM nginx:stable-alpine as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]
browsercontainer?