Apache Reverse Proxy For Penpot Docker Web Socket

Penpot is an open source alternative for Adobe Figma. I self-host Penpot using Docker (instructions), and setup Apache web server as reverse proxy.

Unfortunately Penpot only provide configurations for Nginx, but not Apache. This is what I added within <VirtualHost> to make it work.

Prequsite: Make sure these modules are loaded: mod_proxy, mod_proxy_http, mod_proxy_wstunnel, mod_rewrite.

# Reverse proxy for websocket
RewriteEngine On
RewriteCond %{HTTP:Upgrade} websocket [NC]
RewriteCond %{HTTP:Connection} upgrade [NC]
RewriteRule /(.*) ws://127.0.0.1:9001/$1 [P,L]

ProxyPreserveHost On
ProxyPass / http://127.0.0.1:9001/
ProxyPassReverse / http://127.0.0.1:9001/

RemoteIPHeader X-Real-IP
RemoteIPHeader X-Forwarded-For
RequestHeader set X-Scheme expr=%{REQUEST_SCHEME}
RequestHeader set X-Forwarded-Proto expr=%{REQUEST_SCHEME}

If you change the Penpot Frontend port number, make sure you change the configurations above accordingly. The websocket and proxy configurations are important, configuring of HTTP headers are optional.