Nginx reverse proxy

Help
#1

I’m trying to build a React application (much like the book example). I want to be able to have this location point to a RESgate service running inside one of my cloud installations. As a result, I’m hosting the React application in nginx. The problem I’m having is that I can’t seem to configure the nginx.conf file to allow for the right upstream and proxy-pass configuration to get it to work.

When I manually hit the proxy-pass URL (e.g. /resgate) I get a RESgate JSON reply. But, when I use ResClient inside my React app to connect to /resgate (the proxy-pass URL) , it complains that it cannot make a connection to ws://localhost:9090/resgate.

Does anyone have an example nginx.conf file that works to front a RESgate installation that works from within React?

Thanks!

#2

ResClient uses WebSocket to connect to resgate, which Nginx needs to be configured for.

api.resgate.io uses Nginx as well, and has this configuration:

location /api {
    proxy_pass http://127.0.0.1:8080/api;
}

location / {
    proxy_pass http://127.0.0.1:8080/;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection "upgrade";
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
    proxy_set_header X-Frame-Options SAMEORIGIN;
    proxy_read_timeout 86400;
}

Where the important part to get WebSocket to work with Nginx are these lines:

proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

You can read more about it on Nginx’s blog:

Hope that helps!

1 Like
Resclient - Secure WebSockets
#3

So what does your connection string look like in the ResClient constructor?

#4

When connecting to api.resgate.io, the client will do:

var client = new ResClient("wss://api.resgate.io");

The Resgate running on resgate.io uses default configuration.
I assume yours is listening on 9090 instead.

If you want to have resgate accessible under /resgate , your config would probably look more like this:

location /resgate/api {
    proxy_pass http://127.0.0.1:9090/api;
}

location /resgate {
    proxy_pass http://127.0.0.1:9090/;
    # The rest of the websocket config here. See above.
}

And the ResClient would then connect like this (assuming nginx listens on localhost port 80):

var client = new ResClient("ws://localhost/resgate");

Accessing the resources with HTTP will then be done under the api/ subpath. Eg.:

GET http://localhost/resgate/api/library/books
1 Like