[FIXED] How to configure apache to reverse proxy a website and a websocket server

Issue

I have a website running in docker that is served in https via a reverse proxy. That application make uses of a websocket server on the same server in another container.

I can either have the app to work in https or the websocket to correctly proxy the wss requests to the backend ws server.

Here is a little schema:

Whenever I add the second virtualhost to my config, I can now connect to wss://app.mydomain.com succesffully, but the app at https://app.mydomain.com becomes insecure and can't be properly accessed.

If I remove it, I can access to the app with https, but cannot connect to wss.

Here is my apache config:

<VirtualHost *:80>
  ServerName app.mydomain.com

  ProxyPreserveHost on
  ProxyPass / http://10.160.x.x:8030/
  ProxyPassReverse / http://10.160.x.x:8030/

  #ProxyPass /app/ ws://10.160.x.x:6001/app/
  #ProxyPassReverse /app ws://10.160.x.x:6001/app

  RewriteEngine on
  RewriteCond %{SERVER_NAME} =app.mydomain.com
  RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]

</VirtualHost>

<VirtualHost *:443>
  ServerName app.mydomain.com

  RewriteEngine on
  RewriteCond ${HTTP:Upgrade} websocket [NC]
  RewriteCond ${HTTP:Connection} upgrade [NC]
  RewriteRule .* "wss://app.mydomain.com/$1" [P,L]

  ProxyPass /app/ ws://10.160.x.x:6001/app/
  ProxyPassReverse /app/ ws://10.160.x.x:6001/app/
  ProxyRequests off

</VirtualHost>

How can I edit the config file to access the website trought https while being able to connect to the websocket server?

Solution

This is what finally worked:

<VirtualHost *:80>
  ServerName app.mydomain.com

  RewriteEngine on
  RewriteCond %{SERVER_NAME} =app.mydomain.com
  RewriteRule ^ https://%{SERVER_NAME}%{REQUEST_URI} [END,NE,R=permanent]
</VirtualHost>


<VirtualHost *:443>
  ServerName app.mydomain.com

  ProxyPreserveHost on

  RewriteEngine on
  RewriteCond ${HTTP:Upgrade} websocket [NC]
  RewriteCond ${HTTP:Connection} upgrade [NC]
  RewriteRule .* "wss://app.mydomain.com/$1" [P,L,END]

  ProxyPass /app/ ws://10.160.x.x:6001/app/
  ProxyPassReverse /app/ ws://10.160.x.x:6001/app/

  ProxyPreserveHost on

  ProxyPass / http://10.160.x.x:8030/
  ProxyPassReverse / http://10.160.x.x:8030/

  SSLCertificateFile /etc/letsencrypt/live/app.mydomain.com/cert.pem
  SSLCertificateKeyFile /etc/letsencrypt/live/app.mydomain.com/privkey.pem
  Include /etc/letsencrypt/options-ssl-apache.conf
  SSLCertificateChainFile /etc/letsencrypt/live/app.mydomain.com/chain.pem
</VirtualHost>

Answered By - naghal

Answer Checked By - David Goodson (PHPFixing Volunteer)