docker-compose can't find my env variables

Question

I tried to set up a project on a ec2 instance, for that I prepare a new docker-compose, when I up the project, I get this warning message

WARN[0000] The "REACT_APP_API_URL" variable is not set. Defaulting to a blank string. 
WARN[0000] The "REACT_APP_MEDIA_URL" variable is not set. Defaulting to a blank string. 
WARN[0000] The "REACT_APP_URL" variable is not set. Defaulting to a blank string. 
WARN[0000] The "REACT_APP_GOOGLE_MAPS_API_KEY" variable is not set. Defaulting to a blank string. 
WARN[0000] The "REACT_APP_GOOGLE_CLIENT_ID" variable is not set. Defaulting to a blank string.

here the docker-compose file:

services:
  backend:
    build: 
      context: ./backend
      dockerfile: Dockerfile
    volumes:
      - static_volume:/app/static
      - media_volume:/app/media
    env_file:
      - ./backend/.env.prod
    environment:
      - DJANGO_SETTINGS_MODULE=core.settings
      - MODE=production
      - DEBUG=0
      - DATABASE_URL=postgresql://***
      - REDIS_URL=redis://redis:6379/1
      - GDAL_LIBRARY_PATH=/usr/lib/libgdal.so
      - GEOS_LIBRARY_PATH=/usr/lib/libgeos_c.so
    ports:
      - "8000:8000"
    depends_on:
      db:
        condition: service_healthy
      redis:
        condition: service_started
    networks:
      - app_network
    restart: unless-stopped
    command: gunicorn core.wsgi:application --bind 0.0.0.0:8000 --workers 4 --timeout 120

  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile.prod
    env_file: ./frontend/.env.prod
    environment:
      - NODE_ENV=production
      - REACT_APP_API_URL=${REACT_APP_API_URL}
      - REACT_APP_MEDIA_URL=${REACT_APP_MEDIA_URL}
      - REACT_APP_URL=${REACT_APP_URL}
      - REACT_APP_GOOGLE_MAPS_API_KEY=${REACT_APP_GOOGLE_MAPS_API_KEY}
      - REACT_APP_GOOGLE_CLIENT_ID=${REACT_APP_GOOGLE_CLIENT_ID}
    volumes:
      - /app/node_modules
      - static_volume:/app/static
    ports:
      - "3000:80"
    depends_on:
      - backend
    networks:
      - app_network
    restart: unless-stopped

  nginx:
    image: nginx:alpine
    volumes:
      - static_volume:/app/static:ro
      - media_volume:/media
      - ./nginx.conf:/etc/nginx/conf.d/default.conf:ro
    ports:
      - "80:80"
    depends_on:
      - backend
      - frontend
    networks:
      - app_network
    restart: unless-stopped
    healthcheck:
      test: ["CMD", "nginx", "-t"]
      interval: 10s
      timeout: 5s
      retries: 3

networks:
  app_network:
    driver: bridge

volumes:
  static_volume:
  media_volume:
  frontend_cache:
  prometheus_data:
  grafana_data:

and the Dockerfile from the frontend:

FROM node:23-alpine as build

RUN apk add --no-cache git

WORKDIR /app

COPY package.json package-lock.json ./

RUN npm ci

COPY . .

RUN npm run build

FROM nginx:alpine

RUN mkdir -p /app/static

COPY --from=build /app/build /usr/share/nginx/html
COPY --from=build /app/build/static /app/static

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

What I have tried so far:

Changing the variable names in docker-compose.yml.
Using single quotes (and without) in the .env.prod file.
Making sure .env.prod exists in the correct path (./frontend/.env.prod).
Running docker-compose up -d --build after modifying the .env.prod file.

If anyone has insights on how to ensure that the environment variables are properly loaded, I'd really appreciate it. Thank you!

edit: I use a Bash script for deployment

    log "Starting deployment..."
    
    # Stop existing containers
    log "Stopping existing containers..."
    docker-compose -f docker-compose.prod.yml down
    
    # Clean up unused images
    log "Cleaning up unused images..."
    docker system prune -f
    
    # Reconstruction
    log "Rebuilding images..."
    docker-compose -f docker-compose.prod.yml --env-file ./frontend/.env.prod build
    
    # Starting
    log "Starting containers..."
    docker-compose -f docker-compose.prod.yml up -d

edit-2: I get another errors in the logs, may it's connected:

frontend-1  | 2025/03/30 19:15:12 [error] 31#31: *2 open() "/usr/share/nginx/html/events" failed (2: No such file or directory), client: 172.27.0.6, server: localhost, request: "GET /events HTTP/1.1"

@cidonia I tried your solution but I get the exact same errors, I use a Bash script for deployment, in case I need to edit the post with it. — jordan
– jordan, Commented Mar 30 at 18:58
Your React app runs in a browser outside the container. The environment variables are set inside the container. You need a way to send the values from the container to the browser. If you use process.env then those are usually baked into the React app at build time. Not at run time. Yours are passed at run time right now. — Hans Kilian
– Hans Kilian, Commented Mar 30 at 19:01
Then, I need to pass the .env file at runtime and not at build time. My solution should be handled by Nginx? — jordan
– jordan, Commented Mar 30 at 19:09
Nginx doesn't have a way to serve environment variable values at run time, afaik. Do you get your error at build time or at run time? I.e. can you do docker compose build --no-cache without errors? — Hans Kilian
– Hans Kilian, Commented Mar 30 at 19:12
If I add the env file when I build and start, I don’t get any error messages, but when I check the logs, I see the error messages. — jordan
– jordan, Commented Mar 30 at 19:17

cidonia · Accepted Answer · 2025-03-30 18:49:31Z

0

I assume the variables are defined in the env file ./frontend/.env.prod ?

The env file you use in the docker-compose file yaml key env_file: will be applied to the container once it's started. To inject its content in the docker-compose file context itself, you need to tell so in the docker-compose command.

Example:

docker-compose --env-file ./frontend/.env.prod up

Edit: (By the way you shouldn't need to defined them in the environment: section if they are already injected by the env_file: )

edited Mar 30 at 18:49

answered Mar 30 at 18:43

cidonia

461 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

cidonia Mar 30 at 19:56

@jordan It's on the "up" command instead of the "build" that you need to inject you env file with --env_file This part is used when the container is run, not when the image is built. And that's what is throwing the warnings environment: REACT_APP_API_URL=${REACT_APP_API_URL}

jordan Mar 30 at 20:08

you're right, then the errors message don't come at the running but when I check the logs after the up I can retrieve the errors message :/

cidonia Mar 30 at 20:13

This error you're showing is because nginx is trying to serve "event" from its local filesystem instead to proxying the query to your application container. The issue lies in your nginx configuration probably.

jordan Mar 30 at 20:24

this errors become from the env variables, in the front code I used variables env for get the api url, but the variables is set to blank so the url become wrong

cidonia Mar 30 at 20:45

You're right sorry, frontend-1 is definitely the application container. You can narrow the issue by opening a shell to the container and issue a "env | grep REACT" command. If you see your variables with the expected values, then the problem is further in the chain, probably in the application code.

Collectives™ on Stack Overflow

docker-compose can't find my env variables

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related