socket.io endpoint on reverse proxy?

[iron monolith]

I have novu running from the docker-compose file behind an nginx reverse proxy (redis and mongodb database are external cloud services).

I am getting failed connection to websockets. My urls are:

https://novu.our.website/api
https://novu.our.website/web
https://novu.our.website/ws

I noticed that there is a call to a /socket.io/ endpoint so I added that to my nginx config (pictured). Now I send the token but get back an invalid namespace error.

Can anyone help?

[iron monolith]

I've tried with caddy server as well and still failure issues - in any case the reverse proxy is forwarding correctly, there is just a failure at the application level to sync socket.io namespaces. Is this a problem on Novu's end with configuration? I have followed the instructions in the documentation exactly.

[iron monolith]

I'm leaving this up for the next person, and also so that you can potentially add this to Novu's documentation.

The solution is that you must proxy pass <websocket_url>/socket.io to localhost:<websocket_port>/socket.io. I also switched to subdomains rather than using relative paths but I'm not sure if that played a part in the solution. It depends on how the namespace is constructed. In any case I'm sure the team can work it out.

[hushed mantle]

@iron monolith, you just advanced to level 1!

[waxen prairie]

I just migrated my setup to a new server and set it up with Caddy, using relative paths as well and it is working fine.
Let me know if you want to match configs

[waxen prairie]

for anyone else who stumbles upon this.

This is my example caddyfile that works

{
        #debug
        # Global options block. Entirely optional, https is on by default
        # Optional email key for lets encrypt, uncomment the below to set the email i.e. email [email protected]
        # email [email protected]
}

(static) {
        @static {
                file
                path *.ico *.css *.js *.gif *.jpg *.jpeg *.png *.svg *.woff *.woff2 *.json
        }
        header @static Cache-Control max-age=5184000
}

(security) {
        header {
                # enable HSTS
                Strict-Transport-Security "max-age=63072000; includeSubDomains; preload"
                # disable clients from sniffing the media type
                X-Content-Type-Options nosniff
                # keep referrer data off of HTTP connections
                Referrer-Policy no-referrer-when-downgrade
        }
}

(404) {
        handle_errors {
                @404 {
                        expression {http.error.status_code} == 404
                }
                handle @404 {
                        respond * "Not found" 404
                }
        }
}

yourdomain.com {
        reverse_proxy web:4200
        @ws {
                header Connection *Upgrade*
                header Upgrade websocket
        }
        handle /api/* {
                # CORS settings
                header Access-Control-Allow-Origin *
                header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE'
                header Access-Control-Allow-Headers 'Content-Type, Authorization'

                # Proxy settings, strip /api prefix before proxying
                reverse_proxy api:3000
        }

        reverse_proxy @ws ws:3002
        reverse_proxy /widget widget:4500
}

this config works with running docker containers, replace api, widget, ws with the actual names of your containers or addresses if you aren't running using the docker-compose file.

the Context paths in the env are configured as

# Context Paths
# Only needed for setups with reverse-proxies
GLOBAL_CONTEXT_PATH=
WEB_CONTEXT_PATH=
API_CONTEXT_PATH=api
WS_CONTEXT_PATH=ws
WIDGET_CONTEXT_PATH=widget

@stuck glacier @plush agate might help to add this to the documentation

[stuck glacier]

Please feel free to send a PR to the docs repo @waxen prairie

[tranquil kelp]

This still doesn't work for reverse proxy with nginx. Both web and ws client is not working. I'm planning to raise a PR for reverse proxy setup after i finish my testing

[waxen prairie]

@tranquil kelp this is for caddy, not nginx.

I was previously using similar for nginx, so if you are interested I can dig that up as well.

[tranquil kelp]

Yes I understand but I tried to configure with nginx and ended up with namespace error as @iron monolith mentioned. If you have done it can you please show the config if possible

FYI for my requirement nginx serves as a reverse proxy and novu services reside in the path /novu.

E.g api path is mydomain.com/novu/api
ws path is mydomain.com/novu/ws

[waxen prairie]

are you running docker containers or a local install?

[tranquil kelp]

Docker containers through Docker compose

[waxen prairie]

ok

the attached is the base of my nginx

my env context is same as above

the "yourdomain.tld" is what you need to change

I am curious, is there a specific reason you want to maintain /novu/* as your proxy paths? instead of using a subdomain?

[tranquil kelp]

Ok this is the same workaround that I have done currently. To make the websocket work I'm using /socket.io/ path in nginx.
I do not see any specific reason to maintain /novu path. but we have some other app running at the root of the domain so our lead wants to use a different path .

Anyways thanks @waxen prairie

Subdomain is also a good idea. But isn't it better to put all our services behind nginx as reverse proxy or load balancer. By this way we do not need subdomains ?

[waxen prairie]

either way works, I find it cleaner to simply create a subdomain and point to the same IP, then use nginx to proxy it to the needed service.

if you created a novu.yourdomain.tld, you could simply replace the server_name placeholder and you will be good to go (asides making sure you have the right certs for it)

You could also simply upd ate the location paths i.e. instead of / you do /novu/ etc.
it should give the same result