Open In App

Hosting a Web Application on Microsoft Azure in IAAS

Azure provides a lot of services to host a web application whether it be static or dynamic in a number of ways. In this article, we will host a simple static web application taking Infrastructure as a Service on Microsoft Azure, by using a free and open-source cross-platform web server software named Apache HTTP Server on a virtual machine. A static web application can be a simple HTML, CSS, or JavaScript website that doesn’t require any dynamic changes, specifically any server-side alternations. First, we will require a web server that will host our web application on the internet. For this purpose, we will deploy a virtual machine exposed to the internet (having a public IP address) along with ports 22 (SSH) and 80 (HTTP) exposed. We will make this virtual machine a running web server by installing & using the Apache HTTP server application and its services on the VM. After the successful deployment and configuration of the web server, we will then deploy our static web application on the server that will host the application on the internet.

Prerequisites

Now Follow the below article after signing in to the Azure portal, to successfully achieve the above-mentioned statements:

Create a Resource Group

A resource group is a group in Azure that will hold all the resources that will be managed as a single group or a single Azure solution. It is best practice to add resources within the same resource group that will share the same lifecycle.

Select “Resource groups” on the left panel.

Add/create a new resource group.

Fill out the basic details required for the resource group.

Give tags to your resource group (optional).

Review & create your resource group.

Create a Virtual Machine

Select “Virtual machines” on the left panel.

Add/create a new virtual machine.

Configure the Basics of the Virtual Machine

  1.  Provide the name of the resource group in which the virtual machine will reside or create a new one.
    • Here, we will provide an existing resource group named rg-WebApp which we created earlier.
  2. Give a name to your virtual machine.
    • Here, we provide the name MyUbuntu-VM, since we will be using an Ubuntu VM.
    • If you do not want to use an Ubuntu VM, you may specify your own image for the virtual machine by selecting Browse all public and private images in the Image option (go to point 5).
    • NOTE: Here, in this lab project, since we will use SSH authentication to connect to the VM, a Linux virtual machine is needed.
    • If you choose a Windows image you will require RDP authentication.
  3. Provide the region you want the VM to be deployed to.
    • Here, we provide Central India.
    • It’s a good practice to provide a region that is nearer to you, for lesser latency.
  4. Leave the Availability options as No infrastructure redundancy required for now.
  5. Provide the image of the virtual machine to be used.
    • Here, we provide Ubuntu server 18.04 LTS – Gen1.
  6. You can select different sizes for the VM by selecting different values of CPU, RAM, Data disks, IOPS, etc., and charges will be applied accordingly.
  7. Select the SSH public key as the Authentication type.
  8. Provide the administrator username for the VM.
  9. In the SSH public key source field select Use existing public key option from the drop-down menu.
  10. Use PuTTygen software to generate a public-private SSH key pair (Asymmetric cryptography).
  11. Paste the generated public key in the SSH public key field & save the private key on your local machine.
    • We save the private key as PK-1.ppk.
  12. You can select and allow certain ports to be exposed on the internet by enabling the Allow selected ports option.
  13. We allow port no. 22 (for SSH authentication) and port no. 80 (for accessing our web app on HTTP).

Fill out the basic details required for the virtual machine. (1)

Fill out the basic details required for the virtual machine. (2)

Configure the Disks of the Virtual Machine

  1. Since we won’t need any use of a higher IOPS workload, select Standard HDD from the drop-down menu of the OS disk type.
  2. Leave the encryption type as default.
    • In this case, the encryption of the disk will be managed by Microsoft.
  3. Since we won’t be doing any data-intensive workload keep the Enable Ultra Disk compatibility as No.
  4. If you want to add additional disks to your VM, you can do so by selecting Create and attach a new disk option in the Data disks. We won’t need any additional disks, so leave it blank.

Fill out the details of the disk required for the virtual machine.

Configure the Networking of the virtual machine

A virtual machine needs a network where it can reside, function, and communicate.

You can provide an Azure virtual network for the purpose which will be a virtual isolated representation of your network in the cloud.

  1. Create a new virtual network by clicking on the Create a new option.
  2. Give a name to your virtual network.
  3. Provide address space to your virtual network.
    • Here, we provide address space as 192.168.0.0/16.
  4. Provide sub-network(s) within your virtual network.
    • We provide two subnets named Subnet-1 and Subnet-2 with address range 192.168.10.0/24 and 192.168.50.0/24 respectively.
  5. You can decide which subnet your VM will reside on.
    • We choose Subnet-1.
  6. You can decide whether to provide a public IP address for your VM or not.
    • Since we will be accessing our web application on HTTP, we give the VM a public IP address with the default name.
  7. Keep the NIC NSG as basic.
  8. We need to allow certain ports to open.
  9. We select port numbers 80 (HTTP) and 22 (SSH) to be open.
  10. Keep the Accelerated networking off.
    • In our case, the VM size does not support this option.
  11. Currently, we do not have a load balancer, nor we are implementing it, for now, so keep it as No.

Configure the networking details required for the virtual machine. (1)

Configure the networking details required for the virtual machine. (2)

Configure the Management of the Virtual Machine

  1. Boot diagnostics troubleshoot boot failures for images. Enable it by selecting Enable with a managed storage account.
  2. OS guest diagnostics will generate metrics for monitoring at every minute. We don’t need it for now.
  3. Keep the identity option off.
  4. The Azure Active Directory is a directory service by Microsoft Azure for managing access and permissions to networks and resources. Keep this option off.
  5. Keep the Auto-shutdown option off if you do not want the VM to auto shutdown at a certain date and time.
  6. Keep the Backup option off.

Configure monitoring & management details required for the virtual machine. (1)

Configure monitoring & management details required for the virtual machine. (2)

Virtual machine deployment overview.

Authenticate to the Virtual Machine

Copy the public IP address of the VM from the overview section.

Paste the public IP address of the VM in PuTTy.

Provide the private key in PuTTy.

Virtual machine authentication successful.

Hosting Static Web Application

1. Install the Apache HTTP Server using the command,

sudo apt-get install apache2

2. Run the Apache service using the command,

sudo service apache2 start

3. Copy the public IP address of the VM and browse it on the internet specifying port number 80, as.

<VM's public IP address>:80

The web server is running & the default web page is successfully hosted.

4. Now navigate to the path /var/www/ using the command,

cd /var/www/

5. Delete the directory html using the command,

sudo rm -rf html

6. Clone your web application source from GitHub or any other version control if any, using the command,

sudo git clone https://github.com/CODESofRishi/HAA-WebApp2.git

7. Rename the directory cloned from GitHub as html, using the command,

sudo mv HAA-WebApp2/ html

8. Reload the web page.

Our static web application is successfully hosted.

Congratulations your static web application is now hosted on the internet.

Before wrapping up

Delete the resource group.


Article Tags :