How to add Reactjs code to django app on docker-compose with nginx-proxy acme-companion

Question

I am trying to setup a complete django react webapp via docker-compose on AWS. I went through a tutorial to create a django backend with database and ssl via nginx-proxy and letsencrypt acme-companion.

Everything works so far, but I struggle to add reactjs code as the frontend. I created a frontend folder with react-code and a Dockerfile to create the static files:

# Dockerfile frontend
FROM node:15.13-alpine as build
WORKDIR /frontend

# add `/app/node_modules/.bin` to $PATH
ENV PATH /frontend/node_modules/.bin:$PATH

# install app dependencies
COPY package.json ./
COPY package-lock.json ./
RUN npm ci --silent
COPY . ./
RUN npm run build

# The second stage
# Copy React static files
FROM nginx:stable-alpine
COPY --from=build /frontend/build /usr/share/nginx/html

I tried to change the default file in nginx/vhost.d/default to access static frontend files as default and the django-backend-app via /api:

# nginx/vhost.d/default
server {
  listen 80;

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

  location /api {
      try_files $uri @proxy_api;
  }
  location /admin {
      try_files $uri @proxy_api;
  }

  location @proxy_api {
      proxy_set_header X-Forwarded-Proto https;
      proxy_set_header X-Url-Scheme $scheme;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host $http_host;
      proxy_redirect off;
      proxy_pass   http://backend:8000;
  }

  location /django_static/ {
      autoindex on;
      alias /app/backend/server/django_static/;
  }
}

Here is the docker-compose file:

# docker-compose.yml
version: '3.8'

services:
  backend:
    platform: linux/amd64
    build:
      context: ./django
      dockerfile: Dockerfile.prod
    logging:
      driver: "awslogs"
      options:
        awslogs-region: "eu-central-1"
        awslogs-group: "acquirepad_nginx_proxy"
        awslogs-stream: "web"
    image: "${BACKEND_IMAGE}"
    command: gunicorn core.wsgi:application --bind 0.0.0.0:8000 --log-level=debug
    volumes:
      - static_volume:/home/app/web/staticfiles
      - media_volume:/home/app/web/mediafiles
    expose:
      - 8000
    env_file:
      - ./.env
  frontend:
    build:
      context: ./frontend
    volumes:
      - react_build:/frontend/build

  nginx-proxy:
    container_name: nginx-proxy
    build: nginx
    logging:
      driver: "awslogs"
      options:
        awslogs-region: "eu-central-1"
        awslogs-group: "acquirepad_nginx_proxy"
        awslogs-stream: "nginx-proxy"
    image: "${NGINX_IMAGE}"
    restart: always
    ports:
      - 443:443
      - 80:80
    volumes:
      - react_build:/var/www/frontend
      - static_volume:/home/app/web/staticfiles
      - media_volume:/home/app/web/mediafiles
      - certs:/etc/nginx/certs
      - html:/usr/share/nginx/html
      - vhost:/etc/nginx/vhost.d
      - /var/run/docker.sock:/tmp/docker.sock:ro
    depends_on:
      - frontend
      - backend
  nginx-proxy-letsencrypt:
    platform: linux/amd64
    logging:
      driver: "awslogs"
      options:
        awslogs-region: "eu-central-1"
        awslogs-group: "acquirepad_nginx_proxy"
        awslogs-stream: "nginx-proxy-letsencrypt"
    image: nginxproxy/acme-companion
    env_file:
      - ./.env.staging.proxy-companion
    volumes:
      - /var/run/docker.sock:/var/run/docker.sock:ro
      - certs:/etc/nginx/certs
      - html:/usr/share/nginx/html
      - vhost:/etc/nginx/vhost.d
      - acme:/etc/acme.sh
    depends_on:
      - nginx-proxy

volumes:
  static_volume:
  media_volume:
  certs:
  html:
  vhost:
  acme:
  react_build:

When I run docker-compose on the AWS-EC2 instance, the django backend is still displayed by default on the website and I can not get access to the frontend. I have the feeling, that the file /nginx/vhost.d/default does not have any influence on the webapp at all. Help is much appreciated.