How to properly inject environment variables into Vite React app deployed with Docker Compose?

[duonganh203]

I'm deploying a Vite React application using Docker, Docker Compose and Nginx. I have a .env file on my server containing environment variables that I want to inject into my Vite React application.
My setup:
Vite + React frontend
Deployed using Docker and Docker Compose
.env file is stored on the server (in the same folder with docker-compose.yml)

Current docker-compose.yml:

version: '3.9'
services:
  frontend:
    image: username/fe-cicd:latest
    env_file:
      - .env

And this is my folder structure & .env variable

.env file:

VITE_API_URL=http://localhost:3000
VITE_HELLO=Hello, World!
VITE_APP_TITLE=MY APP

The issue is that my Vite React application cannot read the environment variables from the .env file in the production environment. I want to keep the .env file on the server and inject the variables using Docker Compose.

[vimalsonara]

I'm facing same issue. Currently i'm using args to use env

Add following in your Dockerfile

ARG VITE_API_URL
ENV VITE_API_URL=$VITE_API_URL

And following in compose file

args:
    VITE_API_URL: "http://localhost:3000"