Deploying a NotesApp by using NGINX

Deploying a NotesApp by using NGINX

What is NGINX?

  • NGINX is pronounced as "engine-ex".

  • It is an open-source, fast, lightweight and high-performance web server that can be used to serve static files.

  • NGINX has considered as the popular web server behind the Apache web server and Microsoft's IIS.

  • In its initial release, NGINX functioned for HTTP web serving. Today, however, it also serves as a reverse proxy server for HTTP, HTTPS, SMTP, IMAP, POP3 protocols, on the other hand, it is also used for HTTP load balancer, HTTP cache, and email proxy for IMAP, POP3, and SMTP.

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

  • In short, we can say that Nginx is just a kind of software that is used in web servers to serve concurrent requests.

  • Previously we used to install Apache in web servers to handle these functions, but as the world, in growing and demanding more things at one time, the term concurrency comes into the world and nginx launched for the same thing.

Features of NGINX

Some features of Nginx are as follows:

  • Reverse proxy with caching

  • IPV6

  • Load Balancing

  • Web Sockets

  • Handling of static files, index files, and auto-indexing

  • FastCGI support with caching

  • URL rewriting and redirection

Hands-On:

Launch an ubuntu instance.

Update Ubuntu server:

sudo apt-get update

Installation of Nginx:

sudo apt install nginx

Status of Nginx:

systemctl status nginx

Restarting Nginx machine:

sudo systemctl restart nginx

Browse the public IP(107.22.156.69). This will show the nginx page.

This page is showing that nginx is installed. By default, the port is 80.

#This HTML page is being served from /var/www/html directory.

#Whatever the HTML page put here will be served by the nginx.

"index.nginx-debian.html" This is the page that is being served by Nginx.

Goto Nginx Directory:

#nginx.conf - config file of nginx

#sites-available -

#sites-enabled - has the default file where alteration is made.

This is what the default file looks like:

Create an index.html page in /var/www/html directory:

<!DOCTYPE html>
<html>
<body>
<p>This is Nginx page.</p>
<p>This is another paragraph.</p>
</body>
</html>

# if we refresh the public IP we will get:

#This page shows that Nginx has been installed on ubuntu instance.

Clone the note app from GitHub:

git clone https://github.com/LondheShubham153/django-notes-app.git

django-notes-app has the following contents:

Dockerfile README.md api db.sqlite3 manage.py mynotes notesapp procfile requirements.txt staticfiles

Installation of Docker + add a docker user to avoid "permission denied error" + Reboot the instance.

sudo apt install docker.io
sudo usermod -aG docker $USER
sudo reboot

Go through the README.md file for steps to be taken to deploy the app.

Creation of docker image from docker file:

docker build -t notes-app .

Checking the docker images:

docker images

Creation of Docker Container from Docker Image:

Checking if the app is running on localhost:

curl -L http://127.0.0.1:8000

It shows that the application is running on localhost but it's not accessible to the outer world.

Reverse Proxy Setup to access the app:

This proxy needs to be passed in the default file under the sites-enabled directory.

proxy_pass http://127.0.0.1:8000;

Nginx needs to restart after any changes are made in the default file.

sudo systemctl restart nginx

If we access the Public IP of the instance the following page will show:

Static content (under django-notes-app/mynotes/build) needs to be copied on /var/www/html directory.

sudo cp -r * /var/www/html

Refresh the URL:

If we try to add any notes, things wouldn't be reflected due to the backend not being connected(because /api route is missing)

Check whether the backend 127.0.0.1:8000/api is responding locally or not:

curl -L http://127.0.0.1:8000/api

The backend is accessible through the local host.

#We need to pass the proxy(in default file):

  location /api {
                proxy_pass http://127.0.0.1:8000/api;
        }

Refresh the URL.

Thank you for reading! Happy Learning!!

Santosh Chauhan

Did you find this article valuable?

Support Santosh Chauhan's blog by becoming a sponsor. Any amount is appreciated!