Running Theia IDE behind an Apache reverse proxy

Today I tried to get Theia IDE running behind an Apache reverse proxy. Theia IDE runs in a Docker container and Apache forwards the requests to the new subdomain to this container. The page would load but I was stuck on the splash screen and the editor didn’t open. After a few seconds I got a timeout message in the container’s log file.

I found quite a few configuration examples for Nginx as the reverse proxy, but none for Apache webserver. However, after quite some time of trial and error I finally found the solution in one of the comments on this GitHub issue: Stuck at Theia Preload when using nginx proxy. As it turns out, WebSockets weren’t forwarded correctly and had to be rewritten in the VirtualHost’s config.

Here is my working configuration file for running Theia IDE in a Docker container on port 3333 behind an Apache reverse proxy:

<VirtualHost *:443>
    ServerName theia.domain.tld
    ServerAdmin webmaster@domain.tld
    
    ProxyPreserveHost On
    ProxyRequests Off
    
    # allow websockets
    RewriteEngine On
    RewriteCond %{HTTP:Upgrade} =websocket [NC]
    RewriteRule /(.*)           ws://127.0.0.1:3333/$1 [P,L]
    RewriteCond %{HTTP:Upgrade} !=websocket [NC]
    RewriteRule /(.*)           http://127.0.0.1:3333/$1 [P,L]
    
    ProxyPass / http://127.0.0.1:3333/
    ProxyPassReverse / http://127.0.0.1:3333/
    
    LogLevel warn
    ErrorLog ${APACHE_LOG_DIR}/theia.error.log
    CustomLog ${APACHE_LOG_DIR}/theia.access.log combined
    Include /etc/letsencrypt/options-ssl-apache.conf
    SSLCertificateFile /etc/letsencrypt/live/theia.domain.tld/fullchain.pem
    SSLCertificateKeyFile /etc/letsencrypt/live/theia.domain.tld/privkey.pem
</VirtualHost>

Leave a Comment

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax