Yarn build not generating index.html during Docker build, but works manually in container (Nginx, React, Gunicorn, Django)
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.