Why are my environment variables undefined when deploying to AWS?

Question

I am currently developing a vue application. I set the environment variables in a file called "config.ts" which contains code similar to:

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

I tested the environment variables locally using .env as shown below

VUE_APP_API_BASEURL=https://test2.api.com

And the effect is very good.

I then dockerized the application using a Dockerfile like this:

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 deploying the application, you will not see the variables even if they are defined in the task definition.

Answer 1

So I ran into this problem because our DevOp people insisted that we have runtime environment variables.

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