Building a Scalable Web Architecture: Deploying JavaScript Apps with NGINX and Load Balancing on Ubuntu VMs.
In today's fast-paced digital environment, ensuring web applications can scale efficiently is critical to delivering a seamless user experience. This project explores the process of building a scalable web architecture by deploying a JavaScript application on Ubuntu virtual machines (VMs) using NGINX as a web server. By implementing load balancing, we ensure optimal traffic distribution across multiple VMs, enhancing both performance and reliability. Through this step-by-step setup, we aim to create a robust, fault-tolerant infrastructure capable of handling increased demand while maintaining high availability and responsiveness.
Here's a step-by-step guide on how to set up an NGINX server and deploy a JavaScript application with load balancing on Ubuntu virtual machines (VMs) in the Azure environment:
Step 1: Set Up Azure Environment
Create a Resource Group:
Go to the Azure portal.
Click Resource groups > Create.
Select your subscription, specify the resource group name, region, and click Review + Create.
In the Administrator Account, select SSH public key or Password for authentication.
In Inbound ports, allow SSH (port 22) and HTTP (port 80) for web access.
Review and click Create.
Step 2: Connect to the VM and Set Up NGINX
SSH into the Public VM:
Open your terminal.
Run the following command to connect via SSH:
ssh <your-username>@<public-ip-address-of-VM>
- Install NGINX:
Once logged into the VM, update the package list:sudo apt update
sudo apt upgrade -y
Install NGINX:
sudo apt install nginx -y
Start and enable NGINX to run on boot:
sudo systemctl start nginx
sudo systemctl enable nginx.
Verify NGINX Installation:
- Open a browser and enter the public IP address of your VM. You should see the NGINX default welcome page.
Step 3: Deploy the JavaScript Application
Install Node.js:
- Run the following commands to install Node.js
sudo apt install curl -y
curl -fsSL deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt install -y nodejs
2.Deploy Your Application:
- Upload or clone your JavaScript web application into the /var/www/html/ directory. For example, if you use Git:
cd /var/www/html/
sudo git clone github.com/your-repo/your-js-app.git
cd your-js-app
sudo npm install
Configure NGINX to Serve the App:
- Open the default NGINX config
sudo nano /etc/nginx/sites-available/default
To deploy your application on the NGINX server, you’ll need to replace the default HTML file located in the /var/www/html/ directory. Start by navigating to that directory using the command cd /var/www/html. Inside, you'll notice a file named index.nginx.debian.html, which is the default file currently being served by NGINX.
Since you'll be replacing it with your own JavaScript application, you can safely remove this file using the following command:
sudo rm index.nginx.debian.html
After deleting the file, if you run ls to list the contents of the directory, you'll see that it’s now empty and ready for your application files.
First, make sure the index.nginx.debian.html file is removed from the /var/www/html directory to allow space for your new files.
Next, I chose to create a directory named Dev inside the /var/www/html directory, as this is where I wanted to place my new files. However, this step is optional — you can directly add your JavaScript files into the /var/www/html directory without creating a separate folder.
If you'd like to create a directory as I did, you can use the following command (feel free to name the directory anything you prefer):
sudo mkdir Venv
Once the directory was created, I cloned the Git repository from the URL I copied online directly into the folder.github.com/uchennaji/myjsapp.git
Use the following command to clone the repository to my server:
git clone <repository-url>
This downloads the application files to your server. If you're using a Linux machine, Git is typically pre-installed, so no need to install it separately.
Once the repository was cloned, copy just one specific app from the collection of projects within it, run the command below:
sudo cp -r javascript-projects-for-beginners/<app-name>
Finally, restart NGINX to apply the changes:
sudo systemctl restart nginx
After that, open web browser to verify that the app was successfully deployed.
Step 4: Create a Custom Image of the VM
Deallocate the VM:
Go to Virtual Machines in Azure.
Select your VM > Stop the VM to deallocate it.
Capture the Image:
Navigate to your VM in the Azure portal.
In the Operations section, click Capture.
Give the image a name, set Automatically delete this virtual machine after creating the image, and click Review + Create.
Step 5: Set Up Four Private VMs
Create a Virtual Network (VNet):
Go to Virtual Networks > Create.
Name it, choose the same resource group and region as your public VM, and define the IP range.
Create Four Private VMs:
Go to Virtual Machines > Create VM.
Choose your resource group and use the captured image in Image.
Select your virtual network (created in the previous step).
Leave public IP disabled since these VMs will be private.
Repeat this process to create four private VMs.
Step 6: Set Up Load Balancer
Create a Load Balancer:
Go to Load Balancers > Create.
Select your resource group and region.
Set the type to Internal and choose the virtual network you created earlier.
Create a new frontend IP configuration for the load balancer.
Go to Health Probes > Add.
Use TCP and port 80 to check if the VMs are healthy.
Configure Load Balancing Rules:
In Load Balancing Rules, set the frontend IP, backend pool, health probe, and use port 80 for both frontend and backend ports.
Step 7: Verify Application and Load Balancing
Test the JavaScript Application:
- Access the public IP of the load balancer using a browser to verify that the application is accessible and the traffic is properly distributed across the four private VMs.
Check Load Balancing:
- Use load testing tools like ab (Apache Benchmark) or online services to simulate traffic and verify that it is evenly distributed among the VMs.
Conclusion:
By following these steps, you successfully set up an NGINX server and deployed a JavaScript application on Azure VMs. You also scaled the application using a load balancer, ensuring efficient traffic distribution and fault tolerance across the private VMs. This setup provides a robust and scalable web application architecture suitable for real-world deployment scenarios.