How to use node on localhost with nginx reverse proxy

My understanding is that, in this setup I run a websocket server(node) on localhost and use the Nginx reverse proxy that sits in front of it to handle the handshake and persistent connection.

The problem that I'm facing is:

> Mixed Content: The page at 'domain.com' was loaded over HTTPS,
> but attempted to connect to the insecure WebSocket endpoint
> 'ws://domain.com:8020/'. This request has been blocked; this endpoint
> must be available over WSS.
>
> Uncaught DOMException: Failed to construct 'WebSocket': An insecure
> WebSocket connection may not be initiated from a page loaded over
> HTTPS.

So, do I need to have another certificate for the websocket as well ?

Here is the nginx config:

http {
...

upstream websocket {
	server 127.0.0.1:8080;
}

	server {
		listen 8020;

		location / {
			proxy_pass http://websocket;
			proxy_http_version 1.1;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection $connection_upgrade;
			proxy_set_header Host $host;
			proxy_read_timeout 1d;
			proxy_send_timeout 1d;
		}
	}
	
	server {
		listen 80 default_server;
		listen [::]:80 default_server;

		listen 443 ssl default_server;
		listen [::]:443 ssl default_server;

		ssl_certificate     /location/cert.pem;
		ssl_certificate_key /location/cert-key.pem;

		root /var/www/html/app;

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

		server_name _;

		location / {		
			# First attempt to serve request as file, then
			# as directory, then fall back to displaying a 404.
			try_files $uri $uri/ =404;
		}

	}


}
----------------------------------------
Node:
const wss = new WebSocketServer({port: 8080})

Client:
const socket = new WebSocket('ws://domain.com:8020')

Should note that everything works while using http, just not sure how to make it work with https.

Found it, just hat to move the ssl_certificate and sl_certificate_key in the http block, new to nginx but I'm guessing that way they get inherited in both server blocks.

Also change ws to wss in js.

http {
...

ssl on; # or use listen ssl on is deprecated

ssl_certificate     /location/cert.pem;
sl_certificate_key /location/cert-key.pem;


upstream websocket {
	server 127.0.0.1:8080;
}

	server {
		listen 8020;

		location / {
			proxy_pass http://websocket;
			proxy_http_version 1.1;
			proxy_set_header Upgrade $http_upgrade;
			proxy_set_header Connection $connection_upgrade;
			proxy_set_header Host $host;
			proxy_read_timeout 1d;
			proxy_send_timeout 1d;
		}
	}
	
	server {
		listen 80 default_server;
		listen [::]:80 default_server;

		listen 443 ssl default_server;
		listen [::]:443 ssl default_server;

		root /var/www/html/app;

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

		server_name _;

		location / {		
			# First attempt to serve request as file, then
			# as directory, then fall back to displaying a 404.
			try_files $uri $uri/ =404;
		}

	}


}
----------------------------------------
Node:
const wss = new WebSocketServer({port: 8080})

Client:
const socket = new WebSocket('wss://domain.com:8020')