Frontail not Loading properly with NGINX

Hey guys,

So I am trying to set up Frontail with Reverse Proxy with NGINX and it seems to half work. It shows something but not the whole thing.

I followed the recommendation from [SOLVED] How to config frontail log with nginx?

I also updated the config in /etc/systemd/system/frontail.service to (also change host ip to the IP of the Pi)

ExecStart=/usr/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

I can reach http://192.168.2.10:9001 Just fine and shows all the graphics and everything.

Here is my config File: I have tried http://192.168.2.10:9001/;

location /frontail/ {
        proxy_pass                              http://192.168.2.10:9001/;
        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;
        satisfy                                 any;
        allow                                   192.168.1.0/24;
        allow                                   192.168.2.0/24;
        allow                                   192.168.8.0/24;
        allow                                   192.168.9.0/24;
        allow                                   127.0.0.1;

        deny                                    all;
        auth_basic                              "Username and Password Required";
        auth_basic_user_file                    /etc/nginx/.htpasswd;
    }

If i try: http://localhost:9001/; in the above config

I get: 502 Bad Gateway:nginx/1.10.3

So I put the config back to the IP of the OpenHABianPi and I get the same thing from the picture above.

Any ideas for the half working Frontail?

Thanks!

Justin

@fals3illusion
I’ve been trying to do the same thing with frontail and am getting the same issue as you showed in your post above.

I have PaperUI, BasicUI & Grafana all working through NGINX OK.

Like you, I tried the various suggestions in
[SOLVED] How to config frontail log with nginx?
without success.

Did you manage to solve it yourself?

I did get it to work in the end. I followed this guide https://www.openhab.org/docs/installation/security.html
This is what I have for my config files for the portion of the frontail part of my /etc/nginx/sites-enabled/openhab file.

server {
    listen                          443 ssl;
    server_name                     openhab.YOURSITENAME.com;

    ssl_certificate                 /etc/letsencrypt/live/openhab.YOURSITENAME.com/fullchain.pem;
    ssl_certificate_key             /etc/letsencrypt/live/openhab.YOURSITENAME.com/privkey.pem;
    add_header                      Strict-Transport-Security "max-age=31536000";



location /frontail/ {

        proxy_pass                              http://192.168.2.37:9001;
        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;
        satisfy                                any;
        allow                                  192.168.1.0/24;
        allow                                   192.168.2.0/24;
        allow                                   192.168.9.0/24;
        allow                                   127.0.0.1;

        deny                                    all;
        auth_basic                              "Username and Password Required";
        auth_basic_user_file                    /etc/nginx/.htpasswd;

        }


    #### When using Let's Encrypt Only ####
    location /.well-known/acme-challenge/ {
        root                                    /var/www/openhab.YOURSITENAME.com;
    }
}

Then you have to edit /etc/systemd/system/frontail.service : add --url-path /frontail to the ExecStart line:

ExecStart=/usr/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

This is mine, I think mine started working once I put the actual Pi’s IP Address :

ExecStart=/usr/bin/frontail --url-path /frontail --host 192.168.2.37 --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

execute sudo systemctl daemon-reload and sudo systemctl restart frontail

Then you should be able to access frontail from openhab.YOURSITENAME.com/frontail

Hope this helps you.

@fals3illusion Thanks for the update and your solution.

My setup is now ‘identical’ to yours but still not working.

On my local connection i.e. ‘http://<local IP>:9001’ I get :

Cannot GET /

From the remote connection i.e. ‘https://<remote IP>/frontail/’ I get:

502 Bad Gateway
nginx/1.14.2

I have tried various combinations of using the explicit local IP or ‘localhost/127.0.0.1’ in the NGINX proxy_pass setting and the frontail config file --host setting.
All my other NGINX services (BasicUI, PaperUI, Grafana) work OK.

I will test some more later.

Maybe try it without the port number?

https://<local IP>/frontail/

Also, I got the Cannot GET when I did only http not HTTPS

@fals3illusion
I got to the bottom of it! I had a slash ‘/’ at the end of the proxy_pass entry in my NGINX config (between the ‘1’ of ‘9001’ and the semicolon). Even though the other entries in the file have the slash and work OK it seems to cause a problem with frontail. My NGINX config frontail section now looks like this:

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

The ExecStart line in my frontail.service now looks like this:

ExecStart=/usr/bin/frontail --url-path /frontail --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

I didn’t need the --host 127.0.0.1 entry.

Local access to frontail has to be by an https URL:

https://<local IP>/frontail/

Remote access is similar:

https://<remote IP>/frontail/

Hi,

Sofar with the above I get a /frontail log page with orange header, but not get NO logs are showing :frowning:

Under Network I get :
404 Bad request to wss://xxx/frontail/socket.io/?EIO=3&transport=websocket

In addition openhab3 only works with nginx location/ {…
if I change to location/openhab { …
I just get a black page as I believe its trying to check user rights… for some root location.

I get 404 for https://xxx/rest/ui/tiles + https://xxx/rest/

looing forward to an easy solution

I have exactly the same problem, did you figure it out in the mean time?

No unfortunately not.
I got grafana to work via location/grafana by adding the enabling url to grafana.ini.
root_url = %(protocol)s://%(domain)s:%(http_port)s/grafana

here my working frontail config.

I only added --url-path /frontail to frontail.services and this for ngnix

location /frontail {
proxy_pass http://127.0.01:9001;

    proxy_redirect off;
    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_http_version                      1.1;
    proxy_pass_request_headers              on;
    proxy_set_header Connection             "upgrade";
    proxy_store                             off;
    proxy_set_header Upgrade                $http_upgrade;
    
    access_log                              off; # that is important otherwise too many sockets in your log

    ## Password Protection
    auth_basic                              "Restricted";
    auth_basic_user_file                    /etc/nginx/.htpasswd;
    
    # allow local network 
    satisfy                                 any;
    allow                                   192.168.0.0/24;
    allow                                   127.0.0.1;
    deny                                    all;
}

thx but with your config I only get this displayed on the web:

did you add --url-path /frontail to /etc/systemd/system/frontail.service ??

ExecStart=/usr/lib/node_modules/frontail/bin/frontail --url-path /frontail --ui-highlight --ui-highlight-preset /usr/lib/node_modules/frontail/preset/openhab_dark.json -t openhab_dark -l 2000 -n 200 /var/log/openhab/openhab.log /var/log/openhab/events.log

In /etc/systemd/system/frontail.service make sure that the Style sheet specified on the ExecStart line (the one after the ‘-t’) actually exists.

It should be present in the /usr/local/lib/node_modules/frontail/web/assets/styles directory. In Rar9’s example it would be a file named openhab_dark.css.

If it is missing, try to find it or change the config to point to default.css i.e. change -t option to default. I believe a default.css style is always present.

If that doesn’t work try this:

Edit /usr/local/lib/node_modules/frontail/web/index.html and see 'REMOVE LINE…'comment below.

<script src="__PATH__/socket.io/socket.io.js"></script>
<script src="__PATH__/tinycon.min.js"></script>
<script src="__PATH__/ansi_up.js"></script>
<script src="__PATH__/app.js"></script>
<script type="text/javascript">
    var socket = new io.connect('/__NAMESPACE__', {
        path: '__PATH__/socket.io',
        transports: ['websocket']		** REMOVE THIS LINE AND THE COMMA ON PREVIOUS LINE
    });

    window.load = App.init({
        socket: socket,
        container: document.getElementsByClassName('log')[0],
        filterInput: document.getElementsByClassName('query')[0],
        pauseBtn: document.getElementsByClassName('btn-pause')[0],
        topbar: document.getElementsByClassName('topbar')[0],
        body: document.getElementsByTagName('body')[0]
    });
</script>

great it works!!! thx a lot!

since I’m on openhabian it’s probably not at the same location since I can’t find this place you suggested

Sorry was busy, I’m on openhabian as well… What’s not working? What can’t you find?

Anybody managed to redefine the default nginx

location /
To something like location /openhab?

I believe something elseis yet again doing another redirect.

it’s working now for me can’t remember the problem thx anyway