Introduction

Since its release almost a decade ago, NGINX has become one of the most popular web servers in the world and is responsible for hosting some of the largest and highest-traffic sites on the internet. More than 160 million websites use NGINX, including more than half of the top 100,000 websites. It is more resource-friendly than its competitor Apache in the majority of the cases and can be used as a web server or a reverse proxy.

In this guide, we’ll be setting up NGINX server blocks as a reverse proxy on an Ubuntu machine for a NodeJS app. On the other hand, if you're searching for how to make NodeJS apps, you can go and check out our awesome course at  Online Coding Blocks

Every time you hear a developer say NGINX and you have no clue about what it means

Example use case

Before we dive deep into the world of NGINX, let us take an example problem which we are looking to solve through our NGINX server.

Suppose, you want to host http://example.codingblocks.com on your Ubuntu machine. By default, the nginx server will listen on port 80 which is the common port for HTTP and port 443 for HTTPS (HTTP over TLS). You can run your node app on this port but on Linux, ports below 1024 are called privileged ports. The applications listening on these ports should be privileged, meaning they should be running in sudo mode. Running a node app on any port below 1024 will not only be laborious but also likely to lead to all sorts of strange issues because running node as root is a security risk. Also, if you want to host multiple application servers on your ubuntu machine then NGINX is a better solution for that. Considering that you take our advice, you now have a node app which is listening on localhost port say, 1234 on your ubuntu machine.

Type curl http://localhost:1234 on your terminal to check if your app is running.

You can easily configure the NGINX server to forward all requests from the public IP address to the server already listening on localhost at port 1234.

Basic Configuration for an NGINX Reverse Proxy

By default, Nginx contains one server block called default which we can use as a template for our own configurations.

  1. As mentioned above, we will create our server block config file by copying over the default file:
    sudo cp /etc/nginx/sites-available/default /etc/nginx/sites-available/example
  2. Now, open the new file you created in your text editor with sudo privileges:
    sudo vi /etc/nginx/sites-available/example
  3. Remove all the commented out lines and the file will look similar to this:
server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;
        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                try_files $uri $uri/ =404;
        }
}

Let’s try and understand each line of the default server block that we have.

First, we need to look at the listen directives. You can host multiple servers using NGINX but only one of our server blocks on the server can have the default_server option enabled. This specifies which block should serve a request if the server_name requested does not match any of the available server blocks. If you try to enter your public IP on your browser you’ll see this

welcome-screen-e1450116630667

Since we have another default server block, (the file where we copied this file from) we’ll remove this option from our file.

Root and Index directive specifies the root directory and the index file respectively of the static content that we want to serve through NGINX. Keeping our use case to only setting up NGINX as a reverse proxy, we can ignore these two directives for now.

Second, your server_name should be the name you want to give your server which in our case is example.codingblocks.com

Next is location directive, which in our case should forward all the requests to localhost:1234, where our node app is running. To accomplish this, we’ll take the help of a directive named proxy_pass.

The proxy_pass directive will make this configuration a reverse proxy. It specifies that all requests which match the location block (in this case the root / path) should be forwarded to port 1234 on localhost, where the NodeJS app is running.

When you are finished, your file will look something like this:

server {
        listen 80;
        listen [::]:80;

        server_name example.codingblocks.com;

        location / {
                proxy_pass http://localhost:1234/;
        }
}

That is all we need for a basic configuration. Save and close the file to exit.

VOe71EA

Ohh and if you’re one of those who doesn’t know how to exit vim, hit the escape key, type :q and press enter. You can thank me later :P.

  1. Enable your Server Blocks and Restart Nginx

Now that we are done with writing our server block file, we need to enable it. We can do this by creating symbolic links from this file to the sites-enabled directory, which Nginx reads from during startup.
We can create these links by typing:

sudo ln -s /etc/nginx/sites-available/example /etc/nginx/sites-enabled/

This file is now in the enabled directory. We now have two server blocks enabled, which are configured to respond based on their listen directive and the server_name

  • example: Will respond to requests for example.codingblocks.com
  • default: Will respond to any requests on port 80 that do not match the other two blocks.
    Any future changes made to the example file in sites-available directory will reflect in the file present in sites-enabled directory as well.
  1. Test to make sure that there are no syntax errors in any of your Nginx files
    This step is very important and is going to save your ass uncountable number of times since you might have 10s and 100s of other websites being hosted through the same nginx server and they’ll all suffer a downtime if you end up reloading a corrupt configuration. You can test your nginx configuration by

sudo nginx -t

  1. If no errors are reported, reload the new configuration:

sudo service nginx reload

And, it's done. You can now go and check out your website.

Conclusion

In this post, we learned how to configure NGINX as a reverse proxy. You should now have the ability to create server blocks for each website you wish to host from the same server. There aren't any real limits on the number of server blocks you can create, so long as your hardware can handle the traffic. If you have any questions about the tutorial, feel free to leave comments. At Coding Blocks, we’re also planning to launch an online web series where we will dive deep into the concepts of NGINX and how we can configure security, logging, load balancing and performance. Like any other course at Coding Blocks, you’ll get to work on real-world problems, solve assignments, get doubt support, make awesome projects which you can put up in your resume and get a chance to interact with subject matter experts. Sounds interesting ? Go and claim your free trial now at https://online.codingblocks.com !

Happy Coding !