How to Use Nginx Reverse Proxy For Websocket Secure Server

NGINX REVERSE PROXY – Nginx is the most popular web server app that make our live more easier as devops. Proxying is typically used to distribute the load among several servers, seamlessly show content from different websites, or pass requests for processing to application servers over protocols other than HTTP.

In this article we will take up nginx reverse proxy for create WSS ( Websocket Secure server ). In this era is an obligation for us web developer to make secure web server. So one of them is when your application is using websocket you have to make WSS ( Websocket Secure server ).

What is WSS ( Websocket Secure server ) ?

WSS ( Websocket Secure Server ) is a server for websocket with encrypted connection using ssl. If you already familiar with https then you should know WSS. When accessing not secure websocket server is using address like this.

ws://yourdomain.com

But when using WSS ( Websocket Secure Server ) is like this one :

wss://yourdomain.com

And we connect to websocket server that inside https application then ws://yourdomain.com is will not work. So, for that we need createing WSS ( Websocket Secure Server ) for our application so that it can work well.

Why using NGINX?

So, this artice is inspired from my experience when handling server for web Whizkids.id that implement websocket server. Since the application run on https connection the application have some bug with the websocket server that not implemen Websocket Secure Server.

There actually many ways to create wss server, but in this case i will take up nginx reverse proxy for creating wss server. Similiar to https server, when we create encrypted connection we need ssl for our server to encrypting the connection. Since Whizkids.id have been using letsencrypt for free ssl that installed on nginx i don’t want to create another ssl for the wss server.

In this case websocket server is made with nodejs. Actually with nodejs we can install ssl to our server, but it requires a lot of work and i’m a person who doesn’t like a lot of work. So i choose to look a shortcut. And nginx reverse proxy is one of the solution.

So the idea is using the NGINX server as frontend server that handle all the traffic and directing traffic for websocket connection wo nodejs websocket. And this nginx will handling the encrypted connection. The advantage is we don’t need create ssl certificate again for wss server.

 How to Use Nginx Reverse Proxy?

Now i will provide a case study for Whizkids.id that implementis wss server using nginx reverse proxy. If you have ever been create https server then making this wss server is similiar with https server. The following is an example configuration for implementing nginx reverse proxy for wss server.

map $http_upgrade $connection_upgrade {
    default upgrade;
    '' close;
}

upstream whizkids.id {
  ip_hash;
  server whizkids.id-server;
}

upstream websocketserver {
  server localhost:3031;
}

server {

    listen 80;
    server_name whizkids.id www.whizkids.id;

    return 301 https://$host$request_uri;

    location ~ /.well-known/acme-challenge {
        allow all;
        root /usr/share/nginx/html;
    }

}

server {

    listen       443 ssl http2;
    listen       [::]:443 ssl http2;

    server_name whizkids.id www.whizkids.id;

    ssl_certificate      /etc/letsencrypt/live/whizkids.id/fullchain.pem;
    ssl_certificate_key          /etc/letsencrypt/live/whizkids.id/privkey.pem;

    ssl_protocols TLSv1.2 TLSv1.1 TLSv1;
    ssl_prefer_server_ciphers on;
    ssl_ciphers 'ECDHE-ECDSA-CHACHA20-POLY1305DES-CBC3-SHA:!DSS';


    location / {
        proxy_set_header Host $http_host;
        proxy_pass http://whizkids.id/;
    }

    location /wss {
        proxy_pass http://websocketserver;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection $connection_upgrade;
    }

}

To note from the example configuration above is this line :

map $http_upgrade $connection_upgrade { 
    default upgrade; 
    '' close; 
}


upstream websocketserver { 
    server localhost:3031; 
}

location /wss {
    proxy_pass http://websocketserver;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
}

So in the example above we create websocket secure server iside https server that listen to port 443, in this example we createing url /wss for the wss server.

And right now you can access server on wss://whizkids.id/wss. So with this approach will make easier for as to create wss server inside our https server. And if you want to create your own subdomain for your wss server you can also do it.

You just need to change the location like this :

location /{
    proxy_pass http://websocketserver;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection $connection_upgrade;
}

Conclusion

If you use nginx for your web server it easy to create websocket secure server. Nginx reverse proxy give us convenience to manage traffic to our server i doesn’t matter what technology do you use you can wrap it using nginx reverse proxy.

And so easy to create wss server with nginx reverse proxy and letsencrypt ssl. And i hope this article useful for you who is setting up WSS server. Don’t forget to give this article to your friends and thanks see you next.

Leave a Reply

Your email address will not be published. Required fields are marked *