Seamless Web App Hosting with Nginx and Docker

Seamless Web App Hosting with Nginx and Docker

Highlights of this project:

🚀Deployed a web application using an Nginx server within a Docker container.

🚀Configured a reverse proxy with Nginx to act as a gateway between outside requests and the application server.

🚀Set up a DNS subdomain to make the application accessible to users.

🚀Used popular tech stack including Amazon EC2, GitHub, Docker, Nginx.

🚀This project was a great learning experience for deploying web applications using the Nginx server within a Docker container.

✔ Please check out my GitHub for more information and the code related to this project!

▶ GitHub Link
🔗Romeshdg/django-notes-app (github.com)

Steps :

Clone the Project repo:

git clone https://github.com/sanket363/Nginx-project.git

Step 1:Launch an instance

note :- Add inbound traffic rules for HTTP, and HTTPS in addition to SSH.

Screenshot 2023-03-12 001119

Step 2: Install Nginx on this server by using the following command.

Update your package index:

sudo apt-get update

Install NGINX using apt-get:

sudo apt-get install nginx

Once the installation is complete, start the NGINX service:

sudo systemctl start nginx

To verify that NGINX is running, check its status:

sudo systemctl status nginx

Images :

Screenshot 2023-03-11 212551

Screenshot 2023-03-11 212638

Screenshot 2023-03-11 212704

Screenshot 2023-03-11 213023

Step 3: To check the working status of the Nginx server

You should see output indicating that the service is active and running.

NGINX should start automatically after a reboot. To enable this, run:

sudo systemctl enable nginx

status

Screenshot 2023-03-11 213219

Step 4: View the homepage details stored in the index file on its path /var/www/html.

Screenshot 2023-03-11 213504

Step 5: Installation and configuration files of the Nginx server can be seen at /etc/nginx path where

Screenshot 2023-03-11 213656

Screenshot 2023-03-11 213656

Screenshot 2023-03-11 214116

Step 6:Cloning the source code to this server using Git.

Screenshot 2023-03-11 220503

Step 7: Docker Installation

Install Docker using apt-get:

sudo apt-get install docker.io

Add your current user to the docker group:

sudo usermod -aG docker $USER

Reboot the system to apply the changes:

sudo reboot

Images:

Screenshot 2023-03-11 220747

Screenshot 2023-03-11 221025

Screenshot 2023-03-11 221149

Screenshot 2023-03-11 221231

step 8: Building and Running Docker Container

Navigate to the directory that contains your Dockerfile and run the following command to build the container:

sudo docker build -t my-notes-app:latest .

To run the container and map port 8000 on the container to port 8000 on the host, run the following command:

sudo docker run -p 8000:8000 my-notes-app:latest

Images:

Screenshot 2023-03-11 221446

Screenshot 2023-03-11 221638

Step 9: Configuring NGINX

NGINX's configuration files are located in the /etc/nginx/ directory. The main configuration file is nginx.conf. Before making any changes to this file, make a backup copy:

sudo cp /etc/nginx/nginx.conf /etc/nginx/nginx.conf.bak

To apply any changes you make to the configuration files, you'll need to restart NGINX:

sudo systemctl restart nginx

To add a proxy pass configuration for your Docker container, navigate to the sites-enabled path on Ubuntu:

cd /etc/nginx/sites-enabled/

Use the following command to open the default file in Vim:

sudo vim default

Find the location / block and inside the curly braces, add the following line to create a proxy pass to your Docker container:

proxy_pass http://127.0.0.1:8000;

Add another location block for proxy the API requests to the container:

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

Images:

Screenshot 2023-03-11 221446

Screenshot 2023-03-11 221638

Screenshot 2023-03-11 222303

Screenshot 2023-03-11 222354

Screenshot 2023-03-11 223134

Screenshot 2023-03-11 223716

Screenshot 2023-03-11 224045

Screenshot 2023-03-11 224601

Screenshot 2023-03-11 225253

Screenshot 2023-03-11 225306

Screenshot 2023-03-11 225517

After saving above changes in default file now navigate to the /var/www/html/ location and do below commands:

mkdir static
cp -r /home/<your-user>/Nginx-project/mynotes/build/static/* /var/www/html/static/

Iamges:

Screenshot 2023-03-11 225811

Screenshot 2023-03-11 230133

Screenshot 2023-03-11 230133

Screenshot 2023-03-11 230151

Screenshot 2023-03-11 230401

Screenshot 2023-03-11 230740

Screenshot 2023-03-11 230904

Screenshot 2023-03-11 231734

Once done restart the nginx service

systemctl restart nginx

Screenshot 2023-03-11 231857

Now navingate to your browser and go to the url

http://<public-ip>/

Screenshot 2023-03-11 235939

The technology stack used in this project included Amazon EC2, GitHub, Docker, and Nginx. Amazon EC2 provided the virtual server that hosted our application, GitHub allowed us to store and version control our application code, Docker allowed us to package and deploy our application in a containerized environment, and Nginx provided the web server and reverse proxy functionality.

Overall, this project demonstrated how Nginx Server can be used to deploy web applications in a scalable, secure, and reliable manner, and how Docker can be used to package and deploy these applications with ease.

📍 Thanks for reading, and happy learning! :) ✌

✨Let's continue to learn and grow together.

follow me on LinkedIn for more updates and insights. Also, don't forget to like, share, and comment on this post to spread the word and help others in their Learning journey.

Did you find this article valuable?

Support Romesh Dharamgudi's blog by becoming a sponsor. Any amount is appreciated!