Enable wss connection in NGINX - nginx

Question

I am troubleshooting the Nginx configuration to allow for web sockets. The WebSocket works perfectly, but when testing the implementation behind an NGINX server, the WSS connection fails.
There are no error logs in the node behind NGINX (http://127.0.0.1:5000).
Chrome Log:
When I attempt to connect to the WebSocket on the client level, I get the console error in Chrome:
WebSocket connection to 'wss://<domain>/socket/?EIO=4&transport=websocket&sid=fL4zwiY3jykAkO1XAADU ' failed
NGINX Log response:
In the NGINX log, I see the following "Internal server error":
<IP> <DATE> "GET /socket/?EIO=4&transport=websocket&sid=fL4zwiY3jykAkO1XAADU HTTP/1.1" 500 110 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.81 Safari/537.36"
Note that there is no error in the service behind the NGINX, so we know the issue lies with NGINX.
NGINX Configuration
user www-data;
worker_processes auto;
pid /run/nginx.pid;
events {
worker_connections 768;
}
http {
sendfile on;
tcp_nopush on;
tcp_nodelay on;
keepalive_timeout 65;
types_hash_max_size 2048;
include /etc/nginx/mime.types;
default_type application/octet-stream;
client_max_body_size 100M;
ssl_protocols TLSv1 TLSv1.1 TLSv1.2; # Dropping SSLv3, ref: POODLE
ssl_prefer_server_ciphers on;
access_log /var/log/nginx/access.log;
error_log /var/log/nginx/error.log;
gzip on;
map $http_upgrade $connection_upgrade{
default upgrade;
`` close;
}
upstream websocket{
server 127.0.0.1:5000;
}
server {
listen [::]:443 SSL;
listen 443 SSL;
root /var/www/html;
ssl on;
index index.html index.htm index.nginx-debian.html;
server_name _;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header X-Forwarded-Proto $scheme;
location /socket {
proxy_pass http://websocket;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
# SSL Settings by Certbot
ssl_certificate /etc/letsencrypt/live/<domain>/fullchain.pem;
ssl_certificate_key /etc/letsencrypt/live/<domain>/privkey.pem;
include /etc/letsencrypt/options-ssl-nginx.conf;
ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem;
}
server {
# Redirect HTTP to HTTPS
listen 80 ;
listen [::]:80 ;
return 301 https://$host$request_uri;
server_name <domain>;
return 404; # managed by Certbot
}
}
NGINX Version:
nginx/1.18.0 (Ubuntu)
A normal WebSocket seems to work perfectly fine (ws://). But the secure WebSocket (wss://) doesn't work. I have been looking all over for a solution, but are unable to find the issue.
What alteration should I make to the configuration in order for the NGINX to allow wss:// sockets and not throw 500 Internal Server Error.

Answer 1

I found the solution, I will post the answer here if someone encounters the same issue in the future.
Explanation:
My stack was:
React (using socket.io-client)
Nginx as reverse Proxy
Docker for image and container management
waitress-serve as ENTRYPOINT for the python code
Flask-SocketIO as Python backend.
There were no logs indicating any issues. After looking looking at nginx logs with DEBUG level using the following line in nginx.conf.
error_log /var/log/nginx/error.log debug;
I noticed that the 500 error in the normal nginx log was coming from waitress.
Waitress does not support (at least not the version I was using) websockets. This is implicitly implied with Flask-SocketIO since waitress is not listed as a deployment option here in the docs.
Solution:
Replace waitress with Gunicorn. The websockets works like a charm. No need for polling anymore (which is a silent bug waiting to blow up in your face).