Nginx multiple Apps on same port reverse proxy - nginx

Question

I'm trying to run a django app and and angular one on my VPS using Nginx. Below is my config file code:
server {
listen 80;
server_name www.the-patron.com the-patron.com;
charset utf-8;
location = /favicon.ico { access_log off; log_not_found off; }
location /staticfiles/ {
root /root/thepatron/The-Patron-Backend;
}
# Django Backend
location /back/ {
include proxy_params;
proxy_pass http://unix:/root/thepatron/The-Patron-Backend/thepatron.sock;
}
# Angular Frontend
location / {
proxy_pass http://localhost:4200/;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
proxy_http_version 1.1;
proxy_cache_bypass $http_upgrade;
}
}
Here my Angular app is running well and the Django one isn't. If I change location /backend/ to location / on line 12 and location / to location /frontend/ on line 18 then I will get the Django app to run while the Angular app will not.
How can I run both and change the location of each?

Answer 1

As my previous approach to host my Angular and Django apps separately was totally wrong. I finally managed to solve my issue thanks to the comments of #Vipulw above.
What worked for me is that I built my Angular application to production and placed the generated build folder inside my static files folder in my Django app directory, and then configured my Nginx to serve that Angular build.
Below is my new Nginx config file:
# Angular Reverse Proxy
server {
listen 80;
server_name <Domain name or IP address>;
root /root/<path to Django app>/static/<Angular app build folder>;
index index.html;
location / {
try_files $uri $uri/ /index.html;
}
}
# Django Reverse Proxy
server {
listen 8080;
server_name <Domain name or IP address>;
location / {
include proxy_params;
proxy_pass http://unix:/root/<path to Django app>/<myapp>.sock;
}
}
Additional Note:
In this way mentioned above, my Angular app is running on port 80 while my Django app is running on port 8080. Everything is working fine this way but I don't see that as the best way to do run both Angular and Django. After a little bit of research, I found that the best way to serve Angular and Django in one app is to let the default Django route to point to the Angular build. The default Django route right now is pointing to the Django Rest Framework root directory.
Sadly, I don't know how to let Django's default route to point to the Angular build file at the moment.