I'm trying to set up a website with Nginx, React, Gunicorn, and Django using Docker. Everything works fine except for one issue:

When I build the Docker container, the yarn build command doesn't generate the index.html file inside the container. However, when I run the yarn build command manually inside the container, it works, and the index.html file appears in the /app/build folder.

Oh, I found that Build dir not have index.html from having 500 error on web and this error in enginx logs :

[error] 29#29: *1 rewrite or internal redirection cycle while internally redirecting to "/index.html"...

Here is my docker-compose.yml:

services:
  db:
    image: mysql:8.0
    ports:
      - "3306:3306"
    environment:
      MYSQL_ROOT_PASSWORD: ${MYSQL_ROOT_PASSWORD}
      MYSQL_DATABASE: ${MYSQL_DATABASE}
      MYSQL_USER: ${MYSQL_USER}
      MYSQL_PASSWORD: ${MYSQL_PASSWORD}
    volumes:
      - db_data:/var/lib/mysql
    networks:
      - app-network

  backend:
    build: ./backend
    command: gunicorn aware.wsgi:application --bind 0.0.0.0:8000
    volumes:
      - ./backend:/app
    depends_on:
      - db
    environment:
      - DJANGO_SETTINGS_MODULE=aware.settings
      - MYSQL_DATABASE=${MYSQL_DATABASE}
      - MYSQL_USER=${MYSQL_USER}
      - MYSQL_PASSWORD=${MYSQL_PASSWORD}
      - DB_HOST=${DB_HOST}
      - DB_PORT=${DB_PORT}
    networks:
      - app-network

  frontend:
    build: ./frontend/front
    volumes:
      - ./frontend/front:/app
      - ./frontend/front/build:/app/build
    networks:
      - "app-network"
  nginx:
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
      - ./frontend/front/build:/app/frontend/front/build
      - ./frontend/front/build/static:/app/frontend/front/build/static
      - ./backend/media:/app/backend/media
      - ./frontend/front/build/favicon.ico:/app/frontend/front/build/favicon.ico
    depends_on:
      - backend
      - frontend
    networks:
      - app-network

volumes:
  db_data:

networks:
  app-network:
    driver: bridge

Here is my nginx.config

events {
    worker_connections 1024;
}

http {
    include /etc/nginx/mime.types;
    server {
        listen 80;
        server_name example.ro www.example.ro;

        location / {
            root /usr/share/nginx/html;
            index index.html;
            try_files $uri /index.html;

        }

        location /api/ {
            proxy_pass http://backend:8000;
            proxy_set_header Host $host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
        }

        location /static/ {
            alias /app/frontend/front/build/static/;
        }

        location /media/ {
            alias /app/backend/media/;
        }

        location /favicon.ico {
        root /app/frontend/front/build;
        try_files $uri /favicon.ico;
        }
        

    }
}

Here is my dockerfile from front:

FROM node:20 AS build

WORKDIR /app


COPY package.json yarn.lock ./
RUN yarn install


COPY . .


RUN yarn build && ls -lah build

RUN ls -lah /app/build

FROM nginx:alpine
COPY --from=build /app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

I've checked the logs and yarn build seems to run correctly, but it doesn't generate index.html in the build folder. I tried running yarn build manually inside the container, and it successfully generates the index.html file in the /app/build directory. I also verified the Docker volume configuration to ensure that files are mounted correctly.

One issue I found was that I don't get any logs when I run the front container. I don t know why.