Why is my env variable undefined when deployed to AWS?

Question

I have a vue app I'm currently working on. I set the environmental variables in a file I named "config.ts" which contain codes similar to the code below:

export const configs = {
  baseURL:
    process.env.VUE_APP_API_BASEURL ||
    'http://test.api.co/',
}

I tested the environmental variables locally with a .env like so

VUE_APP_API_BASEURL=https://test2.api.com

and it works fine.

Then I dockerised the app with a Dockerfile as shown below:

FROM private_image_container/node:v16 as build-stage

# declare args
ARG VUE_APP_API_BASEURL

# set env variables
ENV VUE_APP_API_BASEURL=$VUE_APP_API_BASEURL
RUN echo "VUE_APP_API_BASEURL=$VUE_APP_API_BASEURL" > .env
WORKDIR /app
COPY package.json ./
COPY yarn.lock ./
RUN yarn
COPY . .
RUN yarn build

# production stage
FROM private_image_container/nginx:latest as production-stage
COPY --from=build-stage /app/dist /usr/share/nginx/html
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

When the app is deployed, the variables are not seen even when they are defined in the task definition.

Answer 1

So I had this issue because our DevOp guy insist we have runtime environment variables.

The solution I developed was to write a bash script that inject a script to attach the configs to the window object, making it accessible as runtime.