Speed up Node.js, Socket.io web application load time by leveraging Nginx to serve static files

Node.js is an excellent JavaScript runtime environment, which you can use to serve entire web assets (static+dynamic) from it.

If you are working on small, experimental project then probably it’s ok, however, if response time is concerned then you must consider using a web server like Nginx in front of Node.js to serve static files.

Actually, not just to serve static files but also from a security point of view you should consider Nginx.

Lately, I was working on Site Relic (Website SEO & Security Analyzer) where I used Node.js, Socket.io and was able to improve significant response time by offloading static files from Nginx.

aws-lb

As you can see, when I moved the static files to Nginx on 29th, response time is drastically decreased.

So if you are using Node.js to deliver image, js, CSS, font, etc. then give a thought and consider separating the duties.

Let’s take a look at how I did this.

This assumes you have Nginx and Node.js installed. Take a backup of existing configuration before modifying so you can rollback if things go wrong.

  • Go to location where Nginx is installed (default on UNIX based OS like CentOS/Ubuntu would be /etc/nginx)
  • Go to sites-available
  • Create a new file with the following (for easy understanding you can name the file as your domain name)
upstream backend {
server localhost:3000;
}

server {
listen 80;
server_name siterelic.com;

root /var/tools/public;

location / {
try_files $uri @backend;
}

location @backend {
proxy_pass http://backend;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header Host $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
# Following is necessary for Websocket support
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
}

There is the five crucial block above, let me go through one-by-one.

  1. Upstream – specify the variable as “backend” and give node.js server & port information. In an example, I’ve given localhost:3000 that means I am running node.js on the same server as Nginx with 3000 port number.
  2. Server – give the port number, which Nginx should be listening on, and server name as your domain name.
  3. Root – the directory from where you want to serve the static files.
  4. Location – this is important. I am asking Nginx to try looking for files in specified directory with root location and if it doesn’t match then go to @backend which is node.js
  5. [email protected] – this is generic node.js+websocket.io proxy configuration

Enable the site in /etc/nginx/sites-enabled by creating a symbolic

  • cd /etc/nginx/sites-enabled
  • ln -s /etc/nginx/sites-available/$yourdomainname .

Restart the Nginx and have fun!

With above configuration, I was able to improve response time significantly, and I hope you should too.

If you are new to Nginx, then you may be interested in learning how to build high-performance Nginx server from scratch.