Project : Routing a Django application through Nginx.

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 improves content and application delivery, improves security, and facilitates scalability and availability for the busiest websites on the internet.

Nginx was created by Igor Sysoev, with its 1^st public release on October 2004 as an attempt to answer the C10k problem. Where C10k is the challenge of managing 10,000 connections at the same time. Today there are even more connections that web servers have to handle. Because of this reason, Nginx offers event-driven and asynchronous architecture. This feature makes Nginx the most reliable server for scalability and speed.

Features of Nginx

Reverse proxy
Load Balancing
URL redirection
Indexing and Caching

Configuring Nginx

The first thing you need to do is update the package tool in the server and then install Nginx.
Check the status of the nginx server. Use systemctl command to check the service.
Check the URL by accessing through the Public IP. You can see the nginx is ON.
This nginx configuration and related files are stored in the /etc/nginx folder which plays an important role in the application.

sites-enabled:- If we put any files in this directory, those get reflected in the application.

sites-available:- If we put any files in this directory, those files only stay in the folder but are not applied in the application.
We have a directory /var/www/html. The significance of this directory is it configures the front end of an application. The file should be in HTML format and this configuration is mentioned in the nginx.conf file in the /etc/nginx directory.
Let's take an example by creating an index.html file for a Google web page.
Navigate to the public URL to check the status. URL should be working and displaying the webpage.

Deploy an application through Nginx

The main Aim of building this project is to witness the usefulness of Reverse Proxy.

Let's get started with the project.

Let's pull the source code from the GitHub repository.
As per the pre-requisite to the application install docker in the server.
Provide access to the Ubuntu user by adding to the docker group.
Build the docker image from the docker file and provide a suitable tag to it.
Create the container out of the docker image created.
The URL will not be accessible externally as port 8000 is not opened in the security group of the server in our AWS console.
Check if the URL is running on the local host.
Ideally, in Industrial practices, the preferable method is to route the port through the reverse proxy instead of opening 8000 port. This method is the normal DevOps engineer practice.
To configure the reverse proxy we need to change the sites-enabled file in the /etc/nginx directory.
Add the changes as shown below. We have changed in the location / because publicIP needs to be accessible to the outer world.
Now restart the nginx service as we have changed the nginx.conf file.
Now, check the URL, you can see React App web URL but a blank page. The reason behind it is the necessary HTML files of the application are unable to get accessed by Nginx.
You can see the root takes the HTML file from the /var/www/html directory. Either we can put the required application-related html files to the directory or can change the root section in nginx.conf file.
Transfer the required HTML file to the /var/www/html directory.
Finally, you can see you application webpage. We have successfully deployed our application.
The app is not yet functional as we can't add anything to the notes app.
The backend needs to be configured to the application.
API is running on the local host though as per below.
You can inspect the webpage to see the error.
The error from the above says to bind API to reverse proxy. Let's just do that and restart the Nginx service.
Refresh the URL to check if the backend is connected.
You can now see all the data flowing to the application.