Self deployed on a VPS behind an NGINX reverse proxy ... Backend dropouts

[paraplegic]

I'm using rootless podman container(s) to run a Reflex app on a cloud VPS behind a native NGINX reverse proxy. The problem I'm getting is that some browsers have a back-end timeout, while Firefox does not (at least not on all platforms). Chromium is consistently unable to connect to the back end. I've searched extensively for solutions, and tried a lot, but thus far, I'm coming up blank. I am thinking about switching out NGINX, but that seems extreme.

nginx.txt

Podman pod is working great, and the Front end is using CADDY to serve the static site (3001) and the Back end is using reflex run in PROD mode (8001) to run on the localhost ports. AFAICT I have done everything correctly, but as the results are PARTIAL success (FIrefox is OK, Chrome/Chromium is not). Also tried unsuccessfully Thorium, Brave etc on Ubuntu, and Chromium/Firefox on FreeBSD. Clearly, I am missing something. Has anyone seen this problem before?

[paraplegic]

I am investigating switching from NGINX to Caddy. :-/ Would prefer an NGINX solution. Anyone?

[paraplegic]

The Chromium console is showing this error:

Mixed Content: The page at 'https://aquaterrapm.ca/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://aquaterrapm.ca/_event/?token=087e610b-20f0-451a-941c-1f76f684eff9&EIO=4&transport=websocket'. This request has been blocked; this endpoint must be available over WSS.

[its-alikhokher]

The Chromium error you posted is the root cause: the page is HTTPS, but the frontend opens the event socket on ws:// instead of wss://, and Chromium blocks that as mixed content.

Where that URL comes from (Reflex source: Endpoint.get_url and getBackendURL in .web/utils/state.js):

• At export time, the event URL is api_url + "/_event", with https:// → wss:// and http:// → ws://. The result is baked into the static frontend.
• At runtime, the frontend only rewrites that URL when the api_url host is localhost / 0.0.0.0: it then uses the page's own host, switches to wss:// on HTTPS pages and drops the port.

So your frontend was exported with an api_url like http://aquaterrapm.ca, which hard-codes ws://. Fix it in one of two ways and re-export the frontend, since Caddy serves the static build:

• REFLEX_API_URL=https://aquaterrapm.ca reflex export --frontend-only (or api_url="https://aquaterrapm.ca" in rxconfig.py), or
• leave api_url at its localhost default, so the page connects to wss://aquaterrapm.ca/_event on its own. Reflex's production Dockerfile relies on this when TLS is used.

NGINX then only needs to forward the backend routes (the same ones Reflex's Caddyfile example uses) to the backend, with WebSocket upgrade headers:

location ~ ^/(_event|ping|_health|_upload) {
    proxy_pass http://127.0.0.1:8001;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $host;
    proxy_read_timeout 86400;
}