Deploying a JavaScript Application on Azure: Beginner's Guide

This guide will walk you through the process of deploying a JavaScript digital clock application on Microsoft Azure. We'll cover everything from setting up your development environment to creating a load balancer, highly available web application. Don't worry if you're new to cloud computing or Azure - we'll explain each concept as we go along.

Table of Contents

1. Understanding Azure
2. Setting Up Your Development Environment
3. Preparing Your Application
4. Creating Azure Resources
5. Deploying Your Application
6. Implementing Load Balancing
7. Testing and Verification

Understanding Azure
Microsoft Azure is a cloud computing platform that provides a wide range of services for building, deploying, and managing applications. Here are some key concepts you'll need to understand:
● Resource Group: A container that holds related resources for an Azure solution.
● Virtual Network (VNet): A representation of your own network in the cloud.
● Subnet: A range of IP addresses in your VNet.
● Virtual Machine (VM): A computer file (image) that behaves like an actual computer.
● Load Balancer: A service that distributes incoming network traffic across multiple
servers.

Setting Up Your Development Environment
Install Visual Studio Code:
● Download and install Visual Studio Code (VS Code) from https://code.visualstudio.com/
● VS Code is a lightweight but powerful source code editor that we'll use to manage our application code.
Create a GitHub Account:
● Go to https://github.com/ and sign up for an account if you don't already have one.
● GitHub is a platform for hosting and collaborating on code repositories

Preparing Your Application
Find a JavaScript Digital Clock Application:
● Search for a simple JavaScript digital clock application online.
● Download and unzip the application to your local computer.

Set Up a GitHub Repository
Log in to GitHub and create a new repository.
Follow the instructions provided by GitHub to initialize the repository.

Moved the code to Visual Studio Code
VS Code provides a powerful environment for code, version control, and terminal access.
Unzip the downloaded file and Push the JavaScript code from the local computer to a GitHub repository

Push Your Code to GitHub Open VS Code and open the folder containing your JavaScript application.
Open the integrated terminal in VS Code.
Initialize a Git repository, add your files, commit the changes, and push to GitHub using these commands:
git init
git add .
git commit -m "Initial commit"
git remote add origin
git push -M master

Creating Azure Resources
Sign Up for Azure:
Go to portal.azure.com and sign up for an account.

Create a Resource Group:
● Once logged into the Azure portal, click "Create a resource" in the top left.
● Search for "Resource group" and click "Create".
● Give it a name (e.g., "JS-Clock-RG") and choose a region close to you.
● Click "Review + create", then "Create".
Create a Virtual Network (VNet):
● In the Azure portal, search for "Virtual network" and click "Create".
● Select your resource group.
● Give it a name (e.g., "JS-Clock-VNet").
● Keep the default settings for address space and subnet.
● Click "Review + create", then "Create".

Creating and Configuring the Virtual Machine
● On the Azure portal, search for "Virtual machine" and click "Create".
● Select your resource group.
● Give your VM a name (e.g., "JS-Clock-VM1").
● Choose "Ubuntu Server" as the image.
● Choose a size (B1s is sufficient for this project).
● Set up a username and password.
● Under ports open port 22 (SSH) and 80 (HTTP).
● And Make sure everything is deployed in the same region
● Click "Review + create", then "Create".

Setting up the Azure infrastructure correctly is crucial for security, scalability, and manageability. The Resource Group helps organize related resources for easier management. The VNet and Subnet provide network isolation, enhancing security by controlling traffic flow between Azure resources and the internet. Creating a VM gives you full control over the server environment, allowing you to install and configure software as needed. Opening specific ports is a security best practice -port 22 for SSH access ensures secure remote management, while port 80 allows HTTP traffic to reach your web application.

Copy IP address from VM
After the creation of the Virtual Machine, A public IP address will be given to the Virtual Machine machine, this will allow us to SSH into the VM

Application Deployment

1. SSH into the VM (Secure Shell (SSH) provides encrypted communication for secure remote access to the VM)

ssh -i username@ip address

Install NGINX web server
NGINX is a high-performance web server that can efficiently serve static content and proxy requests to application servers. Once connected to your VM, run these commands:
sudo apt update
sudo apt install nginx -y

You can “curl ip” to be sure Nginx is on the IP

Test Nginx In Working: Copy your Virtual Machine public IP to your browser

Configure NGINX
Navigate to the NGINX configuration directory
The command:** cd /etc/nginx**
This directory contains NGINX configuration files.
Then type _ls _command to list nginx files

Removed existing NGINX configuration files
This ensures a clean slate for your custom configuration, preventing conflicts with default settings.
Remove the default configuration with the command: sudo rm -r (add default file names from nginx to be removed, you can add all files at once like I did in the
picture below)

Deploy Your Application
Clone your GitHub repository: git clone
https://github.com/your-username/your-repo-name.git
Then use this command: sudo cp -r reponame/* /var/www/html

Verify Your deployment via the VM's public IP address
Go back to your VM's overview page in the Azure portal.
Copy the public IP address.
Open a new browser tab and paste in the IP address.
You should see your JavaScript clock running!

Creating a VM Image
Stop the VM:
● In the Azure portal, go to your VM's overview page.
● Click "Stop".
Create an Image:
● Once the VM is stopped, click "Capture" in the top menu.
● Give your image a name (e.g., "JS-Clock-Image").
● Choose to create the image in your resource group.
● Give the version “1,0.0
● Select “Delete the original VM
● Click "Review + create", then "Create"

Created a Bastion host for secure access to private VM
Go to the Azure search box type in “Bastion” select the right region, leave instance count at 2. Click on “review and create”
Bastion provides a secure way to access your private VMs without exposing them directly to the internet.

Use The Bastion To Access The VM
Under overview, click on “Bastion” put the VM username and password or select
the right key pair.
Click on “Connect”

Deploy Multiple private VMs using the same image
Create Private VMs:
● Create 4 new VMs using the image you just created.
● When creating each VM, make sure to:
○ Place it in the same resource group and VNet.
○ Do not assign a public IP address (this makes it a private VM).
● Name these VMs "JS-Clock-VM1", "JS-Clock-VM2", "JS-Clock-VM3", and
"JS-Clock-VM4".

Setting Up Load Balancing
Load balancing distributes incoming traffic across multiple VMs, improving
performance and availability.
In the Azure portal, search for "Load Balancer" and click "Create".
Choose the "Public" type.
Select your resource group.
Give it a name (e.g., "JS-Clock-LB").
Click "Next”

Configure the Load Balancer
Next to “Front end ip address” give your ip a name
Under "Backend pools" add all four of your VMs to this backend pool.
Under "Settings", click "Health probes" and create a new one:
● Protocol: HTTP
● Port: 80
Under "Settings", click "Load balancing rules" and create a new one:
● Protocol: TCP
● Port: 80
● Backend port: 80
● Backend pool: The one you just created
● Health probe: The one you just created

Add the Load Balancing rule

Added all four private VMs to the load balancer
● Reason: This allows the load balancer to distribute traffic among all your
application servers.

Implementing a load balancer is crucial for high availability and performance. It evenly distributes incoming requests across your VMs, preventing any single VM from becoming overwhelmed. This setup also provides fault tolerance - if one VM fails, the others can continue serving requests. The load balancer's public IP becomes the sole entry point to your application.

Open port 80 (HTTP)

Test Your Load-Balanced Application
Go to your load balancer's overview page.
Copy the public IP address.
Open a new browser tab and paste in the IP address.
You should see your JavaScript clock running!

The digital clock application is now accessible through the load balancer's public IP Traffic is distributed across four private VMs
The Javascript Application (Digital Clock) Is Now Accessible

The digital clock application is accessible through the load balancer's public IP Traffic is distributed across four private VMs
Testing Load Balancer Functionality
Stop Two VMs:
● In the Azure portal, go to the overview pages for two of your VMs.
● Click "Stop" for each of them.
Verify Application Availability:
● Refresh the browser tab with your application.
● It should still be working, demonstrating that the load balancer is routing traffic to the
remaining active VMs.

Expected Outcome
The Load Balancer should automatically detect that the two VMs are unavailable.
It should continue to distribute incoming traffic to the remaining available VMs. Users accessing the application via the Load Balancer's IP should still see the
JavaScript application running seamlessly.

Results
The Load Balancer successfully detected the stopped VMs.
It rerouted traffic to the available VMs, ensuring continuous availability of the JavaScript application

Congratulations! You've successfully deployed a JavaScript application on Azure with load balancing capabilities. This setup ensures high availability of your application, as it continues to function even if some servers go down

Conclusion
This demonstrates a comprehensive approach to deploying a web
application on Azure, utilizing various services to create a scalable, secure, and highly available infrastructure. that the Azure Load Balancer is functioning correctly, providing high availability and fault tolerance by distributing traffic to active VMs. This setup ensures that even if some VMs go offline, the application remains accessible to users.