reverse proxy to zwavejs2mqtt container #1396

KLForsythe · 2021-06-30T14:35:25Z

KLForsythe
Jun 30, 2021

I am working on switching from the deprecated zwave integration in home-assistant to the Z-Wave JS integration.

I use home-assistant container, and am working on setting zwavejs2mqtt as another container. I already use nginx as a reverse proxy to access my home-assistant container, and need to set up reverse proxy for the zwavejs2mqtt container as well. (Side note: my docker containers are managed through balena, which is why the reverse proxy is necessary; with balena, only port 80 is accessible, so anything that needs other ports needs a reverse proxy set up to access it - I've used this with home-assistant and other containers without a problem)

I ran into some issues setting up zwavejs2mqtt, and decided to start with just getting zwavejs2mqtt up and running behind the reverse proxy. My current goal is to be able to access the configuration page. However, I am encountering a blank page with 404 errors in the console when I attempt to access it:

Based on the instructions here: https://zwave-js.github.io/zwavejs2mqtt/#/usage/reverse-proxy and updated the config/app.ts file to the following:

import { joinPath } from '../lib/utils'
import { config } from 'dotenv'

config({ path: './.env.app' })

// config/app.js
export const title: string = 'ZWave To MQTT'
export const storeDir: string = process.env.STORE_DIR || joinPath(true, 'store')
export const defaultUser: string =  'admin'
export const defaultPsw: string =  'zwave'
export const sessionSecret: string =  process.env.SESSION_SECRET || 'DEFAULT_SESSION_SECRET_CHANGE_ME'
export const base: string =  '/zwavejs2mqtt'
export const port: string | number =  process.env.PORT || 8091

Starting logs from the container:

29.06.21 16:27:15 (-0400)  zwavejs2mqtt  /bin/sh: git: not found
29.06.21 16:27:15 (-0400)  zwavejs2mqtt  2021-06-29 20:27:15.423 INFO APP: Version: 5.1.0
29.06.21 16:27:15 (-0400)  zwavejs2mqtt  2021-06-29 20:27:15.440 INFO APP: Application path:/usr/src/app
29.06.21 16:27:15 (-0400)  zwavejs2mqtt  
29.06.21 16:27:15 (-0400)  zwavejs2mqtt   ______                       _     ___                  _   _   
29.06.21 16:27:15 (-0400)  zwavejs2mqtt  |___  /                      (_)   |__ \                | | | |  
29.06.21 16:27:15 (-0400)  zwavejs2mqtt     / /_      ____ ___   _____ _ ___   ) |_ __ ___   __ _| |_| |_ 
29.06.21 16:27:15 (-0400)  zwavejs2mqtt    / /\ \ /\ / / _` \ \ / / _ \ / __| / /| '_ ` _ \ / _` | __| __|
29.06.21 16:27:15 (-0400)  zwavejs2mqtt   / /__\ V  V / (_| |\ V /  __/ \__ \/ /_| | | | | | (_| | |_| |_ 
29.06.21 16:27:15 (-0400)  zwavejs2mqtt  /_____|\_/\_/ \__,_| \_/ \___| |___/____|_| |_| |_|\__, |\__|\__|
29.06.21 16:27:15 (-0400)  zwavejs2mqtt                              _/ |                      | |        
29.06.21 16:27:15 (-0400)  zwavejs2mqtt                             |__/                       |_|        
29.06.21 16:27:15 (-0400)  zwavejs2mqtt  
29.06.21 16:27:15 (-0400)  zwavejs2mqtt  2021-06-29 20:27:15.524 WARN STORE: settings.json not found
29.06.21 16:27:15 (-0400)  zwavejs2mqtt  2021-06-29 20:27:15.528 WARN STORE: scenes.json not found
29.06.21 16:27:15 (-0400)  zwavejs2mqtt  2021-06-29 20:27:15.533 WARN STORE: nodes.json not found
29.06.21 16:27:15 (-0400)  zwavejs2mqtt  2021-06-29 20:27:15.722 INFO APP: Listening on port 8091 host 0.0.0.0 protocol HTTP
29.06.21 16:27:15 (-0400)  zwavejs2mqtt  2021-06-29 20:27:15.977 ERROR GATEWAY: Zwave settings are not valid
29.06.21 16:27:49 (-0400)  zwavejs2mqtt  2021-06-29 20:27:49.174 INFO APP: GET /zwavejs2mqtt 200 72.724 ms - 1371
29.06.21 16:27:53 (-0400)  zwavejs2mqtt  2021-06-29 20:27:53.175 INFO APP: GET /zwavejs2mqtt 304 16.882 ms - -
29.06.21 16:42:28 (-0400)  zwavejs2mqtt  2021-06-29 20:42:28.962 INFO APP: GET /zwavejs2mqtt 304 10.836 ms - -

docker-compose.yml (note that the home-assistant container and another container running mosquitto are usually included in my docker-compose file; I'll add those back in once I have the configuration page for zwavejs2mqtt accessible behind the reverse proxy) (Also note that the I have confirmed that /dev/ttyACM0 is correct) (Also note that I need to use docker-compose version 2.1 because that is what balena supports)

version: '2.1'
volumes:
  store:
  zwave-config:
    name: zwave-config
services:
  sh_nginx:
    container_name: sh_nginx
    build: ./sh_nginx
    restart: always
    privileged: true
    labels:
      io.balena.features.dbus: '1'
    ports:
      - 80:80
  zwavejs2mqtt:
    container_name: zwavejs2mqtt
    image: zwavejs/zwavejs2mqtt:5.1.0
    restart: always
    tty: true
    stop_signal: SIGINT
    environment:
      - SESSION_SECRET=mysupersecretkey
    devices:
      - "/dev/ttyACM0:/dev/ttyACM0"
    volumes:
      - "store:/usr/src/app/store"
    ports:
      - '8091:8091' # port for web interface
      - '3000:3000' # port for zwave-js websocket server

I've tried several different nginx configurations for setting up the reverse proxy, here are two of them:

server {
  listen 80;
  server_name localhost;
  resolver 127.0.0.11;  # Docker DNS

  # Apps
  location ~ ^/zwavejs2mqtt {
    set $zwavejs2mqtt http://zwavejs2mqtt:8091;
    proxy_pass $zwavejs2mqtt/$1;
  }
}

This one is based on https://zwave-js.github.io/zwavejs2mqtt/#/usage/reverse-proxy

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

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

    location /zwavejs2mqtt {
        rewrite ^ $request_uri;
        rewrite '^/zwavejs2mqtt(/.*)$' $1 break;
        proxy_set_header X-External-Path /zwavejs2mqtt;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_pass http://zwave:8091$uri;
    }
}

Unfortunately, when I attempt to access the configuration page for zwavejs2mqtt, I see a blank page, and on checking the console, I see 404 errors (see screenshot at the beginning of this issue)

I would greatly appreciate any assistance. Any ideas what might be causing the 404 errors and how I can resolve them so I can access the configuration page?

Answered by robertsLando

Jun 30, 2021

Try to se /zwavejs2mqtt/ in base settings

And use this:

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

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

    location /zwavejs2mqtt {
        rewrite '^/zwavejs2mqtt(/.*)$' $1 break;
		proxy_pass http://localhost:8091;
        proxy_set_header X-External-Path /zwavejs2mqtt;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
    }
}

View full answer

robertsLando · 2021-06-30T15:21:28Z

robertsLando
Jun 30, 2021
Maintainer

Try to se /zwavejs2mqtt/ in base settings

And use this:

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

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

    location /zwavejs2mqtt {
        rewrite '^/zwavejs2mqtt(/.*)$' $1 break;
		proxy_pass http://localhost:8091;
        proxy_set_header X-External-Path /zwavejs2mqtt;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
    }
}

6 replies

robertsLando Jul 1, 2021
Maintainer

This: https://github.com/zwave-js/zwavejs2mqtt/blob/master/config/app.ts#L12

KLForsythe Jul 1, 2021
Author

@robertsLando Thanks so much! Your suggestion led me to the solution. (For anyone else using balena who comes across this, I did need to update the proxy_pass setting to proxy_pass http://zwavejs2mqtt:8091;, but otherwise this solution worked.

I really appreciate your help!

robertsLando Jul 2, 2021
Maintainer

@KLForsythe Could you post your entire solution (nginx configuration and app base config) so it may help other users? Thanks to you :)

KLForsythe Jul 2, 2021
Author

@robertsLando Absolutely!

nginx config:

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

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

    location /zwavejs2mqtt {
        rewrite '^/zwavejs2mqtt(/.*)$' $1 break;
        proxy_pass http://zwavejs2mqtt:8091;
        proxy_set_header X-External-Path /zwavejs2mqtt;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
    }
}

app.ts

import { joinPath } from '../lib/utils'
import { config } from 'dotenv'

config({ path: './.env.app' })

// config/app.js
export const title: string = 'ZWave To MQTT'
export const storeDir: string = process.env.STORE_DIR || joinPath(true, 'store')
export const defaultUser: string =  'admin'
export const defaultPsw: string =  'zwave'
export const sessionSecret: string =  process.env.SESSION_SECRET || 'DEFAULT_SESSION_SECRET_CHANGE_ME'
export const base: string =  '/zwavejs2mqtt/'
export const port: string | number =  process.env.PORT || 8091

ginjo Feb 29, 2024

Running zwave-js-ui with a custom BASE_PATH, behind an nginx reverse proxy, this nginx config works and allows the websocket to connect properly. Thank you! 😄

Krakinou · 2022-11-21T21:45:10Z

Krakinou
Nov 21, 2022

Hello,
I know I'm answering years after it has been answered, but I got it working just by using the following nginx config in the location settings:

location __PATH__/ {

        proxy_set_header X-External-Path __PATH__;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
        proxy_pass	http://127.0.0.1:__PORT__/;
}

Notice the trailing slash after the port (and the location, although I don't know if this one is required).
No need for a rewrite nor changing the path in app.ts.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

reverse proxy to zwavejs2mqtt container #1396

{{title}}

Replies: 2 comments 6 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

Select a reply

reverse proxy to zwavejs2mqtt container #1396

KLForsythe Jun 30, 2021

Replies: 2 comments · 6 replies

robertsLando Jun 30, 2021 Maintainer

robertsLando Jul 1, 2021 Maintainer

KLForsythe Jul 1, 2021 Author

robertsLando Jul 2, 2021 Maintainer

KLForsythe Jul 2, 2021 Author

ginjo Feb 29, 2024

Krakinou Nov 21, 2022

KLForsythe
Jun 30, 2021

Replies: 2 comments 6 replies

robertsLando
Jun 30, 2021
Maintainer

robertsLando Jul 1, 2021
Maintainer

KLForsythe Jul 1, 2021
Author

robertsLando Jul 2, 2021
Maintainer

KLForsythe Jul 2, 2021
Author

Krakinou
Nov 21, 2022