NGinx

RemoteViz and NGinx reverse proxy

RemoteViz and NGinx reverse proxy

Summary

RemoteViz uses WebSocket protocol to make possible the communication between the client and the service. Without any web servers between the client and the RemoteViz service, a WebSocket connection can be established smoothly. However, in production environments, the web page requests are handled by a web server and only the web server port (port 80 by default) is open from the outside in order to guarantee security. To use the same port and domain for the HTTP requests and the Websocket requests, the websocket traffic has to be routed through the web server. This document explains how to configure NGinx server as reverse proxy to handle web page requests and websocket traffic over the same port and domain.

Compatibility

Nginx server supports Websocket proxing from the version 1.3.13.

NGinx Installation

Please refer to the NGinx official documentation to install NGinx:

For Microsoft Windows: http://nginx.org/en/docs/windows.html

For Unix systems: http://nginx.org/en/docs/install.html

NGinx Configuration

In the next section, we consider that the NGinx web server is bound to the public port 80 (non-SSL) or 443 (SSL) and the RemoteViz service is bound to the private port 8080 (behind a firewall). Inside the website configuration file, add a "location" block. This block describes how Websocket requests are handled. Here is an example of the configuration that is used to handle the WebSocket requests directed at "/RemoteViz". Each HTTP requests containing "/RemoteViz" in the URL will be considered as a Websocket connection and will be redirected to port 8080.

Without Secure Sockets Layer (SSL) encryption:

    server {
     listen 80;
     root /home/mysite;
     index index.html index.htm;
     # Replace "yourdomain" by your public domain name server (DNS)
     server_name yourdomain;
     # Route websocket to the RemoteViz Service
     location /RemoteViz {  
         # Replace "remoteviz_service_ip" by the RemoteViz service IP address
         proxy_pass http://remoteviz_service_ip:8080;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "upgrade";
         proxy_set_header Host $host;
     }
    }

With Secure Sockets Layer (SSL) encryption:

    server {
     listen 443 ssl;
     # Set the path to the public certificate file
     ssl_certificate /etc/ssl/certs/ssl-cert.crt;
     # Set the path to the private key file
     ssl_certificate_key /etc/ssl/private/ssl-private.key;
     # Redirect all non-SSL traffic to SSL.
     if ($ssl_protocol = "") {
         rewrite ^ https://$host$request_uri? permanent;
     }
     root /home/mysite;
     index index.html index.htm;
     # Replace "yourdomain" by your public domain name server (DNS)
     server_name yourdomain;
     # Route secure websocket to the RemoteViz Service
     location /RemoteViz {
         # Replace "remoteviz_service_ip" by the RemoteViz service IP address
         proxy_pass https://remoteviz_service_ip:8080;
         proxy_http_version 1.1;
         proxy_set_header Upgrade $http_upgrade;
         proxy_set_header Connection "upgrade";
         proxy_set_header Host $host;
     }
    }

Note: Some SSL providers will provide an Intermediate Certificate to use. You have to append it with our public SSL certificate.

HTML Client Configuration

The last step is the modification of the websocket connection address in the HTML client file. In the file index.html, replace the line:

   theRenderArea.connectTo("ws://127.0.0.1:8080/RenderAreaName");

by the line for using non-SSL:

   theRenderArea.connectTo("ws://yourdomain/RemoteViz/RenderAreaName");

or by the line for using SSL:

   theRenderArea.connectTo("wss://yourdomain/RemoteViz/RenderAreaName");