How to Serve Static Files in NodeJS using NGINX

NodeJS is a powerful runtime environment to build JS based web applications and software. NGINX is a popular web server that also works as load balancer, reverse proxy and http server. In this article, we will look at how to server static files in NodeJS using NGINX. It will help reduce NodeJS server load, increase security and also improve website performance.

How to Serve Static Files in NodeJS using NGINX

Here are the steps to serve static files in NodeJS using NGINX. Once you do this, then all static content will be served by NGINX and only dynamic content will be served by NodeJS. No request for static files will be sent to NodeJS, unless those files cannot be found in static files folder. This is very useful especially for production environments.

1. Create Virtual Host File

Open terminal and run the following command to create a virtual host configuration file for your domain (example.com). Please change the filename as per your requirement.

$ sudo vi /etc/nginx/sites-available/example.com.conf

Also read : How to Install PgAdmin 4 in Ubuntu

2. Add NGINX Configuration

Add the following configuration to serve static files.

upstream backend {
   server localhost:3000;
}

server {
listen 80;
server_name example.com;

root /var/www/html/static;

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";
 }
}

Let us look at the above code

1. Upstream – This gives the information about NodeJS server’s IP and port number. In our case, both NodeJS and NGINX are running on same server. So we have used localhost as NodeJS IP. Also in our example, NodeJS runs on port 3000. You can update it as per your requirement.

2. Server – NGINX directive that lists the port number NGINX should be listening on. In our case, we have used port 80 (http port). Please update the server_name value as per your domain name.

3. Root – root location to serve static files. Please update this according to the location of your static files.

4. Location – In location, we use try_files directive to tell NGINX to first look for the requested file in the static files folder. If it is not found, then send the request to @backend which is NodeJS server.

5. Location @backend – The default configuration for NodeJS+WebSocket.io proxy configuration.

Also read : How to Install Jenkins in Redhat Linux

3. Enable Site

Run the following command to enable this site. Replace example.com.conf with the name of your configuration file.

$ cd /etc/nginx/sites-enabled 
$ ln -s /etc/nginx/sites-available/example.com.conf .

Also read : How to Add Conditional Headers in NGINX

4. Restart NGINX Server

Restart NGINX Server to apply changes.

$ sudo service nginx restart

That’s it. Now when you run your website, you will notice that the response time has improved quite a lot.

Also read : How to Use NGINX as Reverse Proxy for NodeJS