Document common reverse proxy usages

[knoobie]

The documentation should contain information about the common combination of Vaadin (Flow) applications behind reverse proxies:

• HTTP(S) + Push (WS)
• AJP + Push (WS)
• Load Balancing with Sticky Session

Vaadin configuration:

• Vaadin deployed on /app and reverse proxy forwarding anything from /app to the Vaadin app
• Vaadin deployed on / and reverse proxy forwarding anything from / to the Vaadin app
• Vaadin deployed on /app and reverse proxy forwarding anything from / to the Vaadin app

Reverse Proxies to be covered:

• Apache HTTP Server (2.4)
• NGINX
• Kubernetes Ingress Controller
• Microsoft IIS?

Related to:

• Resynchronizing UI by client's request flow#14232
• Websocket in combination with AJP broken behind reverse-proxy in 23.2. flow#14641

[jouni]

I’m quite a bit our of my league here on this topic (and it seems there isn't that much knowledge within Vaadin), and I would very much appreciate if you could provide some quick draft content what you could expect to find the docs 🙏

[knoobie]

I would expect to find example configuration for the shown combination from above :)

There are so many questions over the years on the old forum, discord, stack overflow and GitHub dating back to even Vaadin 7 on "how to configure a Reverse Proxy to handle Vaadin application" that it is a must have in my opinion to have some basic examples in the docs that are tested and official supported by Vaadin.

I have personally managed to get most of those configuration working over the years but after the current change in 23.2 most of my configuration are broken and I currently don't know of a proper way to get them back working - that's why I created this issue to hopefully get an "official" way "provided" by Vaadin which doesn't rely on "bugs".

I have selected apache and nginx because they are the primary reverse proxies used in corporate environments (without container) and ingress because it's the default option once you go full kubernetes (at least there should be some knowledge somewhere in Vaadin with the k8s blue green kit).

[knoobie]

Once the suggested change by Mikhail is released, I'm happy to share some of our (then working again) configuration - so that you have examples and we a long-term working solution again ;)

[knoobie]

Another example shared by @a-schild on discord tonight https://techtuxwords.blogspot.com/2022/10/running-vaadin-tomcat-cluster-behind.html

[knoobie]

Apache Httpd 2.4+ Reverse Proxy Example for AJP + WS based on 23.3.rc.1+

Application is running with context-path: app. disablereuse, retry and keepalive parameter are used to improve the situation with complex networks where the apache httpd server is connected to the other server with strict and dedicated firewalls in between.

  <Location /app/>
    ProxyPass                ajp://application-server-name-or-ip:8009/app/ disablereuse=On retry=0 keepalive=On
    ProxyPassReverse  ajp://application-server-name-or-ip:8009/app/
  </Location>

  <Location /app/VAADIN/push>
    ProxyPass                 ws://application-server-name-or-ip:8080/app/VAADIN/push retry=0 keepalive=On
    ProxyPassReverse   ws://application-server-name-or-ip:8080/app/VAADIN/push
  </Location>

The same configuration can be enhanced with multiple services to load balance based on STICKYSESSION like so:

    <Proxy "balancer://application-balancer/">
        BalancerMember  "ajp://application-server-name-or-ip:8009/app" route=balance1 disablereuse=On retry=0 keepalive=On
        BalancerMember  "ajp://application-server-name-or-ip:8009/app" route=balance2 disablereuse=On retry=0 keepalive=On
        ProxySet stickysession=BALANCEID
    </Proxy>


    <Location /app/>
        Header add Set-Cookie "BALANCEID=.%{BALANCER_WORKER_ROUTE}e;path=/app;HttpOnly;Secure" env=BALANCER_ROUTE_CHANGED
        ProxyPass               "balancer://application-balancer/"
        ProxyPassReverse        "balancer://application-balancer/"
    </Location>

    <Proxy "balancer://application-push-balancer/">
        BalancerMember  "ws://application-server-name-or-ip:8080/app/VAADIN/push" route=balance1 retry=0 keepalive=On
        BalancerMember  "ws://application-server-name-or-ip:8080/app/VAADIN/push" route=balance2 retry=0 keepalive=On
        ProxySet stickysession=BALANCEID
    </Proxy>

    <Location /app/VAADIN/push>
        ProxyPass               "balancer://application-push-balancer/"
        ProxyPassReverse        "balancer://application-push-balancer/"
    </Location>

[mcollovati]

Sharing also here a repo with a couple of reverse-proxy test configurations https://github.com/mcollovati/vaadin-reverse-proxy-tests

WARNING: may not be completely up-to-date

[knoobie]

Latest config idea by @mcollovati

So, it looks like to me that the following configuration (that used to work for me in the past) is not performing the connection upgrade

RewriteEngine on
RewriteCond %{HTTP:Upgrade} websocket [NC]
RewriteCond %{HTTP:Connection} upgrade [NC]
RewriteRule ^/?(.*) "ws://vaadin:8080/example/example/$1" [P,L]
ProxyPass                      http://vaadin:8080/example/example/
ProxyPassReverse        http://vaadin:8080/example/example/

But I was able to make it work by using the upgrade=websocket flag in the ProxyPass directive, as mentioned in the docs

ProxyPass               http://vaadin:8080/example/example/ upgrade=websocket
ProxyPassReverse        http://vaadin:8080/example/example/

Here's the link to the Apache docs example: https://httpd.apache.org/docs/2.4/mod/mod_proxy.html#wsupgrade

I hope this will help