How do I get non-dockerized Nginx (with SSL) to reverse proxy to dockerized backend (docker composed Springboot with Postgresql)?

I have set up Nginx to run on a VPS server and installed SSL using LetsEncrypt. Both Nginx and LetsEncrypt are typical standard installation on the server machine running Ubuntu. I then loaded production build files (static html files) of a Reactjs app into the standard Nginx /var/www/your_domain/html location (Note that I am masking my actual domain name by using 'your_domain'). I set up the Nginx configuration file for serving https requests on port 443 and redirection of http requests from port 80 to 443. Up to now everything works fine. My Nginx configuration file as follows:

        root /var/www/your_domain/html;
        index index.html index.htm index.nginx-debian.html;

        server_name your_domain www.your_domain;

        location / {
                try_files $uri $uri/ =404;
        }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/your_domain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/your_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 = www.your_domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = your_domain) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


        listen 80;
        listen [::]:80;

        server_name your_domain www.your_domain;
    return 404; # managed by Certbot
}

Now the problem starts when I try to refactor the above Nginx configuration to perform reverse proxy to the backend application that runs on the same machine in docker containers. The backend application comprises Springboot app and Postgresql which are configured using a docker compose file.

The following shows code snippet for the Springboot configuration of the docker compose yml file that runs the backend app container:

services:
  app:
    container_name: backend_container   
    tty: true 
    build:
      image: myhubrepo/mybackend:latest
    depends_on:
      - postgres
    dns:
      - 8.8.8.8
    ports:
      - "8080:8080"
    environment:
      - SPRING_PROFILES_ACTIVE=prod  
    networks:
      - mynet
networks:
  mynet:
    driver: bridge```


And I reconfigured the Nginx configuration file by the addition of a new location block perform the reverse proxy, which is intended to handle http requests and direct them to my backend Springboot application:

```server {
    root /var/www/your_domain/html;
    index index.html index.htm index.nginx-debian.html;

    server_name your_domain www.your_domain;

    location / {
        try_files $uri $uri/ =404;
    }

    # Reverse proxy for Spring Boot application
    location /api {
        proxy_pass http://your_domain:8080;  # Using my domain name with port 8080
        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_redirect off;
    }

    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/your_domain/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/your_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
}```

Now this set up fails and browser will return error messages such as 'AXIOS error: error network', 'ERR NETWORK' and 'Failed to load resource: net::ERR_SSL_PROTOCOL_ERROR'. This is my first experience trying to set up this kind or reverse proxy and I have tried various other configurations apart from the configuration described above, and all fails and return some variation of errors (https mixed content errors, content not found code 404, etc.) Really hoping someone could help to suggest the fix for this. Thank you in advance.