Deploying Asp.Net WebSite in Azure

The beauty of Microsoft Azure is that it lets you to deploy your own content in Azure Website in several ways. These includes Deploying from a cloud-hosted source control system (i.e. from Dropbox, or from repository like Git or Mercurial), using an FTP utility, deploying from an on-premises source control system or using ‘command-line tools and the Azure REST management API’ and of course from deploying from an IDE (i.e. Visual Studio and WebMatrix) as well. I will not go in deep in explaining all the possible ways as those are out of the scope. Rather I would focus on explaining how easily you could deploy your web contents from your favorite IDE.

Among the available Microsoft IDEs (Integrated Development Environments) developers mainly prefer to stick with either Visual Studio or with WebMatrix for web development. For this tutorial I am going to stick with Visual Studio. If you are a WebMatrix fan, right now you are probably desperately crying to ask me why not WebMatrix? I agree that since both can use Web Deploy to automate additional deployment-related tasks such as database deployment and connection string changes so WebMatrix itself a good candidate.

But in compare to WebMatrix Visual Studio comes with something more! From within the Visual Studio IDE you can create, stop, start, and delete Azure Websites. Not only this you can even view logs as they are created in real-time, you can debug remotely, and much more. Another good part of this IDE is that it is easily integrates with with source control systems such as Visual Studio Online, Team Foundation Server, and Git repositories.
For the demonstration purpose I am going to use ‘Visual Studio 2013.3’ Ultimate edition but you can do things done even with the free ‘Visual Studio 2013 for Web Express’ edition.

Note: To complete this tutorial successfully along with the IDE you are also required to have an azure subscription. So, make sure you have an active azure subscription plan is going on. In case, if you don’t have one you can follow this link to get one for your personal use.

Our development environment is almost ready, just one more things you need on the way. Go and grab Azure SDK for Visual Studio 2013 (http://go.microsoft.com/fwlink/?linkid=324322&clcid=0x409). This will start the WebPlatform tool and will start installing required stuffs from internet.

The task that we are trying to accomplish can be divided in two parts. At first we will take the help of Visual Studio to create both our web apps/pages as well as the azure website. Once we are done then we will look further to deploy our newly created web apps to azure. The whole scenario is illustrated in the following diagram.
Deployment diagram

 Steps of these two part are given below:

Fire up the Visual Studio and from the File menu, click New Project. This will bring the “New Project” window.

      1. In theNew Project dialog box, choose either Visual Basic or Visual C# as your main programming language. I am going to stick with C# for this demo. Collapse the Visual C# and click Cloud > NET Web Application.
      2. Make sure that.NET Framework 4.5 is selected as the target framework then click OK.
        AzureWebDep (1)
      3. Select the EMPTY template, leave the “Host in the Cloud” checked and then click OK
        .AzureWebDep (2)

Note: (The check box caption might be Host in the cloud or Create remote resources. In either case the effect is the same.)

      1. As soon you hit the OK button Visual Studio might ask you to sign in to your azure account where you have the subscription activated.AzureWebDep (3)
      2. Up on your login you will see the “Configure Microsoft Azure Website” dialog page. Give a suitable site name. If the site name is available you will see a green tick mark right after your site name. Note: Your website will have azurewebsites.net suffix.AzureWebDep (4)
      1. Choose the region from where you expect/think your majority user are coming from. Since I am in Bangladesh, I am expecting majority of my user will be from Southeast Asia, so I have picked Southeast Asia as my region.
      2. I am expecting to deploy a simple website with some static content that does not require any kinds of interaction with database. So, I left the field as it was i.e. “No database”. Finally clicked the OK button to finish the steps.

Once the Microsoft Azure Website creation process is done you will see success notification in “Web Publish Activity”

AzureWebDep (5)

If you look in the Solution Explorer you will find a new folder named PublishScripts. This is a special folder that ensures and hold your cloud website, database and publish related stuffs. Usually you won’t find this folder included in your solution unless you configure Azure settings. In our case, we did in the previous steps, so it’s showing this folder.

AzureWebDep (6)

The file with the prefix –WAWS-div.json is a file that shows environment settings, the database you have mapped in cloud etc. This is a json structured file. In our case, we have not setup any database related things so you can see in the josn formatted file all the values in the (key, pair) format are left blank.

AzureWebDep (7)

To confirm that our azure website is already created open the Server Explorer, collapse the Azure portion, under the Websites portion you will find all the websites that are created under your account. In our case, we can see our newly created “CloudShowDemo” azure website in the Server Explorer.

AzureWebDep (8)

At this point the basic infrastructure is ready (i.e. your azure website is already created). To complete today’s lesson the only things that you now need is to publish your apps from Visual Studio. It is one of the simple things that you could do just by few clicks here and there.

Publishing the Website:

Right click the project from the Solution Explorer and click Publish…

This would take you to the Publish Web wizard. Check if everything is correct by clicking Validate Connection. On successful validation it would show you a green tick mark. Click Next

But before that first let’s have a look what we have done so far. If you navigate to your newly created website you will see some text with nice typography in light blue background.

AzureWebDep (9)

The text itself is so descriptive that I really don’t need to explain it. Rather, let me point out the reasons behind this. By default each website expect and looks for a file named Index. If it does not exist then the site looks for the configuration file to check if any other file is specified as startup file. The question is why our current website does not have an index page by default?

If you could recall from the very beginning of this lesson/tutorial you would find that we started our journey with the EMPTY project template that ships with Asp.Net Web Application. The template only provides some required .net files, nothing else.

Add a new webpage in the current project by right clicking the project from the Solution Explorer and then Add>HTML page. This will give you the basic boilerplate for HTML template. Its time to show your creativity, decorate the index file in your preferred way and once you are done then go for a redeploy phase.

Right click the Project and click Publish.

AzureWebDep (10)

In the next screen you will be taken to Publish Web wizard. Click the Validation button and if everything is fine then a green tick mark will be there.

AzureWebDep (11)

Clicking Next will take you to the Settings tab of Publish Web wizard. Choose Release as the configuration. Database related information will be available in this page. Since we have not configured any database yet (actually we don’t need one for this demonstration) that portion will remain empty.

AzureWebDep (12)

On the next page choose Preview and this would show you all the available files those are ready for upload. Click Publish button to upload all the files.

AzureWebDep (13)

Depending on your internet speed upload may take time. Once all the files are uploaded navigate your website and have fun 🙂

Productivity Tip: You can enable the Web One Click Publish toolbar for even quicker deployment. Go to View > Toolbars, and then select Web One Click Publish. The toolbar enables you to select a profile, click a button to publish, or click a button to open the Publish Web wizard.

AzureWebDep (14)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s