Как добавить код Reactjs в приложение django на docker-compose с помощью nginx-proxy acme-companion

Я пытаюсь установить полный django react webapp через docker-compose на AWS. Я прошел через туториал по созданию django backend с базой данных и ssl через nginx-proxy и letsencrypt acme-companion.

Пока все работает, но мне трудно добавить reactjs-код в качестве фронтенда. Я создал папку frontend с react-кодом и Dockerfile для создания статических файлов:

# 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

Я пытался изменить файл по умолчанию в nginx/vhost.d/default для доступа к статическим файлам фронтенда по умолчанию и django-backend-app через /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/;
  }
}

Вот файл docker-compose:

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

Когда я запускаю docker-compose на экземпляре AWS-EC2, бэкенд django по-прежнему отображается на сайте по умолчанию, и я не могу получить доступ к фронтенду. У меня такое ощущение, что файл /nginx/vhost.d/default вообще никак не влияет на webapp. За помощь буду очень признателен.

Вернуться на верх