Пустая страница на производственной сборке react с django и nginx на прокси-сервере

#python #reactjs #django #nginx #nginx-reverse-proxy

Вопрос:

Я пытаюсь развернуть приложение 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 для прокси включены:

 lt;VirtualHost *:8080gt;  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  lt;Proxy *gt;  Order deny,allow  Allow from all  lt;/Proxygt;   ProxyPass /annotator http://111.22.333.44  ProxyPassReverse /annotator http://111.22.333.44   lt;Location /gt;  Order allow,deny  Allow from all  lt;/Locationgt;   lt;/VirtualHostgt;  

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

 📦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  

Джанго 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", ]  

Джанго 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, но ни одна не помогла.

Комментарии:

1. Есть ли запрос на загрузку react JS в инструментах разработки, и это как-то не удается? Вы подтвердили, что встроенное приложение react существует на сервере, где его ожидает apache?