HTTP and websocket on the same port and domain behind reverse proxy

I wanted to try Node-Red and have installed it on my Ubuntu server. This server runs an apache reverse proxy but I can't get it to work right. If I create a virtualhost for the HTTP connection I can access my Node-Red interface just fine, but it doesn't show me any activity such as online MQTT servers or debug messages. After some googling I found out this is because it also uses websockets and those have to be passed through as well.

And here is the puzzle I didnt manage to solve: I can pass through either HTTP or websockets, but not at the same time. If I pass through HTTP, load the Node-Red webinterface, and then change the reverse proxy settings to WS passthrough, I get full functionality. However I'm not able to reload or reconnect to the Node-Red page because HTTP passthrough was removed.

How do I add both on the same domain and port? or is this not possible at all? Here is some of my apache2 configuration:

<VirtualHost *:80>
ServerName nr.domain.com
Redirect permanent / https://nr.domain.com/
RewriteEngine on
RewriteCond %{SERVER_NAME} =nr.domain.com
RewriteRule ^https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

<VirtualHost *:443>
ServerName nr.domain.com
SSLEngine On
<Location />
ProxyPass http://localhost:1880/
ProxyPassReverse http://localhost:1880/
</Location>

Include /etc/letsencrypt/options-ssl-apache.conf
SSLCertificateFile /etc/letsencrypt/live/nr.domain.com/fullchain.pem
SSLCertificateKeyFile /etc/letsencrypt/live/nr.domain.com/privkey.pem
</VirtualHost>

If I add a location with ProxyPass ws:// and so on, the live info and debugger work, but the webinterface is no longer accessible. How do I modify my apache config file in a way that both work?

To enable both HTTP and WebSocket traffic for Node-Red through your Apache reverse proxy, you need to make some modifications to your Apache configuration. Here's what you can try:

1. Enable WebSocket proxying by adding the following lines to the VirtualHost section for Node-Red:

    <Location /ws>
      ProxyPass ws://localhost:1880/ws
      ProxyPassReverse ws://localhost:1880/ws
    </Location>

This tells Apache to proxy all WebSocket traffic to Node-Red.

2. Modify the existing ProxyPass and ProxyPassReverse directives to exclude the WebSocket endpoint. Add the following line after the tag from the previous step:

    ProxyPassMatch "^/(?!ws)(.*)" "http://localhost:1880/$1"

This tells Apache to proxy all HTTP traffic to Node-Red except for the WebSocket endpoint.

The modified VirtualHost section should look like this:

<VirtualHost *:443>
  ServerName nr.domain.com
  SSLEngine On

  <Location /ws>
    ProxyPass ws://localhost:1880/ws
    ProxyPassReverse ws://localhost:1880/ws
  </Location>

  <Location />
    ProxyPassMatch "^/(?!ws)(.*)" "http://localhost:1880/$1"
    ProxyPassReverse http://localhost:1880/
  </Location>

  Include /etc/letsencrypt/options-ssl-apache.conf
  SSLCertificateFile /etc/letsencrypt/live/nr.domain.com/fullchain.pem
  SSLCertificateKeyFile /etc/letsencrypt/live/nr.domain.com/privkey.pem
</VirtualHost>

Restart Apache for the changes to take effect:

sudo systemctl restart apache2

With these changes, both HTTP and WebSocket traffic should be proxied correctly to Node-Red through your Apache reverse proxy.

It looks like you also need to proxy web socket connections as well based on this previous answer.

Try something like this for your configuration.

<VirtualHost *:80>
  ServerName nr.domain.com
  Redirect permanent / https://nr.domain.com/
  RewriteEngine on
  RewriteCond %{SERVER_NAME} =nr.domain.com
  RewriteRule ^https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>

<VirtualHost *:443>
  ServerName nr.domain.com
  SSLEngine On
  <Location />
    ProxyPass http://localhost:1880/
    ProxyPassReverse http://localhost:1880/
  </Location>

  # New web socket proxy
  <Location /comms>       
    ProxyPass ws://localhost:1880/comms
    ProxyPassReverse ws://localhost:1880/comms
  </Location>

  Include /etc/letsencrypt/options-ssl-apache.conf
  SSLCertificateFile /etc/letsencrypt/live/nr.domain.com/fullchain.pem
  SSLCertificateKeyFile /etc/letsencrypt/live/nr.domain.com/privkey.pem
</VirtualHost>