I'm trying to pass some environment variables to my conteinerized Vue 3 app, but i can't get it done. Though it's a common problem, no other question here or google answer helped me.

Dockerfile

FROM node:14.18.3 as build-stage
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY ./ .
RUN npm run build

FROM nginx as production-stage
RUN mkdir /app
COPY --from=build-stage /app/dist /app
COPY nginx.conf /etc/nginx/nginx.conf

COPY entrypoint.sh ./
RUN ["chmod", "+x", "entrypoint.sh"]
CMD ["/entrypoint.sh"]

.env

VUE_APP_BASE_URL=http://localhost:3000/api

Docker-compose.yml

version: "2.0"

services:
  ui:
    image: url-to-the-image:dev
    restart: always
    ports:
      - "80:80"
    environment:
      - VUE_APP_BASE_URL=http://XXXXX:3000/api  ## can't get this varaible be taken