Azure Journey – Creating a basic website and hosting it in Azure

For those of you that have followed me for a while at ALM Rocks, you know that part of my blogging style is to just try things, and blog about it as I go.  So sometimes I have a very coherent post that explains exactly how to do something, and sometimes it just stops at a dead end.  I’m going to approach my Azure blogging the same way. I’m also going to try and add companion video to some of my posts.

I decided to start with learning more about Azure Websites.  And what better way to start than to create a simple website and get it hosted in Azure.

Create a simple ASP.NET MVC Site

Open Visual Studio 2015.  Select File | New | Project.  This opens the New Project dialog box.

image

Select Template | Visual C# | Web | ASP.NET Web Application. On the right hand side, de-select the Application Insights checkbox. In the drop-down box below that checkbox, enter your account that is tied to your Azure subscription.  Give your website a name (in this example I used “MySimpleMVCWebsite”).  When ready, click Ok.

This opens the New ASP.NET Project dialog box:

image

Select the MVC template under ASP.NET 4.5.2 Templates. Click Ok.

Visual Studio will create the MVC Project.

image

Once the site is created in Visual Studio, you can hit F5 to run the site.  It should look something like this.

image

Awesome! I have a working MVC site now, running locally on my machine.  Now I need to “lift” it into Azure.

 

Lift the website into Azure

Now I want to run this website in Azure.  In Visual Studio, in Solution Explorer, right-click on the project and select Publish. This opens the Publish Web dialog box.

image

Click the Microsoft Azure App Service button.

image

In the drop-down at the top right, make sure the appropriate Azure account is selected.  In the Subscription drop-down box, select the appropriate Azure subscription.  In the View drop-down box, select Resource Group.   Then click the New button.

image

Select the Change Type drop down and select Web AppThe Web App Name needs to be a unique name across all Azure websites.  Visual Studio will append a bunch of numbers to it. You can change the name, but make sure you keep it unique. In the Subscription drop-down, make sure to select the same subscription you were using earlier.

We need to create a new Resource Group for this website.  I like to think of a resource group as a “folder” or “container” for a bunch of “stuff” I want to keep together in Azure. To create a new Resource Group, click the New button, then enter the name of your resource group (mine is going to me “myresourcegroup”).

We also need to create an App Service Plan.  An App Service Plan defines the resource tier that my website will use, among other things.  Click the New button.

image

The plan will default to your website name with the word Plan at the end.  Select the appropriate location, and for now, select Free for the size.  Click Ok.  At this point the Create App Service dialog should look like the following:

image

Click the Create button. This will create the web app service and app service plan in Azure.  At this point, we are ready to validate everything, and then publish our website.

image

Click the Validate button.  Since Visual Studio did everything for us, it should validate ok.  If the validation is successful, click the Publish button. You can watch the Output window as the website is published.

image

And the deployment was successful!  My web browser automatically opened to my deployed site:

image

Let’s go see what things look like in the Azure portal.  Open up https://portal.azure.com.

image

From the menu on the left, select Resource groups.  I see the resource group I created , myresourcegroup. I can select the resource group to see what it contains.

image

And I can see it contains two items, my web site, and the app service plan.  And now I’ve lifted my web app into Azure.

[Cross-Posted with System Center Central, a great community website for all things System Center and Azure]

  • Add Your Comment