'how do I fix a site certificate protocol error?

I deployed a web application on an ubuntu server and everything work just fine. Until I installed letsencrypt ssl on nginx reverse proxy suddenly my ReactJS frontend throws net::ERR_SSL_PROTOCOL_ERROR error. What am I doing wrong? Both application run on same server.

server {

    root /var/www/html;

    # Add index.php to the list if you are using PHP
    index index.html index.htm index.nginx-debian.html;

    server_name domain.tld www.domain.tld;

    location / {
        # First attempt to serve request as file, then
        # as directory, then fall back to displaying a 404.
        #try_files $uri $uri/ =404;
        proxy_pass http://localhost:5555;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;

    }


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

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


}

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


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


    listen 80 default_server;
    listen [::]:80 default_server;

    server_name domain.tld tld;
    return 404; # managed by Certbot
}

This is my nginx config file above.

My backend is running on the same server on port 9000.

My frontend loads with https correctly but unable to connect to backend on port 9000 on the same machine.

Note: my frontend is on port 5555 accessible through nginx reverse proxy



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source