How to forward a Django app using Nginx location block

Question

I have a Django project which I would like to run (host) in production using Nginx.

I tried to expose the Django project directly using Nginx:

Direct

urls.py

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    
    path('', include('dashboard.urls'), name= 'dashboard'),
    path('app1/', include('app1.urls'), name= 'app1'),
    path('app2/', include('app2.urls') ,name='app2')
       ]

default.conf

upstream django_app {
  server django_app:8000;
}

server {
  listen 80;
  listen [::]:80;

  server_name demo.company.com;

  location / {
      proxy_pass http://django_app;
      proxy_redirect off;     
      proxy_set_header Host $host;   
      proxy_set_header X-Real-IP $remote_addr;        
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        
  }

  location /static/ {
    alias /var/www/static/;
  }
}

I have three URLs with one dashboard '' and two Django apps, app1/ and app2/. And the above configuration allows all the application to be accessed on the designated route:

• http//demo.company.com/
• http//demo.company.com/app1
• http//demo.company.com/app2

Now the issue is that I have multiple different projects running, hence I want to expose this project behind a custom location block /custom.

Custom

default.conf (modified)

I have modified the nginx configuration file to the following:

upstream django_app {
  server django_app:8000;
}

server {
  listen 80;
  listen [::]:80;

  server_name demo.company.com;

  location /custom {
      rewrite ^/custom/?(.*) /$1 break;
      proxy_pass http://django_app;
      proxy_redirect off;     
      proxy_set_header Host $host;   
      proxy_set_header X-Real-IP $remote_addr;        
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;        
  }

  location /static/ {
    alias /var/www/static/;
  }
}

Here I am rewriting everything from Django with custom location block. Now I can access all the apps, when I type these URLs (hardcoded):

• http//demo.company.com/custom/
• http//demo.company.com/custom/app1
• http//demo.company.com/custom/app2

My app dashboard has a clickable button for app1 and app2, and if I try to go to the app1 by clicking a this button, the location block /custom is not recognized. It changes the URL to http//demo.company.com/app1 and returns page not found error.

May I ask how can I resolve this issue, any advice will be highly appreciated. Thanks in advance!