Пустая страница на react production build с django и nginx на прокси-сервере

Я пытаюсь развернуть приложение django на прокси-сервере (otlart.com, IP 111.22.333.44) и сделать его доступным с http://dome.com:8080/annotator.

Страница django admin и rest_framework отображаются правильно, однако сборка react показывает пустую страницу, несмотря на отсутствие ошибок при загрузке страницы и скрипта.

Все страницы отображаются правильно, когда я обращаюсь к 111.22.333.44:80 напрямую.

Настройки на dome.com для прокси:

<VirtualHost *:8080>
        ServerName dome.com
        ServerAlias www.dome.com
        ServerAdmin scandav@example.com
        ErrorLog ${APACHE_LOG_DIR}/error.log
        CustomLog ${APACHE_LOG_DIR}/access.log combined

        ProxyRequests Off
        <Proxy *>
          Order deny,allow
          Allow from all
        </Proxy>

        ProxyPass /annotator http://111.22.333.44
        ProxyPassReverse /annotator http://111.22.333.44

        <Location />
          Order allow,deny
          Allow from all
        </Location>

   </VirtualHost>

Дерево папок приложения выглядит следующим образом:

📦app
 ┣ 📂backend
 ┃ ┣ 📂static
 ┃ ┃ ┣ 📂admin
 ┃ ┃ ┣ 📂css
 ┃ ┃ ┣ 📂js
 ┃ ┃ ┣ 📂media
 ┃ ┃ ┗ 📂rest_framework
 ┃ ┣ 📜__init__.py
 ┃ ┣ 📜....py
 ┃ ┣ 📜settings.py
 ┃ ┣ 📜urls.py
 ┃ ┗ 📜wsgi.py
 ┣ 📂frontend
 ┃ ┣ 📂build
 ┃ ┃ ┣ 📂static
 ┃ ┃ ┣ 📜asset-manifest.json
 ┃ ┃ ┣ 📜index.html
 ┃ ┃ ┗ 📜robots.txt
 ┣ 📂web_annotator
 ┃ ┣ 📂migrations
 ┃ ┣ 📜admin.py
 ┃ ┣ 📜apps.py
 ┃ ┣ 📜models.py
 ┃ ┗ 📜views.py
 ┗ 📜manage.py

Django settings.py

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [
            BASE_DIR / "frontend" / "build", 
        ],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

STATIC_URL = '/static/'

STATIC_ROOT = BASE_DIR / "backend" / "static"

STATICFILES_DIRS = [BASE_DIR / "frontend" / "build" / "static", ]

Django urls.py

def render_react(request):
    return render(request, "index.html")

urlpatterns = [
    ...
    re_path(r"", render_react),
    re_path(r"^(?:.*)/?$", render_react),
]

После создания приложения react для производства с помощью npm run build, запустив collectstatic, я запускаю сервер. Страница react рендерится без ошибок (код состояния 200 от nginx) с dome.com/annotator, но она пустая! admin и rest_framework рендерятся правильно.

Что это может быть?

nginx.conf

user nobody nogroup;
worker_processes auto;         
events { worker_connections 512; }

http {

 include /etc/nginx/mime.types;

 server {

    listen 80;
    server_name localhost;
    charset utf-8;
    client_max_body_size 1024M;
   
    location /static {
      root /usr/src/app/backend;
    }

    location / {
        proxy_pass http://web:8000; # dockerized django
        proxy_set_header Host $host;
        proxy_set_header X-Forwarded-Host $host:$server_port;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

  }
}

Я пробовал множество комбинаций и искал на stackoverflow, но ничего не помогло.

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