With NGINX, how do i redirect www to non-www while using a subdomain?

I setup a website with wordpress using NGINX and PHP-FPM.

backend.site.com is for wordpress-backend

site.comis for the nuxt-frontend

My Problem

When i access the frontend by typing www.site.com i get redirected to backend.site.com

# /etc/nginx/conf.d/default.conf

server {
    listen 80;

    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    ssl_certificate     /etc/nginx/ssl/site.com_ssl_certificate.cer;
    ssl_certificate_key /etc/nginx/ssl/site.com_private_key.key;

    return 301 https://$host$request_uri;
}

# /etc/nginx/conf.d/site.com.conf

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

server {
    listen 443 ssl;
    listen [::]:443 ssl;

    ssl_certificate     /etc/nginx/ssl/site.com_ssl_certificate.cer;
    ssl_certificate_key /etc/nginx/ssl/site.com_private_key.key;

    server_name site.com www.site.com;

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

    location ^~ / {
        alias /var/www/html/web-frontend/.nuxt/dist/client;

        expires $expires;
        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_read_timeout          1m;
        proxy_connect_timeout       1m;
        proxy_pass                          http://127.0.0.1:3000;
    }

    location ~ /\.ht {
                deny all;
    }

    location = /favicon.ico {
            log_not_found off; access_log off;
    }

    location = /robots.txt {
            log_not_found off; access_log off; allow all;
    }

    location ~* \.(css|gif|ico|jpeg|jpg|js|png)$ {
            expires max;
            log_not_found off;
    }
}

# /etc/nginx/conf.d/backend.site.com.conf

server {
    # SSL configuration
    #
    listen 443 ssl;
    listen [::]:443 ssl;
    ssl_certificate     /etc/nginx/ssl/site.com_ssl_certificate.cer;
    ssl_certificate_key /etc/nginx/ssl/site.com_private_key.key;

    root /var/www/html/web-backend/web;

    # Add index.php to the list if you are using PHP
    index index.php;

    server_name backend.site.com;

    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_min_length 0;
    gzip_types text/plain application/javascript text/css text/xml application/xml application/xml+rss text/javascript application/vnd.ms-fontobject application/x-font-ttf font/opentype;

    client_max_body_size 100M;

    location / {
        try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
            try_files $uri =404;
            fastcgi_split_path_info ^(.+\.php)(/.+)$;
            fastcgi_pass unix:/run/php/php7.4-fpm.sock;
            fastcgi_index index.php;
            include fastcgi_params;
            fastcgi_param SCRIPT_FILENAME   $document_root$fastcgi_script_name;
            fastcgi_param SCRIPT_NAME   $fastcgi_script_name;
        }

    location ~ /\.ht {
            deny all;
    }

    location = /favicon.ico {
            log_not_found off; access_log off;
    }
    location = /robots.txt {
            log_not_found off; access_log off; allow all;
    }
    location ~* \.(css|gif|ico|jpeg|jpg|js|png)$ {
            expires max;
            log_not_found off;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

You have some missunderstanding how virtual host works. Check these points:

1. When you configure virtual host you need set virtual host for http (port 80) and https (port 443).
2. Redirect you virtualhost on port 80 to your virtual host on port 443.
3. Remember always need handle incoming traffic of your http (port 80). Why? Some developer (I don’t know why) use same virtual host publish two different apps one on port 80 other on 443.

Try adding this for solve your problem

This configuration redirect the traffic coming on 80 port to https.

server {
    listen 80; 
    server_name  site.com www.site.com;
    access_log  /var/log/nginx/site.com.access.log  main;
    error_log /var/log/nginx/site.com.error.log  error;
  
    location / {
        return 301 https://$host$request_uri;
    }
}

Redirect traffic incoming on backend.site.com:80 port to backend.site.com:443 of virtual host.

Note: I add :80 to highlight over which port the connection is incoming

server {
    listen 80;
    server_name  backend.site.com;
    access_log  /var/log/nginx/backend.site.com.access.log  main;
    error_log /var/log/nginx/backend.site.com.error.log  error;
   
    location / {
        return 301 https://$host$request_uri;
    }
}