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"

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"

• docker
• nginx
• docker-compose

• @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 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 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 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 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 Commented Mar 30 at 19:17

1 Answer 1

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: )