Part 12 : Windows Azure Web Sites - Deployment using Visual Studio 2013

This tutorial shows how to deploy an ASP.NET web application to an Azure Web Site by using Visual Studio 2013.

With the release of new Windows Azure SDK version 2.2 for Visual Studio 2013, sign in has been integrated directly within Visual Studio so that you can sign in to Windows Azure without ever leaving the IDE. This is great for developers as they now develop, debug and manage Windows Azure resouces from within Visual Studio. You no longer need to create and download the management certificates. One of the new feature is Remote Debugging, devlopers can now attach the debugger to running instance of Windows Azure cloud service right within Visual Studio. Remote debugging is great feature for developers as they can now debug a live cloud service which is very helpful if you want to track down any issues.

I believe you already has a Azure account as this is the prerequisite for this tutorial. If you don't have one please check here how to get  one.

If you are following the previous tutorials then you must have development environment setup either for visual studio 2013 or 2012/2010. If not, setup the development environment by installing Azure SDK and other related tools - refer previous tutorial here to get more details about how to setup dev environment for Azure development.

Create a web application
1. Open Visual Studio 2013.
2. Go to File menu and then New -> Project. In the new project dialog box, expand Visual C# and select      Web under Installed Template, and then select ASP.NET Web Application.  Ensure that .NET  Framework  4.5 is selected as the target framework.

 3. In the New ASP.NET Project dialog box, select the MVC  template, and then click Change    Authentication.

 4. Since this is sample application, we don't need any login. In the Change Authentication dialog box, click  No Authentication, and then click OK.

 5. If you haven't already signed in to Azure, Visual Studio prompts you to do so. Click Sign In.

     

 6. Enter the ID and password of the account that you use to manage your Azure subscription.

    

 7. When you're signed in, the Configure Azure Site Settings dialog box asks you what resources you want  to create. Visual Studio provides a default Site name, which Azure will use as the prefix for your  application's URL. If you prefer, enter a different site name.In the Region drop-down list, choose the  location that is closest to you. This setting specifies which Azure data center your web site will run in.Leave  the database fields unchanged as for this tutorial we are not using any database. Click OK.

8. In a few seconds, Visual Studio creates the web project in the folder you specified, and it creates the web  site in the Azure region you specified. You will get a message that your project has been created. The Web  Publish Activity window shows that the site has been created.

 9. If you go to the Windows Azure Management Portal, you can see the website listed under Web Sites    tab.

Though your website has been created, there are no contents yet. We need to deploy the site.

Deploy the application to Azure

 1. In the Web Publish Activity window, click Publish WebApplication1 to this site now. Publish Web  wizard will appears. The wizard creates a new publish profile that contains settings such as the web site  URL that Visual Studio needs in order to deploy your project to Azure. The profile is automatically saved  so that later when you make changes to the project you can easily redeploy the project to the same site.

 2. In the Connection tab of the Publish Web wizard, let the Publish method as Web Deploy. Change the  password if you wish and click on Validate Connection to make sure that Visual Studio can connect to  Azure in order to deploy the web project.

 3. When the connection has been validated, a green check mark is shown next to the Validate Connection  button.Click on Next button.

4. In the setting tab, you can accept the default settings on this tab. You're deploying a Release build and you  don't need to delete files at the destination server, precompile the application, or exclude files in the  App_Data folder. Click on Next button.

 5. In the Preview tab, click Start Preview. The tab displays a list of the files that will be copied to the server.  You can also skip this step and directly click on Publish button.

 6. Click on Publish Button. Visual Studio begins the process of copying the files to the Azure server. The    Output and Web Publish Activity windows show what deployment actions were taken and report successful  completion of the deployment.

7. Upon successful deployment, the default browser automatically opens to the URL of the deployed web  site, and the application that you created is now running in the cloud. The URL in the browser address bar  shows that the site is being loaded from the Internet.

How to redploy after making changes

1. Modified any file you want or add a new one.

2. In Solution Explorer, right-click the project, and choose Publish.

3. The Preview tab of the Publish Web wizard appears. If you needed to change any publish settings you  could choose a different tab, but now all you want to do is redeploy with the same settings. Click on Publish  button.

4. Visual Studio deploys the project to Azure and opens the site in the default browser.

There also a tool called Web One Click Publish tool, which is a quicker way to redploy. This toolbar is not enabled by default. To enable it go to Views-> Toolbars-> Web One Click Publish.  You can use it to select a profile, click a button to publish, or click a button to open the Publish Web wizard.

In this tutorial we have seen how we can use the integrated sign-in feature of Visual Stdio 2013 and deploy the application to Windows Azure. In the upcoming chapters we will learn more features of Visual Studio like remote debugging. 

Part 11 : Windows Azure Web Sites - Deployment using Visual Studio 2010/2012

This tutorial shows how to deploy an ASP.NET web application to an Azure Web Site by using Visual Studio 2010 or Visual studio 2012. This is the most useful and highly used by developers when they doing development of Windows Azure.

I believe you already has a Azure account as this is the prerequisite for this tutorial. If you don't have one please check here how to get  one.

If you are following the previous tutorials then you must have development environment setup either for visual studio 2013 or 2012/2010. If not, setup the development environment by installing Azure SDK and other related tools - refer previous tutorial here to get more details about how to setup dev environment for Azure development.

There will be three main steps in this tutorial.

1. Create a website in Windows Azure portal.
2. Create a Asp.net MVC application using Visual Studio.
3. Publish the application to Windows Azure.

Let's see these steps in detail. 

Create website in Windows Azure portal

If you have already created a website in Windows Azure portal and knows how to do it, you can skip this section, otherwise follow along.

1. Login to the Windows Azure management portal , click Web Sites and then click New at the bottom side.
   

2. A fly out menu will appear with website selected. It will present three option for creating an Azure Web Site :  Quick Create, Custom Create and From Gallery. Click on quick create. 

    

3. Choose a unique name for your site. If your site name is unique, there will be little green check mark  appears as shown in the figure. If it's not unique, an alert will appear and you have to choose unique  name.This setting specifies which data center your web site will run in. For now, choose the region closet    to you. 

    

4. The Management Portal returns to the Web Sites page, and the Status column shows that the site is being created. After a while (typically less than a minute), the Status column shows that the site was successfully created. In the navigation bar at the left, the number of sites you have in your account appears next to the Web Sites icon.
 

Create a Asp.net MVC application

Now our website has been created, but there is no content in it yet. In this step we are going to create a web application that we gonna publish to Azure.

1. Open Visual Studio 2010/2012. 

2. Go to File menu and then New -> Project. In the new project dialog box, expand Visual C# and select  Web under Installed Template, and then select ASP.NET MVC 4 Web Application. Ensure that .NET  Framework 4.0 or 4.5 is selected as the target framework. Name the application "testazure4" (I have given the same name as my website), and click OK.

    

3. In the New ASP.NET MVC 4 Project dialog box, select the Internet Application template and click OK.

    

4.  Visual Studio use a default template for the ASP.NET MVC project. So the application that you have  just created is working without doing any changes. Since the main purpose of this tutorial is to show how to  deploy the application right from Visual Studio, the default project with no changes is sufficient. However you can go ahead and change the content if you want and if you obviously know the MVC. Press CTRL + F5 to run your application. The application home page appears in the browser. The same page we expect to appear when we deploy our application to Windows Azure.

    

Publish the application to Windows Azure

Now the most important part of this tutorial, we are going to publish this website to Windows Azure.

In order to publish through Visual Studio, you need a publish setting file (also known as subscription file), which can be downloaded from Windows Azure Management Portal. The publish settings file is just an XML file with your subscription details (id, name, url) as well as a management certificate for authenticating management API requests. Without this file you need to create certificate in your local certificate store and export the same to Azure portal, and then you use this certificate in Visual Studio and associate your subscription ID with each operation. With publish setting file, you have to just download this file from portal and import in Visual Studio.

To can download this file from the link https://windows.azure.com/download/publishprofile.aspx .

You may need to login with your subscription account. Once downloaded save it in your local drive.

The publish seeting file name will be in this format:

<Subscription_Name>-<Download_Date>-credentials.publishsettings

Note : The .publishsettings file contains your credentials (unencoded) that are used to administer your Azure subscriptions and services. The security best practice for this file is to store it temporarily outside your source directories (for example in the Libraries\Documents folder), and then delete it once the import has completed. A malicious user who gains access to the .publishsettings file can edit, create, and delete your Azure services.

1. Go back to the Visual Studio right-click the project in Solution Explorer and select Publish from the  context menu.

    

2. This will open Publish Web Wizard. In the profile tab of Publish Web Wizard, click Import.

     

3. The Import Publish Profile dialog box appears. In the Import Publish Profile dialog box, click Import from an Azure web site, and then click Add Azure subscription.

    

    

 4. It will open Import Azure Subscriptions dialog box. We have already downloaded the subscription file.    Browse to the path where you have downloaded the file. Select the file and click on Import button.

     

 5. Once you add your subscription,drop-down list under Import from an Azure web site will include all    your web sites. Select your website from the drop down list and click OK.

     

 6. In the Connection tab, click Validate Connection to make sure that the settings are correct.

     

 7. When the connection has been validated, a green check mark is shown next to the Validate Connection       button. Click Next.

      

 8. In the Settings tab, uncheck Use this connection string at runtime option, since this application is not using a database. You can accept the default settings for the remaining items on this page. You are deploying a   Release build configuration and you don't need to delete files at the destination server, precompile the application, or exclude files in the App_Data folder. Click Next.

              

 9. In the Preview tab, click Start Preview.

     

 10. The tab displays a list of the files that will be copied to the server. Displaying the preview isn't required  to publish the application but is a useful function to be aware of. In this case, you don't need to do    anything with the list of files that is displayed.

       

 11. Click Publish. Visual Studio begins the process of copying the files to the Azure server.

 12. Upon successful deployment, the default browser automatically opens to the URL of the deployed web   site. The application you created is now running in the cloud as evident from the URL. 

       

So, that's about it, publishing website from Visual Studio 2010/2012. These are the same steps you need to perform to publish any website from Visual Studio, only import part you don't need to every time. In the next tutorial we learn how to publish using Visual Studio 2013.

Part 10 : Windows Azure Web Sites - Deployment using FTP

The File Transfer Protocol (FTP) is a standard network protocol used to transfer computer files from one host to another host over a TCP-based network, such as the Internet.

FTP is built on a client-server architecture and uses separate control and data connections between the client and the server.[1] FTP users may authenticate themselves using a clear-text sign-in protocol, normally in the form of a username and password, but can connect anonymously if the server is configured to allow it. For secure transmission that protects the username and password, and encrypts the content, FTP is often secured with SSL/TLS (FTPS). SSH File Transfer Protocol (SFTP) is sometimes also used instead, but is technologically different.

FTP is the traditional method of deploying your content to web server and many web developers are familiar with it.
In order to use FTP in Azure, you need to configure it. Your windows azure credentials will not work as FTP (or any other third party provider like Git) do not recognize Microsoft accounts.

You can configure the FTP credentials right from the Windows Azure portal by following these steps.

1. Login to Windows Azure portal using your credentials.
2. Select any website that you have already created.
 

3. After clicking on the site go to the dashboard of the site. Once you are in dashboard, click on "Set up deployment credentials" link on the right hand side as shown in the figure below.

4. On clicking of this link will open a pop up window that allows you to set credentials as shown in the figure      below.

5. Enter username and password and click on the right button. Once done you will get a notification     that Your deployment credentials were set successfully. This user name and password can be used to     deploy to any web site in all subscriptions associated with the account you use to log into the Windows     Azure portal. You do not need to set credentials for every web site that you create. Once you have set the credentials the link changes to "Reset your deployment credentials". As the name suggests, you can reset your credentials from here in case you forget or just simply change it.


To deploy using FTP, you need FTP server details , your username and password.
To get the server details of the web site your are uploading contents to, go to the dashboard of the website and you can see the FTP server details on the right hand side of the page as shown in the figure below.

If you pay attention closely to the FTP host name, then you find out that FTP host name is same for all the websites. But it's the "Deployment/FTP User " that is different for each website.

For example in my account for the test-learnwindowsazure website I have  "Deployment/FTP User " as 

test-learnwindowsazure\vjoshi

but for the website test1-learnwindowsazure it is

test1-learnwindowsazure\vjoshi

Now the following steps will explain how to deploy a simple html page to azure website.

1. Create a new file index.html and type the following contents to it. (or create any html file or use existing 

         one).

         <html>

             <body>

                   <h1> My first Azure website </h1>

             </body>

          </html>

2. You can use any FTP client to connect to Azure FTP location. Here I have used FileZilla.

    Give host, username and password to connect. For the user, give full user name. For the local site go to
    the directory where you have stored index.html, for me it's C:\Colud\Website. For the remote site go
    to /site/wwwroot.

 

3. Currently wwwroot has only one file "hostingstart.html". Drag index.html from local to remote and your file     will be uploaded to remote.

4. Go back to website listing in Windows Azure portal and click on the URL of the website for which you 

    have uploaded the content.

    

   Clicking on this URL will open the website and since index.html is the default page for website, it will show    the content of it.

 

 
These are just the simple steps that you follow to upload your content to Azure websites via FTP.
The same steps you need to follow whether you are uploading one file or hundreds of file.

Part 9 : Windows Azure Web Sites - Deployment Options

In the last tutorial we have created one web site in Windows Azure, but so for our web site is empty. We need to add some content to it. But before adding content let's see what all options are out there to deploy your source code to Windows Azure Web Sites. With Windows Azure Website, deployment of new and existing web sites is very quick and flexible.

1. Upload your content through FTP.
2. Publish from Web Matrix
   WebMatrix is a free, lightweight, cloud-connected web development tool. WebMatrix 3 brings you easy access to your Windows Azure websites. You can access your remote sites as seamlessly as local sites. 
3. Publish from Visual Studio
   You can publish your Azure application to Azure directly from Visual Studio. Microsoft made it very easy so that any developer can deploy his website easily on the cloud. 
4. Dropbox
   Dropbox is a free service that lets you bring your photos, docs, and videos anywhere and share them easily. You can simply put the source code into the local dropbox folder and it will quickly synchronize and deployed to Windows Azure.
5. Local Git Repository
   You can directly publish source code from your local Git Repository to Windows Azure and your site will go  live quickly and automatically.
6. GitHub
   GitHub is a web-based hosting service for software development projects that use the Git revision control system. From Windows Azure web site you can connect to any branch of GitHub project associated with your account.
7. Bitbucket
   Bitbucket is a web-based hosting service for projects that use either the Mercurial or Git revision control systems. Bitbucket includes an issue tracker, a wiki, and integration with popular  services such as Basecamp, Flowdock, and Twitter.
8. CodePlex
   CodePlex is an open source project hosting website from Microsoft. It allows shared development of open source software. To integrate with Windows Azure , your project must use Git ot Mercurial as the source control provider.

As you can see there are many deployment options are available and each of them has it's own advantages.

Also it depends on your needs which one you choose to choose.

We will be covering all of the above options in details in coming chapters, but at least for now our main concentration will be on publishing from Visual Studio. Visual Studio and Web matrix gives you option to publish the content directly from the tool. This way of deployment isn't good when you are working with other team members. It's difficult to track changes and there is no way to rollback to previous version. But it's best while you are learning and playing with Windows Azure.