How to set up subdomains for frontend and backend?

Question

Nginx

I have 2 subdomains frontend.example.com and backend.example.com on 1 IP address. How to configure nginx so that when you go to frontend.example.com, nuxt gets from the docker.

Right now, if you go to both subdomains, both will open the backend application. While frontend.example.com should have opened the nuxt app.

map $sent_http_content_type $expires {
    "text/html" epoch;
    "text/html; charset=utf-8" epoch;
    default off;
}

server {
    root /var/www;
    server_tokens off;

    listen 80;

    server_name frontend.example.com;
    client_max_body_size 5M;

    gzip on;
    gzip_types text/plain application/xml text/css application/javascript;
    gzip_min_length 1000;

    location / {
        expires $expires;
        proxy_pass http://nuxt:3000;
        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;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

server {
    server_tokens off;

    listen 80;
    listen 443 ssl;

    server_name backend.example.com;
    client_max_body_size 5M;

    ssl_certificate /etc/letsencrypt/live/backend.example.com/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/backend.example.com/privkey.pem;

    include /etc/letsencrypt/options-ssl-nginx.conf;
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;

    if ($server_port = 80) {
        set $https_redirect 1;
    }

    if ($host ~ '^www\.') {
        set $https_redirect 1;
    }

    if ($https_redirect = 1) {
        return 301 https://backend.example.com$request_uri;
    }

    location /static/ {
        root /var/html/;
    }

    location /media/ {
        root /var/html/;
    }

    location / {
        proxy_pass http://web:8000;
        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;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    location /cron/ {
        proxy_pass http://flower:5555;
        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;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_http_version 1.1;
    }

    location /.well-known/acme-challenge/ {
        root /var/www/certbot;
    }
}

Answer 1

If both frontend and backend work in docker, you need to correctly forward ports to docker containers - for example, make different ports on localhost and forward the corresponding ports from containers to them, you can also install a router / load balancer container like the same nginx or better HAProxy, the cat will for example, balance between several frontends