Nginx how to host both react and django

i have a react frontend imported inside a django backend. communication between the two is done through django-rest-framework. on the react's side, fetching is done through relative paths therefore in my package.json i have added the line:

"proxy": "http://127.0.0.1:8000",

django is hosting react-app locally without problems when i run: python3 manage.py runserver.

on the remote i am trying to use nginx with gunicorn to deploy this app on aws ubuntu instance and run into the problem:

  • first, i'm running python3 manage.py collectstatic
  • later, i'm pointing nginx to that static_files for the index.html
  • success! nginx serves react static files
  • use gunicorn myapp.wsgi -b 127.0.0.1:8000 to run django
  • problem! nginx served react files do not fetch anything. fetch does not call for this local path but instead calls public ip of aws instance. also, i cannot simulate get/post requests to the django backend because i think nginx "covers" django's gunicorn generated paths.

please tell how can i connect nginx-served react frontedn to gunicorn run django

my nginx sites-enabled/example

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    root /home/ubuntu/fandigger/frontend/build/;
    server_name public_ip_without_port;

    location / {
        try_files $uri $uri/ =404;
    }
}

Back to Top