[SOLVED] Incorrect vps nginx redirect settings for django app

Issue

I use vps, ubuntu 20, nginx, gunicorn for run django project. <my_ip>:8000 runs django app.

I want run <my_ip> react (frontend), <my_ip>/api/ django (backend)

sudo nano /etc/nginx/sites-available/default/:

root /home/ubuntu/client/build;

server {
    listen 80;
    server_name <my_ip>;
    access_log  /var/log/nginx/example.log;

    location /media/ {
        root /home/ubuntu/api;
        expires 30d;
    }

    location /static/ {
        root /home/ubuntu/api;
        expires 30d;
    }

    location /api/ {
        rewrite /api/(.*) /$1 break;
        proxy_pass http://<my_api>:8000;
        proxy_set_header Host $server_name;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }

    location / {
        try files $uri $uri /index.html
    }
}

Frontend, backend works fine, static and media works fine.

But when I get into api/admin page, all my hrefs still point to root directory.

For example, when I press to "orders" href I-ve got link to < a href="/admin/orders/" >Orders</ a > I want get "/api/admin/orders/"

I think about /admin/ redirect, but is it correct decision?

I see a lot of not found errors in gunicorn logs because of incorrect links.

Can I fix it with nginx? Or in django settings?

UPD: just one more issue about conflict static folders. Django app use static files, for it I use:

location /static/ {
        root /home/ubuntu/api;
        expires 30d;
    }

But I noticed that with this settings react build doesn't run course of /static/ folders conflict. Can I set it in nginx?

UPD2 Find decision to fix front/back conflict:

location /static/ {
        try_files /../../api/$uri /$uri;
        expires 30d;
    }

Solution

you can try to separate admin location in nginx config

location /admin/ {
    proxy_pass http://<my_api>:8000;
    proxy_set_header Host $server_name;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
} 

Answered By - Amin Basiri

Answer Checked By - Gilberto Lyons (WPSolving Admin)