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;
}
}