Nginx / Homeassistant configuration blocking connection

I’m unable to use an nginx reverse proxy to communicate with homeassistant. I’ve spent hours looking at various posts but I have not found a solution.

The nginx server and homeassistant server are running on 2 separate rpi’s. homeassistant is running on a separate downstream IOT dedicated subnet.

There are port forwards setup on the IOT subnet router on ports 80, 443 and 8123.
Homeassistant can be successfully loaded by addressing the router directly. So, I’m confident there is no problem there.

However, accessing homeassistant via nginx produces a strange partially loaded page that doesn’t display login entry etc. On inspecting details using a console on brave browser (firefox produces similar results), I get a number of error 400 - Bad requests.
ie GET https://192.168.68.104/frontend_latest/core.CQKZA2ev5aI.js net::ERR_ABORTED 400 (Bad Request)

The Homeassistant configuration.yaml is as follows

# Loads default set of integrations. Do not remove.
default_config:

# Load frontend themes from the themes folder frontend:
themes:     !include_dir_merge_named themes

automation: !include automations.yaml
script:     !include scripts.yaml
scene:      !include scenes.yaml


http:
  use_x_forwarded_for: true
  trusted_proxies:
    - 127.0.0.1
    - 192.168.68.104 # proxy server on the level up subnet
    - 192.168.68.0/24 # upstream network
    - 192.168.4.0/24 # IOT network

The nginx config below

server {

	root /var/www/html;

	index index.html index.htm index.nginx-debian.html index.php;
    server_name www.********.********.** ********.********.**; # managed by Certbot

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

    access_log   /var/log/nginx/nginx.vhost.access.log;
    error_log    /var/log/nginx/nginx.vhost.error.log debug;

	location / {
        proxy_pass								http://192.168.68.54; # other servers located on this subnet
        include									proxy_params;
        proxy_set_header  Host                 	$host;
    }
    
        
        location /hass/ {
                proxy_pass                              http://192.168.68.50:8123/; # IOT router with port foreward
                proxy_set_header Host                   $http_host;
                proxy_redirect                          http:// https://;
                proxy_http_version                      1.1;
                proxy_set_header X-Forwarded-For        $proxy_add_x_forwarded_for;
                proxy_set_header Upgrade                $http_upgrade;

                proxy_connect_timeout  					86400;
                proxy_send_timeout						86400;
                proxy_read_timeout						86400;
                send_timeout							        86400;

                proxy_set_header Connection 			$connection_upgrade;

    }

}

I’ve spent days on this but making no headway. Would really appreciate some help!!!

Thanks in advance.

You need to enable websocket

      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";

Unfortunately, that didn’t work. Everything was already there I just had to change "
$connection_upgrade;" to “upgrade”.

Thanks anyway

Oh, I missed the “/hass” part.
HA doesn’t support being in a virtual subfolder. You need a virtual hostname.

Thanks Chris.

That last one was the problem

Thanks heaps