[FIXED] Nginx configuration for both front-end and back-end in same file

Issue

I have an app hosted on a server with Nginx and Gunicorn. This app’s frontend is built using React while the backend Django. I do understand how to configure Nginx and Unicorn for a Django app. But what I want is every request to the ‘/admin/’ and ‘/api/‘ should be sent gunicorn, but every other request to the root url and others should be sent to the react app to handle. I have the below configuration for Nginx to serve Django but I don’t know how to go about it for the frontend and back-end in one configuration file.

# /etc/nginx/sites-available/myapp

server {
    listen 80;
    server_name myapp.com www.myapp.com

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/ubuntu/myapp;
    }

    location / {
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }
}

Thank you for your assistance

Solution

To configure Nginx for your setup, where you have a Django backend handling /admin/ and /api/, and a React app for the root domain, you'll need to update your Nginx configuration file. Please adjust the paths as needed.

server {
    listen 80;
    server_name myapp.com www.myapp.com;

    location = /favicon.ico { access_log off; log_not_found off; }
    location /static/ {
        root /home/ubuntu/myapp;
    }

    location /admin/ {
        # Pass requests to the Django backend
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }

    location /api/ {
        # Pass requests to the Django backend
        include proxy_params;
        proxy_pass http://unix:/run/gunicorn.sock;
    }

    location / {
        # Point to your React app build directory
        root /path/to/your/react/app/build;
        index index.html;

        try_files $uri $uri/ /index.html;
    }
}

Restart Nginx to apply the changes:

sudo systemctl restart nginx

Now, your Nginx server should be configured to serve your React app at the root domain, and pass requests to the Django backend for paths starting with /admin/ and /api/

Answered By - Temi