Frontail behind nginx not working correctly

Setup, Configuration and Use Beginners
1
  • Platform information:
    • Hardware: Raspi 4, 4GB
    • OS: Openhabian 1.6
    • openHAB version: 2.5.10-1 (Release Build)
  • Issue of the topic: I am using Nginx as a reverse proxy and frontail is empty.

Hi everyone,

I am currently migrating my Openhab from a Raspi 3B+ to a Raspi 4. So far the transition was going well, items, binding etc. were migrated correctly (though I did that by hand). Now the only problem that remains is my nginx as reverse proxy.
I already used that with my 3B and there it worked flawlessly. Since I wanted to be able to access my openhab (including logs, paper ui etc.) from the outside, I needed to setup nginx as a reverse proxy. From there, I proxy passed to all the other locations, like grafana or fonrtail. For Frontail, my configuration is as follows:

    location /frontail {
        satisfy any;
    	allow 192.168.178.29;
        allow 192.168.178.26;
    	deny all;
        proxy_set_header Host                   $http_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_pass      http://localhost:9001/frontail;
        }

Accordingly, the frontail service is setup with this location:
ExecStart=/usr/lib/node_modules/frontail/bin/frontail --url-path /frontail --host 127.0.0.1 --ui-highlight --ui-highlight-preset /usr/lib/node_modules/frontail/preset/openhab.json -t openhab -l 2000 -n 200 /var/log/openhab2/openhab.log /var/log/openhab2/events.log

The weird part is, with this configuration in my Raspi 3, everything runs as is should. On the new Raspi however, frontail is not showing the log properly in the browser, it’s simply empty:

grafik
grafik3822×1888 48.8 KB

When I configure frontail without the url-path and host, I can access it through :9001, so the service itself is running correctly.

When I try to access it, my nginx shows the following error log:

2020/11/13 23:30:23 [error] 6005#6005: *9830 connect() failed (111: Connection refused) while connecting to upstream, client: 192.168.178.29, server: <my-openhab-server-address>, request: "GET /frontail/styles/openhab.css HTTP/1.1", upstream: "http://[::1]:9001/frontail/styles/openhab.css", host: "openhabiandevice.fritz.box", referrer: "http://openhabiandevice.fritz.box/frontail/"

192.168.178.29 = my local Windows PC IP trying to access the page
openhabiandevice = Raspi 4 device name in local network

Is there anything else to configure so that my Raspi 4 behaves as the Raspi 3? Nginx config, Frontail Config etc. is all migrated to the new device, so that should not be the problem.

Looking forward to the input of the experts here.

Kind Regards,

Christoph

2

Looks like nginx forwards the request to IPv6 address ( [::1] ) while the service runs on IPv4 address ( 127.0.0.1 ).
Try to use http://127.0.0.1:9001/frontail instead of http://localhost:9001/frontail in your nginx config.

3

Hi Wolfgang,

I tried the step and changed the proxy pass to
proxy_pass http://127.0.0.1:9001/frontail;

Sadly, it still doesn’t work. Any other ideas?

Kind Regards,

Christoph

4

Does nginx only complain about the openhab.css, or are there other similar log entries? If not, what happens if you ssh to your pi and run curl -v http://127.0.0.1/frontail/styles/openhab.css? I’ve had problems with that file being missing/in the wrong place. The file should be in /usr/lib/node_modules/frontail/web/assets/styles

5

Does it return the same error message ? Nginx was restarted resp. configuration reloaded ?

6

@pacive: in the error log this is the only message. In the acces log however, there is an entry
192.168.178.29 - - [14/Nov/2020:10:18:16 +0100] “GET /frontail/socket.io/?EIO=3&transport=websocket HTTP/1.1” 400 45 “-” “Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:82.0) Gecko/20100101 Firefox/82.0”

So apparently an Error 400?

@Wolfgang_S: I restarted the service. Though on further inspection apparently this solution partly worked because the error log isn’t showing anymore new errors.

Also the curl acces worked and the openhab.css is in the correct directory.

The problem still persists though, there is no log visible in frontail. Still, the Error 400 seems to be the problem now.

7

Now I remember having that problem too in the past, try adding proxy_set_header Connection "upgrade"; to your nginx location block. This seems to be required for websockets to work

Edit:
proxy_set_header Upgrade $http_upgrade; might be required as well.

8

The RFC ( see RFC 6455 - The WebSocket Protocol ) states>

When a client starts a WebSocket connection, it sends its part of the
opening handshake. The server must parse at least part of this
handshake in order to obtain the necessary information to generate
the server part of the handshake.

The client’s opening handshake consists of the following parts. If
the server, while reading the handshake, finds that the client did
not send a handshake that matches the description below (note that as
per [RFC2616], the order of the header fields is not important),
including but not limited to any violations of the ABNF grammar
specified for the components of the handshake, the server MUST stop
processing the client’s handshake and return an HTTP response with an
appropriate error code (such as 400 Bad Request).
Then a list of items follows.

So if the hint of @pacive does not work ( that’s also listed there ) you may sniff the network content and you could check item by item.

9

Holy moly it works now. Thank you!! For future solution seekers, here is the complete configuration of my location block:

location /frontail {
    satisfy any;
	allow 192.168.178.29;
    allow 192.168.178.26;
	deny all;
    proxy_set_header Host                   $http_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 Connection 			"upgrade";
    proxy_set_header Upgrade	 			$http_upgrade;
    proxy_pass      http://localhost:9001/frontail;
    }

As you can see, I could change the IP back to localhost and it still works.

Thanks again for the quick help!

10

Note that many openhab UIs (e.g habpanel) also uses websockets to get instant state updates, so you might want to add those lines there as well.