Introduction

As a beginner who recently started to work with servers, it took a while for me to understand its usage and I was constantly in panic mode. To make life a little easier for beginners I decided to write this article explaining how you can install Nginx and create simple tasks.

By the way, don't be like me and pronounce NGINX as 'jinx'😂 its correct pronunciation is 'engine-ex'

What is NGINX and why should you use it?

- Nginx is a web server that you can use to host your web applications.

- NGINX improves your application delivery, security, and facilitates scalability and availability for the busiest websites on the internet.

- It is open-source, lightweight, and cal also serve your static websites.

- The configuration is very easy.

Installing NGINX

We will be installing NGINX on Ubuntu

1. We will first of all update our local package index so that, we have access to the most recent package listings and also install required dependencies. Type the below command on your terminal -

2. You have your web server running let us see how you can manage NGINX processes with some basic commands. By default, NGINX is configured to start automatically when your server boots, you can simply run this command if you want to change it.

• To stop the webserver from running

• To start web server when it is stopped

• To stop and restart

• To apply new changes you make to your configuration file

Configure NGINX to serve your static website

Now we have our web server installed let us see how we can configure NGINX to serve our website. Like we mentioned earlier, an important part of a web server is serving our website, here I will show how you can serve files from their different directories in your local machine (image folder, HTML file, backend).

Before we continue, let us make some configurations in our NGINX configuration file located in /etc/nginx/

Inside this directory, we are only interested in two major files

• Sites-available which contains individual configuration files for all of our possible static websites.

• sites-enabled which contains links to the configuration files that NGINX will read and run.

Now, cd into sites-enabled using the below command

• Edit the default file using vim or any editor of your choice to the following

"server {
    listen 80 default_server;
    listen [::]:80 default_server; 
    root /projects/www/html;  
    index index.html; 
    server_name _;  
    location / {
       try_files $uri $uri/ =404;
     }
}"

The above block of code

1. delivers files from the project folder (can be any path where your index.html is)
2. your main index page is would be index.html
3. server is set to listen on port 80

How do we make NGINX serve our image folder?

Again, cd into your sites-enabled file in Nginx folder and make the following changes

server {
    listen 80 default_server;
    listen [::]:80 default_server; 
    root /projects/www/html;  
    index index.html; 
    server_name _;  
    location / {
       try_files $uri $uri/ =404;
    }
   location /images {
           alias uploads/images/;
    }
    location /api/ {
           proxy_pass http://localhost:8080/;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection 'upgrade';
           proxy_set_header Host $host;
           proxy_cache_bypass $http_upgrade;
    }
}

Here, we are asking that /images route images can be accessed which is linked to the folder uploads/images. It will point to all images in images folder.

Finally, let us add the configuration for our back end

server {
    listen 80 default_server;
    listen [::]:80 default_server; 
    root /projects/www/html;  
    index index.html; 
    server_name _;  
    location / {
       try_files $uri $uri/ =404;
    }
   location /images {
           alias uploads/images/;
    }
    location /api/ {
           proxy_pass http://localhost:8080/;
           proxy_http_version 1.1;
           proxy_set_header Upgrade $http_upgrade;
           proxy_set_header Connection 'upgrade';
           proxy_set_header Host $host;
           proxy_cache_bypass $http_upgrade;
    }

}

Here we made a proxy server and put a proxy_pass directive with the protocol, name, and port of the proxied server specified in the parameter (http://localhost:8080) saying that our backend is linked to this localhost with port 8080 can be accessed. You can now apply these configurations that you made by running reload command that we mentioned in the basic commands above.

If you read all the way here, I hope that this article has simply explained how you can install and configure NGINX for your usage as a beginner. You can also check out their official website on NGINX