Websocket Connections Failing

Hello,
I’m trying to enable Websocket Notifications as directed in the Wiki, but I’m running into issues.
Developer tools say: 502 Bad Gateway when reloading the page.

I’m running Vaultwarden with Docker Compose and an Nginx Reverse Proxy and have proxied my domain through an A record in cloudflare. (I use a static IP)

Server Details:

### Your environment (Generated via diagnostics page)
* Vaultwarden version: v1.29.2
* Web-vault version: v2023.7.1
* OS/Arch: linux/aarch64
* Running within Docker: true (Base: Debian)
* Environment settings overridden: true
* Uses a reverse proxy: true
* IP Header check: true (X-Real-IP)
* Internet access: true
* Internet access via a proxy: false
* DNS Check: true
* Browser/Server Time Check: true
* Server/NTP Time Check: true
* Domain Configuration Check: true
* HTTPS Check: true
* Database type: SQLite
* Database version: 3.41.2

docker-compose file:

version: '3'

services:
  vaultwarden:
    image: vaultwarden/server:latest
    container_name: vaultwarden
    restart: always
    environment:
      DOMAIN: "https://xxx.xxx.com"  # Your domain; vaultwarden needs to know it's https to work properly with attachments
      ADMIN_TOKEN: xxx
      PUSH_ENABLED: true
      PUSH_INSTALLATION_ID: xxx
      PUSH_INSTALLATION_KEY: xxx
    volumes:
      - ./vw-data:/data
    ports:
      - "127.0.0.1:8080:80"
      - "127.0.0.1:3012:3012"

Nginx config file:

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


    listen 80;
    listen [::]:80;
    server_name xxx.xxx.com; #Change this to your domain name
    return 301 https://$host$request_uri;
}

server {
  listen 443 ssl http2;
  listen [::]:443 ssl http2;
  server_name xxx.xxx.com; #Change this to your domain name
  ssl_certificate /etc/letsencrypt/live/xxx.com/fullchain.pem; # managed by Certbot
  ssl_certificate_key /etc/letsencrypt/live/xxx.com/privkey.pem; # managed by Certbot

  # Allow large attachments
  client_max_body_size 128M;

  location / {
    proxy_pass http://0.0.0.0: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;
  }

  location /notifications/hub {
    proxy_pass http://0.0.0.0:3012;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "Upgrade";
  }

  location /notifications/hub/negotiate {
    proxy_pass http://0.0.0.0:8080;
  }

}

Nginx error log:

[error] 64236#64236: *957 upstream prematurely closed connection while reading response header from upstream, client: 127.0.0.1, server: xxx.xxx.com, request: "GET /notifications/hub HTTP/1.1", upstream: "http://0.0.0.0:3012/notifications/hub", host: "xxx.xxx.com"

Based on previous issues, here are the outputs to command commands:

docker exec -i -t vaultwarden curl 127.0.0.1:3012

:
curl: (52) Empty reply from server

curl -i -N -H “Connection: Upgrade” -H “Upgrade: websocket” “http://127.0.0.1:8080/notifications/hub

HTTP/1.1 404 Not Found
content-type: text/html; charset=utf-8
server: Rocket
x-content-type-options: nosniff
x-frame-options: SAMEORIGIN
permissions-policy: accelerometer=(), ambient-light-sensor=(), autoplay=(), battery=(), camera=(), display-capture=(), document-domain=(), encrypted-media=(), execution-while-not-rendered=(), execution-while-out-of-viewport=(), fullscreen=(), geolocation=(), gyroscope=(), keyboard-map=(), magnetometer=(), microphone=(), midi=(), payment=(), picture-in-picture=(), screen-wake-lock=(), sync-xhr=(), usb=(), web-share=(), xr-spatial-tracking=()
referrer-policy: same-origin
x-xss-protection: 0
content-security-policy: default-src 'self'; base-uri 'self'; form-action 'self'; object-src 'self' blob:; script-src 'self' 'wasm-unsafe-eval'; style-src 'self' 'unsafe-inline'; child-src 'self' https://*.duosecurity.com https://*.duofederal.com; frame-src 'self' https://*.duosecurity.com https://*.duofederal.com; frame-ancestors 'self' chrome-extension://nngceckbapebfimnlniiiahkandclblb chrome-extension://jbkfoedolllekgbhcbcoahefnbanhhlh moz-extension://* ; img-src 'self' data: https://haveibeenpwned.com https://www.gravatar.com ; connect-src 'self' https://api.pwnedpasswords.com https://api.2fa.directory https://app.simplelogin.io/api/ https://app.anonaddy.com/api/ https://api.fastmail.com/ https://api.forwardemail.net ;
cache-control: no-cache, no-store, max-age=0
content-length: 1834
date: Thu, 26 Oct 2023 15:50:00 GMT

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="robots" content="noindex,nofollow" />
    <link rel="icon" type="image/png" href="/vw_static/vaultwarden-favicon.png">
    <title>Page not found!</title>
    <link rel="stylesheet" href="/vw_static/bootstrap.css" />
    <link rel="stylesheet" href="/vw_static/404.css" />
</head>

<body class="bg-light">

    <nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4 shadow fixed-top">
        <div class="container">
            <a class="navbar-brand" href="/"><img class="vaultwarden-icon" src="/vw_static/vaultwarden-icon.png" alt="V">aultwarden</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse"
                    aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarCollapse">
                <ul class="navbar-nav me-auto">
            </div>
        </div>
    </nav>

    <main class="container inner content text-center">
        <h2>Page not found!</h2>
        <p class="lead">Sorry, but the page you were looking for could not be found.</p>
        <p class="display-6">
            <a href="/"><img class="vw-404" src="/vw_static/404.png" alt="Return to the web vault?"></a></p>
        <p>You can <a href="/">return to the web-vault</a>, or <a href="https://github.com/dani-garcia/vaultwarden">contact us</a>.</p>
    </main>

    <div class="container footer text-muted content">Vaultwarden (unofficial Bitwarden&reg; server)</div>
</body>
</html>

wscat --connect wss://xxx.xxx.com/notifications/hub

error: Unexpected server response: 502

Could someone please guide me on how to debug this further?