Django and Angular on the same Domain with Nginx

Don’t stress. Take a look at the complete conf file for nginx below and let’s discuss afterwards, or not. It’s self explanatory enough

upstream angular-frontend {
    server 127.0.0.1:4000; # angular running via pm2
}

upstream django-backend {
    server 127.0.0.1:8000;
}

server {
    listen 80;

    server_name my.domain;

    root /home/username/apps/frontend/dist/edu/browser;

    error_log /var/log/nginx/app_error.log;
    access_log /var/log/nginx/app_access.log;

    # Configuration for the Frontend (Angular Server Side Rendering)
    location / {
        try_files $uri $uri @ssr-backend;
        # <--- This looks for requests (statics i.e js/css/fonts)
        # in /ssr/dist/browser folder. If nothing found, calls @ssr-backend
    }

    location @ssr-backend {
        proxy_pass http://angular-frontend;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_http_version 1.1;
        proxy_set_header X-NginX-Proxy true;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_cache_bypass $http_upgrade;
        proxy_redirect off;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Configuration for the Backend (Django using Django Rest Framework)

    location /media/  {
        alias /home/username/apps/backend/media/;
    }

    location /static/ {
        alias /home/username/apps/backend/static/;
    }

    location ~ ^/(api|admin) {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $http_host;
        proxy_redirect off;
        proxy_pass http://django-backend;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/my.domain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/my.domain/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

}

server {
    if ($host = my.domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot

    listen  80;
    server_name my.domain;
    return 404; # managed by Certbot
}

This NGINX configuration file defines a server block for the domain my.domain. Let’s break down the key components:

1. Upstream Blocks:
   • angular-frontend: Configures an upstream server for an Angular application running with Server-Side Rendering (SSR) via pm2 on 127.0.0.1:4000.
   • django-backend: Configures an upstream server for a Django application on 127.0.0.1:8000.
2. Server Block:
   • Server Name: Specifies the domain for which this block applies (my.domain).
   • Root: Sets the root directory for the static files of the Angular SSR application.
   • Error and Access Logs: Define paths for error and access logs.
3. Frontend Configuration (Angular SSR):
   • Handles requests to the root location (/) by trying to find files in the Angular SSR distribution folder. If not found, it forwards the request to the @backend location.
   • location @backend: Forwards requests to the SSR Angular application defined in the angular-frontend upstream block.
   • Configures various proxy headers and settings for forwarding requests.
4. Backend Configuration (Django):
   • Configures locations for serving media files (/media/) and static files (/static/) from the specified directories.
   • Forwards requests starting with /api or /admin to the Django backend (http://backend defined in the upstream block).
5. SSL Configuration:
   • Configures SSL settings for secure connections (HTTPS).
   • Specifies SSL certificate and key paths obtained from Certbot.
   • Includes SSL options and DH parameters for enhanced security.
6. Redirect HTTP to HTTPS:
   • Configures a separate server block to redirect HTTP traffic to HTTPS. This is managed by Certbot.
7. Miscellaneous:
   • The file ends with a default server block for handling requests to port 80. It redirects requests for my.domain to the HTTPS version and returns a 404 response.

This configuration is suitable for hosting an Angular SSR application along with a Django backend on a domain with HTTPS enabled. It also includes configurations for serving static and media files from the Django backend. The file organization suggests the use of Certbot for managing SSL certificates and automatic HTTP to HTTPS redirection.

The above response is from ChatGPT though.