Hosting A IIS Website On Azure PT 2

Objective

In PT 1 I created the foundation of a very basic IIS hosting where a 2 Azure VM Servers was made so that a load balancer could distribute traffic between the two running VMs Hosting the IIS Website. 

 

This entry will show the modernized way to deploy this solution. Showing the power of the cloud.

Before diving into what I have created for this, I wanted to provide insight. 

PT 1 approach is one similar to how organisations would deploy such a solution using an on-prem approach. Although I used the cloud both VMs could be replaced with on prem servers and just connecting everything slightly different to achieve the desired goal. 

Part 2 aims to show how easy this solution is made using Azures resources and different infrastructure offerings. 

 

The Diagram on the left shows the different approach’s broken down.

Set Up

The Set Up for this project with very simple, I did this to keep costs low in azure although there are many other ways to deploy this solution in terms of the cloud. My first approach is to create a Resource Group (RG) This RG is our container for all the resources, I then only needed to create an App Service Plan and a Azure Web App. 

 

Other ways to approach this are using a paid version of the App Service Plan like B1 and then using Azure Front Door Standard or Premium for global load balancing. You could also add optional agents like azure monitor with app insights for rich logs. 

Create App Service Plan and Web App

This low cost approach to the modernized web hosting using two resources: 

In the Azure Portal I searched for the App Service Plan where I created the resource.

The App Service plan is a requirement for Web App deployment, without it you cannot deploy a web app.

Again on the Azure portal I searched for the Azure Services and then pressed Create to make a Web App:

You can see from the image that I needed to attach my App Service Plan so I could deploy this resource.

Edit The Web App Files

In the portal it’s visible that the Web App is now running and has deployed successfully. if you click into the web app we need to make a few changes.

 

The Web page itself comes with a pre configured HTML file that looks like this when you click Browse:

If we’re to pretend this is our corporate website, the first thing we need to do is change this. Now most organisations would have a github repo or would use some other code compiler where you would create your HTML page. Since I’m using the free version I am just going to edit the direct files of the resource. You can do this by going to Deployment Tools and clicking advance settings. Make sure you press “Go”

When you’re in advance settings you’re welcomed to Kudu, Kudu is in some ways the backend deployment Engine of the App Service

When you’re in Kudu you’re going to want to click “Debug Console” You can then Launch in CMD or PowerShell. I launched in CMD

 

This menu will then appear when you click either command lines

Now what you’re looking at is the Web App files under the hood but we’re looking specifically for the html web page, you could search through the directory to find this or use this command.

Now the file for the webpage is “hostingstart.html”

We can go ahead and press the minus button to delete it. We’re going to us our own IIS.

Press the plus button at the top of the screen next to wwwroot to create a new file. 

The Index.html file is a simple file – this is shown below:

 

<!DOCTYPE html>
<html>
 
<head>
 
<title> My IIS Site</title>
</head>
 
<body>
<h1> This Is My Modern WebPage</h1>
</body>
</html>

Now we have edited the file it can be tested. We can exit Kudu and then Browse the page to see if it works.

 

Press Browse

 

If successful your web page should load with the website name and header showing in the body of the page.

 

That’s it.  Like mentioned above there are better ways of deploying this but due to costs this is how I have done it to show a more modern approach to the solution. This shows how fast resources can be set up in the cloud.

Scroll to Top