Category Archives: Azure

Introduction to Azure Cloud Services (ACS)

In this article I would like to provide guide on how to create MVC web application and published it to Azure Cloud Services (ACS). There are couple of pre-requisites if you would like to do development in Azure:

Once we have those pre-requisites fulfilled, then without further ado please find below the list of steps to create MVC application and hosted it in Azure Cloud Services:

1.Create New Project in Visual Studio, Under Templates > Visual C# > Cloud > Azure Cloud Service. Provide the Solution Name and Click OK.

RoomReservationACS1

2. In the New Microsoft Azure Cloud Service window, Select ASP .NET Web Role and Worker Role to be included in your solution. Rename the Web Role and Worker Role and Click OK.

RoomReservationACS2

3. In the New ASP .NET Project – Web Role window, Select MVC and Click OK.

RoomReservationACS3

4. When the solution created, it will have the web role and worker role projects that you’ve selected and also another project to configure the service configuration and definition, configure instances, settings, end points and certificates of your web role and worker role. I would like to Configure the Web Role as below, Set Instance Count to 2 and VM Size to Extra Small.

RoomReservationACS4

5. I’ve added couple of Azure Cloud Services configurations like Address, City, State, etc. The reason for placing these configuration on ACS configuration (instead of web.config) because we could change these on runtime from azure portal and those changes reflected straight away.

RoomReservationACS5

6. Configure the Worker Role, Set Instance Count to 1 and VM Size to Extra Small.

RoomReservationACS6

7. In _Layout.cshtml, Replace “Application Name” into “Room Reservation“.

RoomReservationACS7

8. In Contact.cshtml, Replace file content to below.

@using Microsoft.WindowsAzure.ServiceRuntime;
@{
   ViewBag.Title = "Contact";
}
<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>
<address>
@RoleEnvironment.GetConfigurationSettingValue("Address")

@RoleEnvironment.GetConfigurationSettingValue("City"),
@RoleEnvironment.GetConfigurationSettingValue("State") @RoleEnvironment.GetConfigurationSettingValue("Zip")

<abbr title="Phone">P:</abbr>
@RoleEnvironment.GetConfigurationSettingValue("Phone")
</address>
<address>
<strong>Support:</strong>   <a href="mailto:Support@example.com">@RoleEnvironment.GetConfigurationSettingValue("SupportEmail")</a>

<strong>Marketing:</strong> <a href="mailto:Marketing@example.com">@RoleEnvironment.GetConfigurationSettingValue("MarketingEmail")</a>
</address>

9. In HomeController.cs, Replace file content to below.

namespace RoomReservationWebRole.Controllers
{
    using Microsoft.WindowsAzure.ServiceRuntime;
    using System.Web.Mvc;

    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        public ActionResult About()
        {
            ViewBag.Message = "Your application description page.";

            return View();
        }

        public ActionResult Contact()
        {
            ViewBag.Message = RoleEnvironment.GetConfigurationSettingValue("ContactName");
            return View();
        }
    }
}

10. Update RoomReservationWebRole project web.config under system.web > customerrors.


<system.web>
...
<customErrors mode="Off" />
</system.web>

11. Build Solution and Press F5 to review it on your local Azure Emulator. Ensure configuration values displayed in Contact page.

RoomReservationACS8

12. Publish the solution. You will need to create new Azure Cloud Services to host your Web Role and Worker Role and new Azure Storage Account for Deployment package on your Azure portal prior.

RoomReservationACS13

13. Configure the publishing settings as below and Click Publish at the end. This might take a while initially, it’s good time to grab coffee while Azure doing the hard work deploying your solution.

RoomReservationACS9RoomReservationACS10RoomReservationACS11RoomReservationACS12

14. In Microsoft Azure Activity Log, you could see all publishing activities. Once publishing completed, Grab the Web app URL and open it in your internet browser.

RoomReservationACS14

14. Login to Azure portal, Update the configuration on Azure Cloud Services.

RoomReservationACS15

15. Refresh the internet browser and ensure Contact Page updated.

RoomReservationACS16

%d bloggers like this: