Websocket [socket.io] not working with NGINX Proxy

[amizer12]

Hi,
I have a dashboard build and working fine with uibuilder, problem i`m facing is where i try to display it via nginx reverse proxy - i can see dashboard ok but the data to dashboard is not being displayed as developer tools shows that websocket connection is not established so nothing goes through.

My nginx config:

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

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;
        disable_symlinks off;
        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;

        gzip on;

        include /etc/nginx/conf.d/*.conf;
server{
        listen       80;
      listen       [::]:80;
      location / {
                proxy_pass http://localhost:1880/uibuilder/;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection "Upgrade";
                proxy_set_header Host $host;
}
#rediretion for static resources
        location /uibuilder/ {
                proxy_pass http://localhost:1880/uibuilder/;
}
#redirection for socket connections
        location /socket.io/ {
                proxy_pass              http://localhost:1880/uibuilder/vendor/socket.io/;
                proxy_http_version      1.1;
                proxy_set_header        Upgrade                 $http_upgrade;
                proxy_set_header        Connection              "upgrade";
                proxy_set_header        Host                    $host;
                proxy_set_header        X-Real-IP               $remote_addr;
                proxy_set_header        X-Forwarded-For         $proxy_add_x_forwarded_for;
}
}

Any help on this would be much appreciated !

[TotallyInformation]

Seems you are not alone in having NGINX configuration issues with websockets:

socketio/socket.io#1942

A few things in there to work through.

Actually, it would be good to get a definitive config for NGINX, then we can add that to the WIKI. So I will leave this open, if you wouldn't mind confirming if you found a fix and what it was. Or if the posts in that issue don't help, come back anyway and we can look at other articles.

Though I don't need it, I probably should set up NGINX on my home automation server anyway so that I understand the config better.

[amizer12]

So far i have this below working the way that when called / it redirect to /uibuilder and shows the page and websockets work properly.
I have no idea why it works and redirects as i have / setup to redirect to /ui but live and learn i guess - i`ll keep working on it

ser www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

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;
        disable_symlinks off;
        access_log /var/log/nginx/access.log;
        error_log /var/log/nginx/error.log;
        gzip on;
        include /etc/nginx/conf.d/*.conf;

server{
        listen       80;
        listen       [::]:80;



location /uibuilder {
        proxy_pass http://localhost:1880/uibuilder;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
}

location / {
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
        proxy_set_header Host $host;
    return 301 /ui;
}

location /ui {
        proxy_pass http://localhost:1880/uibuilder;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
}
}
}

[hanc2006]

I use this nginx configuration and everything works fine.

location / {
   proxy_pass http://127.0.0.1:1880;
   proxy_http_version  1.1;
   proxy_cache_bypass  $http_upgrade;
   proxy_set_header Upgrade $http_upgrade;
   proxy_set_header Connection "upgrade";  
   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;
   proxy_set_header X-Forwarded-Host $host;
   proxy_set_header X-Forwarded-Port $server_port;
 } 

[TotallyInformation]

A work in progress but I've added a WIKI article that walks through installation and configuration of NGINX in detail:

https://github.com/TotallyInformation/node-red-contrib-uibuilder/wiki/NGINX

It includes TLS, HTTP/2, HSTS, secure protocol and secure encryption cipher restrictions. It is fully annotated.

[amizer12]

@hanc2006 the problem is that i want to redirect a root e.g. / into uibuilder - not the http admin interface ( which is what you are doing in your config )
So the problem is that for some reason redirecting to localhost:1880/uibuilder/ does not passing websocket communication - despite having all the options required by nginx documentation in it

[TotallyInformation]

Make sure you are redirecting the Editor to a different URL. My settings.js directs the editor to /red.

I've not yet tried to create a separate virtual site for just the uibuilder elements - I'll try to find some time to have a go.

One of the items on my futures list is an option to create a new ExpressJS app just for uibuilder. That would resolve this issue as it would be on a different port and therefore could certainly be proxied independently.

[amizer12]

i`ll give it a go - Having uibuilder as a separate Express app would be a killer feature !

[TotallyInformation]

Your wish is my command!

If you install uibuilder manually using npm install totallyinformation/node-red-contrib-uibuilder#express, you will get a new branch that lets you specify a port in settings.js. If you specify a port that is different to Node-RED's, you will get uibuilder on a custom webserver.

I still need to test https but if you are using NGINX to do https termination, this won't bother you.

Assuming my tests on my live platform work out OK, I'll be putting it live as v3.3.0 very soon.

[amizer12]

So cool ! I'll test it over weekend - thanks so much !!

[TotallyInformation]

Tried it today with Caddy instead of NGINX. Also works very well. Caddy configuration is actually easier than NGINX (well shorter anyway, the docs aren't brilliant).

[github-actions]

Stale issue message