I’m working on a project for my degree. The next step is that I want to build a connection between my React app and the Nginx server. Both are in separate Docker containers. My current status is that when I open localhost, the request is forwarded to the right index.html in the frontend. However, I only get a white page displayed because it can’t find the main.jsx anymore. Since I’m new to this topic and don’t really know my way around, I wanted to ask you for advice. Thank you in advance.

My Dockerfile for the frontend:

FROM node:14 as build

WORKDIR /app
COPY . .

RUN npm install
RUN npm run build
#RUN npm install bootstrap

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

My nginx.conf:

worker_processes 1;

events {
    worker_connections 1024;
}

http {
    sendfile on;

    upstream frontend {
        server frontend:80;
    }

    upstream backend {
        server backend:8888; 
    }

    server {
        listen 80;

        # Handle frontend
        location / {
            proxy_pass http://frontend;
            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;
        }

The important parts of the docker compose:

 nginx:
    build:
      context: ./nginx
      dockerfile: Dockerfile
    container_name: nginx
    ports:
      - "80:80"
    volumes:
      - ./nginx/nginx.conf:/etc/nginx/nginx.conf
    depends_on:
      - backend
      - frontend
    networks:
      - backend
  frontend:
    build:
      context: ./frontend
      dockerfile: Dockerfile
    container_name: frontend
    expose:
      - "80"
    networks:
      - backend

networks:
  backend:
    driver: bridge

In my local environment the react app works.