nginx reverse proxy with part of url as dynamic - docker

Question

i have a django app and nginx as services on docker-compose. Am using nginx as a reverse proxy.
here is the docker compose file
version: "3.8"
services:
# nginx reverse proxy
nginx:
image: nginx:1.17.10
container_name: nginx
ports:
- "80:80"
restart: on-failure
depends_on:
- app
app:
image: django-app-image
conatinter_name: app
expose
- 8001
restart: on-failure
here is the nginx configuration
user www-data;
worker_processes 1;
events {
worker_connections 1024;
}
http {
include /etc/nginx/mime.types;
default_type application/octet-stream;
# sendfile on;
upstream django-app {
server app:8001;
}
server {
listen 80;
listen [::]:80;
location /vocal-bm{
client_max_body_size 0;
proxy_pass http://django-app/vocal-bm;
proxy_set_header Host $host;
}
}
This is what i want to achieve:
I should visit http://localhost/vocal-bm/<some-variable>
and the route served should be http://django-app/vocal-bm/<some-variable>
The above configuration just routes to http://django-app
How do I get it to work i.e route to http://django-app/vocal-bm/<some-variable>
What I have tried
adding a trailing slash on the proxy_pass proxy_pass http://django-app/vocal-bm/;
but a get http://django-app/vocal-bm//<some-variable> with the double slash before the dynamic variable.
I have also tried the rewrite but it gives http://django-app also