Quick start of the first project in Windows Azure. Web sites. Website Migration to Cloud Services

Good afternoon, dear colleagues.

The first five parts of the cycle are available here . In this part of the series, we will consider migrating our simple website to Cloud Services (ex-Hosted Services) using a simple application that will use the WIndows Azure role model, Windows Azure Service Bus, and storage services.


Let's look at the following scenario: you have already deployed your website (for example, the standard ASP.NET MVC 4 website, which will be discussed later) on Windows Azure Web Sites, but after some time you have discovered that an additional website is required functionality - it is necessary that the user can go to your website and upload images to his own gallery. We implement such a scenario with the help of one website functionality, however, the list of requirements also contains a condition for flexible scalability of your website. If you use only Windows Azure Web Sites, you can scale your entire website only, which is an inefficient solution - most likely, the main burden will be on image processors rather than on the web user interface. Migrating a website to Cloud Services and rethinking the architecture based on the Windows Azure Cloud Services role model, as well as using Windows Azure Blob Storage and Service Bus Queues, will help create an effective implementation of this scenario. In this part of the series, you will create a cloud application that will consist of two layers:

1) A web interface implemented as a web role. On the main page of the application, the user will be able to upload images, as well as view already downloaded images. After loading the image, the Web role will send the image in the blob storage to the blob container, whose name will be predefined to simplify the task, and then put the message consisting of the link to the blob with the image in the Service Bus queue.

2) An image processor implemented as a Worker role. In an endless loop, the handler will query the Service Bus queue for messages from the Web role and if there is a message in the queue, it will pick it up, receive a link to the image blob, and then use the copy-source blob copy mechanism to create a new blob with the same image and put it in the blob repository.

Configure Cloud Services on Windows Azure

Open http://windows.azure.com in a web browser and log in using your Windows Live ID, to which your Windows Azure account is linked.

Create a new storage account in which the application data will be stored. From the Windows Azure menu, click New Storage Account . In the Create a New Storage Account dialog box that appears, select your subscription in the Choose a subscription drop-down list. In the Enter a URL text box, enter the name of your storage account, for example,gallerywhere is a unique name. Windows Azure uses this value to create storage account services entry point URLs. Select Create or choose an affinity group and click Create a new affinity group in the drop-down list . In the Create a New Affinity Group dialog box, enter the affinity group name in the Affinity Group Name text box , select the Location in the drop-down list and click OK. Returning to the Create a New Storage Account dialog box , click Create to create a new storage account.

Wait until the process of initializing the account and updating the "tree" Storage Accounts. Note that the properties panel Properties shows the URL , associated with each service in the storage account. Record the public name of the vault account — the first segment of the URL of your entry points. Click View, located next to the Primary access key in the properties panel of Properties has . In the View Storage Access Keys dialog box, click Copy to Clipboard (next to Primary Access Key) . The copied value will be needed to configure the application.

Create a computing service that will execute the code of your application: in the left pane, click Hosted Services and clickNew Hosted Service located on the menu. In the Create a new Hosted Service dialog box, select your subscription from the Choose a subscription drop-down list . Enter the service name in the Enter a name for your service text box and specify the URL by entering the appropriate value Enter a URL prefix for your service , for example,gallerywhere < yourname > must be a unique name. Windows Azure uses this value to create service entry point URLs. In the Create or choose an affinity group drop-down list, select the affinity group that you created earlier for the vault account. Specify Do not Deploy. Click OK to create the service and wait until the initialization process is completed. Go to the Service Bus, Access Control & Caching tab . Click the Service Bus tab . Click New . In the Create a new Service Namespace dialog box that opens, enter the name of your Namespace (for example,mytestservicebus) , select a location region and click Create Namespace. . Select the created namespace and click on the View button on the Properties panel in the Default Key field . Copy the Default Issuer and Default Key values from the Default Key dialog box . Deployment and storage services are configured; Service Bus namespace created.

Configure an ASP.NET MVC 4 Application

Open Visual Studio 2012 with administrator privileges.

Click New Project . Select the Web \ ASP.NET MVC 4 Web Application template (Figure 1). Name the project MVC4Gallery . Select Internet Application and uncheck the Create a unit test project option . Click OK. Wait for the project to be created. Fig. 1. List of web project templates in Visual Studio 2012 Right-click on the Models directory . Click Add => Class. In the dialog that opens, enter Image. cs and click OK . Replace the contents of the Image file . cs





to the code below.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace MVC4Gallery.Models
{
public class Image
{
public string Title{ get; set; }
public string Link{ get; set; }
}}

Open the Views \ Home \ Index file . cshtml and replace its contents with the code below.

Наш первый сайт-галерея

Файл


Ваши изображения после "обработки":
@foreach (var image in ViewData.Model)
{
@image.Title 


}

Open the Controllers \ HomeController file . cs and replace its contents with the code below. Necessary dependencies and libraries will be added in the next paragraph.

using System;
using System.Collections.Generic;
using System.Collections.Specialized;
using System.Web;
using System.Web.Mvc;
using Microsoft.ServiceBus.Messaging;
using Microsoft.WindowsAzure;
using Microsoft.WindowsAzure.StorageClient;
using MVC4Gallery.Models;
namespace MvcApplication1.Controllers
{
public class HomeController : Controller
{
public ActionResult Index()
{
List images = getBlobs("ourgallery");
return View(images);
}
[HttpPost]
[ActionName("Upload")]
public ActionResult Upload(string author, string title)
{
this.SendBlobToStorage(author);
return RedirectToAction("Index");
}
public void SendBlobToStorage(string author)
{
try
{
HttpPostedFileBase file = Request.Files[0];
CloudBlob blob = getBlobContainer("ourgallery").GetBlobReference(file.FileName);
NameValueCollection metadata = new NameValueCollection();
metadata["title"] = file.FileName;
blob.UploadFromStream(file.InputStream);
BrokeredMessage msg = new BrokeredMessage(blob.Uri.AbsoluteUri);
SendBrokeredMessageToServiceBusQueue(msg);
}
catch (StorageClientException e)
{
Console.WriteLine("Возникла ошибка во время работы с хранилищем: " + e.Message); System.Environment.Exit(1);
}}
public List getBlobs(string author){
CloudBlobContainer container = getBlobContainer(author);
List images = new List();
foreach (CloudBlob blob in container.ListBlobs())
{
blob.FetchAttributes();
Image image = new Image();
image.Link = blob.Uri.AbsoluteUri;
image.Title = blob.Metadata["title"];
images.Add(image);
}
return images;
}
public static CloudBlobContainer getBlobContainer(string userId)
{
var account = CloudStorageAccount.FromConfigurationSetting("storageaccount");
CloudBlobContainer container = account.CreateCloudBlobClient().GetContainerReference(userId);
container.CreateIfNotExist();
var permissions = container.GetPermissions();
permissions.PublicAccess = BlobContainerPublicAccessType.Container;
container.SetPermissions(permissions);
return container;
}
public static void SendBrokeredMessageToServiceBusQueue(BrokeredMessage msg)
{
QueueDescription qd = new QueueDescription("servicebustest");
qd.MaxSizeInMegabytes = 5120;
qd.DefaultMessageTimeToLive = new TimeSpan(0, 1, 0);
string connectionString = CloudConfigurationManager.GetSetting("Microsoft.ServiceBus.ConnectionString");
QueueClient Client = QueueClient.CreateFromConnectionString(connectionString, "servicebustest");
Client.Send(msg);
}}}

Right-click on the References directory . Select Add Reference . In the dialog box that opens (Figure 3), select the following assemblies:

Microsoft.WindowsAzure.StorageClient 1.7.0.0
Microsoft.WindowsAzure.Configuration 1.7.0.0
Microsoft.WindowsAzure.ServiceRuntime 1.7.0.0
Microsoft.ServiceBus 1.7.0.0
System.Runtime.Serialization 4.0. 0.0 Fig. 3. The choice of assemblies for the project. Open the Global file . asax and add the code below to the Application _ Start () method .

CloudStorageAccount.SetConfigurationSettingPublisher((configName, configSettingPublisher) =>
{
var connectionString = RoleEnvironment.GetConfigurationSettingValue(configName);
configSettingPublisher(connectionString);
});

Right click on the project . Select Add Windows Azure Cloud Service Project (Figure 4). Fig. 4. Adding a cloud project to the solution Right-click on Roles in the created MVC 4 Gallery project . Azure . Choose Add . Click New Worker Role Project (Figure 5). Fig. 5. Adding a project for the Worker role to the solution In Windows Azure Tools 1.7 , a new Worker role template has already been added, which is already configured to use Service Bus. In the Add New Role Project window, select Worker Role with Service Bus Queue









and click Add (Fig. 6). Fig. 6. Adding a Worker Role project configured to use Service Bus Queue Open the WorkerRole.cs file and replace its contents with the code below.

using System;
using System.Collections.Specialized;
using System.Diagnostics;
using System.Net;
using System.Threading;
using Microsoft.ServiceBus;
using Microsoft.ServiceBus.Messaging;
using Microsoft.WindowsAzure;
using Microsoft.WindowsAzure.ServiceRuntime;
using Microsoft.WindowsAzure.StorageClient;
namespace WorkerRoleWithSBQueue1
{
public class WorkerRole : RoleEntryPoint
{
// The name of your queue
const string QueueName = "servicebustest";
// QueueClient is thread-safe. Recommended that you cache
// rather than recreating it on every request
QueueClient Client;
bool IsStopped;
public override void Run()
{
while (!IsStopped)
{
try
{
// Получение сообщения
BrokeredMessage receivedMessage = null;
receivedMessage = Client.Receive();
if (receivedMessage != null)
{
// Обработка сообщения. В данном случае изображение получается из блоба, затем возвращается в том же виде, но с другим именем файла.
GetBlobFromStorage("ourgallery", receivedMessage.GetBody());
receivedMessage.Complete();
}}
catch (MessagingException e)
{
if (!e.IsTransient)
{
Trace.WriteLine(e.Message);
throw;
}
Thread.Sleep(10000);
}
catch (OperationCanceledException e)
{
if (!IsStopped)
{
Trace.WriteLine(e.Message);
throw;
}}}}
public override bool OnStart()
{
CloudStorageAccount.SetConfigurationSettingPublisher((configName, configSettingPublisher) =>
{
var connectionString = RoleEnvironment.GetConfigurationSettingValue(configName);
configSettingPublisher(connectionString);
});
// Определение максимального количества одновременных подключений
ServicePointManager.DefaultConnectionLimit = 12;
// Создание очереди в том случае, если ее еще не существует
string sbconnectionString = CloudConfigurationManager.GetSetting("Microsoft.ServiceBus.ConnectionString");
var namespaceManager = NamespaceManager.CreateFromConnectionString(sbconnectionString);
if (!namespaceManager.QueueExists(QueueName))
{
namespaceManager.CreateQueue(QueueName);
}
// Инициализация подключения к очереди Service Bus
Client = QueueClient.CreateFromConnectionString(sbconnectionString, QueueName);
IsStopped = false;
return base.OnStart();
}
public override void OnStop()
{
// Закрытие подключения к очереди Service Bus
IsStopped = true;
Client.Close();
base.OnStop();
}
public void GetBlobFromStorage(string author, string title)
{
try {
CloudBlob sourceBlob = getBlobContainer("ourgallery").GetBlobReference(title);
CloudBlob newBlob = getBlobContainer("ourgallery").GetBlobReference(title + "small_copy");
newBlob.CopyFromBlob(sourceBlob);
NameValueCollection metadata = new NameValueCollection();
metadata["title"] = title + "small_copy";
} catch (StorageClientException e)
{
Console.WriteLine("Возникла ошибка: " + e.Message); System.Environment.Exit(1);
}}
public static CloudBlobContainer getBlobContainer(string userId)
{
var account = CloudStorageAccount.FromConfigurationSetting("storageaccount");
CloudBlobContainer container = account.CreateCloudBlobClient().GetContainerReference(userId);
container.CreateIfNotExist();
return container;
}}}

Add the WebRole.cs file to the MVC4Gallery project and replace its contents with the code below.

using System;
using System.Collections.Generic;
using System.Linq;
using Microsoft.WindowsAzure;
using Microsoft.WindowsAzure.Diagnostics;
using Microsoft.WindowsAzure.ServiceRuntime;
using Microsoft.WindowsAzure.StorageClient;
namespace MVC4Gallery
{
public class WebRole : RoleEntryPoint
{
public override bool OnStart()
{
RoleEnvironment.Changing += RoleEnvironmentChanging;
return base.OnStart();
}
private void RoleEnvironmentChanging(object sender, RoleEnvironmentChangingEventArgs e)
{
if (e.Changes.Any(change => change is RoleEnvironmentConfigurationSettingChange))
{
e.Cancel = true;
}}}}

Double-click the right mouse button on the MVC 4 Gallery in the Roles cloud project in order to open the GUI for administering the Web role (Fig. 7). Fig. 7. Web role management graphical interface On the Configuration tab, uncheck the Enable Diagnostics option . Go to the Settings tab , click Add Setting and create a new configuration setting called storageaccount . Specify its type as Connection String, then click on the ellipsis button and configure the connection string. The required data was recorded in Part 1. Click Add Setting and enter a name.




Microsoft.ServiceBus.ConnectionString (type is String) , then insert the following line into the Value field :

Endpoint = sb: // [namespace] .servicebus.windows.net; SharedSecretIssuer = owner; SharedSecretValue = [DefaultKey]

Where is the namespace name for parts of Endpoint, Default Issuer for SharedSecretIssuer and Default Key for SharedSecretValue . Click OK. Right-click on WorkerRoleWithSBQueue 1 in the Roles cloud project twice to open the GUI for administering the Worker role.

TabConfiguration uncheck the Enable Diagnostics option . Go to the Settings tab , click Add Setting and create a new configuration setting called storageaccount . Specify its type as Connection String, then click on the ellipsis button and configure the connection string. The necessary data was recorded in Part 1. Click OK. Paste the required values ​​into the connection string to configure Microsoft.ServiceBus.ConnectionString. The necessary data was recorded in Part 1 - namespace name for the Endpoint part , Default Issuer for SharedSecretIssuerand Default Key for SharedSecretValue . Save the changes and close the Worker role management graphical interface.

Start the project by pressing F5. The project will start in the local computing emulator and launch the browser with the Home / Index view .

Select an image and click Save . After loading the image, the page will refresh. Please note that at the moment only one image is displayed - the one you uploaded. After some time (just a few seconds) refresh the page - this time the image processor will need to poll the queue, receive a message from the Web role, download the blob, create a copy of it and put a new blob in the repository.

Deploying ASP.NET MVC 4 applications on the Windows Azure platform in Cloud Services from Visual Studio 2012

In order to deploy the application in Cloud Services on the Windows Azure platform, you must configure the publishing functionality in Visual Studio 2012 accordingly.

Right-click on the MVC 4 Gallery cloud project . Azure Click Publish . In the dialog box that opens, expand the list under Choose your subscription and select <Manage ...> (Fig. 12). Fig. 12. In the Windows Azure Cloud Service Project Management dialog box that opens, click New. Enter any convenient name for the new certificate that will be used to deploy the application. Click Ok. Click on the link.




Copy the full path. Go to the Windows Azure Management Portal. Click the Hosted Services, Storage Accounts & CDN tab . . Click the Management Certificates tab . . On the Management Certificates tab, click Add Certificate . In the Add New Management Certificate dialog box that opens, click Browse and paste the path to the certificate copied from Visual Studio in the File Name field . Click Open. Click Ok. Go to the Hosted Services tab and copy the Subscription ID from the Properties panel. Go to Visual Studio 2012. Paste the copied subscription identifier into the corresponding field (Fig. 13). Click OK . Fig. 13. Click Close . Click Next. On the Windows Azure Publish Settings page , you can configure additional deployment options. Click Publish. You can observe the deployment process in the Windows Azure Activity Log view (Figure 14). Fig. 14. Presentation of Windows Azure Activity Log Go to the Windows Azure Management Portal on the Hosted Services tab . Select the deployed application and click on the link in the DNS Name field in the panel









Properties to go to the website (Fig. 15). Fig. 15. Windows Azure Management Portal Note that the site looks the same as after deploying it to a local computing emulator. This is due to the fact that in both cases the real storage of Windows Azure is used. Add a new image and observe the result.