Windows Azureの最初のプロジェクトのクイックスタート。 Webサイト。 クラウドサービスへのWebサイトの移行

こんにちは、同僚の皆さん。



サイクルの最初の5つの部分は、 ここから入手できます 。 シリーズのこのパートでは、Windows Azureロールモデル、Windows Azureサービスバス、およびストレージサービスを使用する単純なアプリケーションを使用して、単純なWebサイトをクラウドサービス（以前のホストサービス）に移行することを検討します。





次のシナリオを見てみましょう：Windows Azure Webサイトに既にWebサイト（たとえば、後で説明する標準ASP.NET MVC 4 Webサイト）を展開しましたが、しばらくするとWebサイトに追加の機能-ユーザーがあなたのウェブサイトに行き、自分のギャラリーに画像をアップロードできることが必要です。 1つのWebサイト機能を使用してこのようなシナリオを実装しますが、要件のリストには、Webサイトの柔軟なスケーラビリティの条件も含まれています。 Windows Azure Webサイトのみを使用する場合、Webサイト全体のみをスケーリングできますが、これは非効率的なソリューションです。ほとんどの場合、主な負担はWebユーザーインターフェイスではなく画像プロセッサにあります。 Webサイトをクラウドサービスに移行し、Windows Azureクラウドサービスの役割モデルに基づいてアーキテクチャを再検討し、Windows Azure Blobストレージとサービスバスキューを使用すると、このシナリオの効果的な実装を作成できます。 シリーズのこのパートでは、2つのレイヤーで構成されるクラウドアプリケーションを作成します。



1）Webロールとして実装されたWebインターフェイス。 アプリケーションのメインページで、ユーザーは画像をアップロードしたり、ダウンロード済みの画像を表示したりできます。 イメージを読み込んだ後、WebロールはBLOBストレージ内のイメージをBLOBコンテナーに送信します。BLOBコンテナーの名前はタスクを簡素化するために事前定義され、その後、イメージを含むBLOBへのリンクで構成されるメッセージをService Busキューに入れます。



2）Workerロールとして実装された画像プロセッサ。 無限ループでは、ハンドラーはWebロールからのメッセージをService Busキューに照会し、キューにメッセージがある場合、メッセージを取得し、イメージBLOBへのリンクを受信し、コピーソースBLOBメカニズムを使用して新しいBLOBを作成します同じイメージをblobリポジトリに配置します。

Windows Azureでクラウドサービスを構成する

Webブラウザーでhttp://windows.azure.comを開き、Windows AzureアカウントがリンクされているWindows Live IDを使用してログインします。



アプリケーションデータが保存される新しいストレージアカウントを作成します。 Windows Azureメニューから、[ 新しいストレージアカウント ]をクリックします。 表示される[ 新しいストレージアカウントの作成]ダイアログボックスで、[サブスクリプションの選択]ドロップダウンリストでサブスクリプションを選択します。[ URLの入力]テキストボックスに、ストレージアカウントの名前を入力します（例： <yourname> gallery 、ここで<yourname>は一意の名前）。 Windows Azureはこの値を使用して、ストレージアカウントサービスのエントリポイントURLを作成します。 [ 作成 ]を選択するか、アフィニティグループを選択して、ドロップダウンリストで[ 新しいアフィニティグループの作成 ]をクリックします 。 [ 新しいアフィニティグループの作成 ]ダイアログボックスで、[ アフィニティグループ名]テキストボックスにアフィニティグループ名を入力し、ドロップダウンリストで[ 場所]を選択して[ OK ]をクリックします。 [ 新しいストレージアカウントの作成]ダイアログボックスに戻り、[ 作成 ]をクリックして新しいストレージアカウントを作成します。



アカウントを初期化し、「ツリー」 ストレージアカウントを更新するプロセスまで待ちます 。 [プロパティ]プロパティバーには、ボールトアカウントの各サービスに関連付けられたURLが表示されることに注意してください。 ボールトアカウントのパブリック名を記録します—エントリポイントのURLの最初のセグメント。 [プロパティ]プロパティバーのプライマリアクセスキーの横にある[表示 ]ボタンをクリックします。 [ストレージアクセスキーの表示]ダイアログボックスで、[ クリップボードにコピー （ プライマリアクセスキーの横）]をクリックします。 コピーされた値は、アプリケーションを構成するために必要になります。



アプリケーションのコードを実行するコンピューティングサービスを作成します。左ペインで、[ ホストされたサービス ]をクリックし、メニューにある[ 新しいホストされたサービス ]ボタンをクリックします。 [ 新しいホステッドサービスの作成 ]ダイアログボックスで、[サブスクリプションの選択]ドロップダウンリストからサブスクリプションを選択します。 [サービスの名前を入力してください]テキストボックスにサービス名を入力し 、適切な値を入力してURLを指定します。たとえば、 <yourname> galleryなど、 サービスのURLプレフィックスを入力します 。 Windows Azureはこの値を使用して、サービスエントリポイントのURLを作成します。 [ アフィニティグループの作成または選択]ドロップダウンリストで、ボールトアカウント用に以前に作成したアフィニティグループを選択します。 [ 展開しない]を指定し、 [ OK]をクリックしてサービスを作成し、初期化プロセスが完了するまで待ちます[ サービスバス、アクセス制御とキャッシュ ]タブに移動します。 [ サービスバス ]タブに移動します。 新規をクリックします。 開いた[ 新しいサービスネーム スペースの作成 ]ダイアログボックスで、ネームスペースの 名前 （ mytestservicebusなど）を入力し、場所の領域を選択して、[ ネームスペースの 作成 ]をクリックします。 。 作成されたネームスペースを選択し、[ デフォルトキー]フィールドの[ プロパティ ]パネルの[表示 ]ボタンをクリックします。 [ デフォルトキー ]ダイアログボックスからデフォルトの発行者とデフォルトキーの値をコピーします。



展開およびストレージサービスが構成されます。 Service Bus名前空間が作成されました。

ASP.NET MVC 4アプリケーションを構成する

管理者権限でVisual Studio 2012を開きます。



新規プロジェクトをクリックします。 Web \ ASP.NET MVC 4 Webアプリケーションテンプレートを選択します （図1）。 プロジェクトにMVC4Galleryという名前を付けます。 [ インターネットアプリケーション]を選択し、[ 単体テストプロジェクトの作成 ]オプションをオフにします。 OKをクリックします。 プロジェクトが作成されるのを待ちます。







図 1. Visual Studio 2012のWebプロジェクトテンプレートのリスト



Modelsディレクトリを右クリックします。 [ 追加] => [クラス]をクリックします。 開いたダイアログボックスで、 Imageと入力します。 csをクリックして[ OK ]をクリックします。 画像ファイルの内容を置き換えます。 以下のコードへのCS 。

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; } }}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ファイルViews \ Home \ Indexを開きます。 cshtmlを開き 、その内容を以下のコードに置き換えます。

 <header> <div class="content-wrapper"> <div class="float-left"> <p class="site-title">   - </div> </div> </header> <div id="body"> <section class="featured"> <div class="content-wrapper"> <form action="/Home/Upload" method="post" enctype="multipart/form-data"> <label for="title"> <label for="FileData"> </label> <input type="file" id="FileData" name="FileData" /><br /> <input type="submit" value="" /> </form>    "": @foreach (var image in ViewData.Model) { @image.Title <br /> <img width="100" height="100" src="@image.Link" /><br /> } </div> </section> </div>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Controllers \ HomeControllerファイルを開きます。 csを実行し、その内容を次のコードに置き換えます。 必要な依存関係とライブラリは次の段落で追加されます。

 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<Image> 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<Image> getBlobs(string author){ CloudBlobContainer container = getBlobContainer(author); List<Image> images = new List<Image>(); 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); }}}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Referencesディレクトリを右クリックします。 [ 参照の追加]を選択します。 開いたダイアログボックス（図3）で、次のアセンブリを選択します。



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





図 3.プロジェクトのアセンブリの選択。



グローバルファイルを開きます。 asaxを実行し 、以下のコードをApplication _ St​​art（）メソッドに追加します。

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

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

プロジェクトを右クリックします。 [ Windows Azureクラウドサービスプロジェクトの追加]を選択します （図4）。





図 4.クラウドプロジェクトをソリューションに追加する



作成されたMVC 4ギャラリープロジェクトの[ ロール ]を右クリックします。 紺Azure 追加を選択します。 [ 新しいワーカーロールプロジェクト]をクリックします（図5）。





図 5. Workerロールのプロジェクトをソリューションに追加する



Windows Azure Tools 1.7では、 Service Busを使用するように既に構成されている新しいWorkerロールテンプレートが既に追加されています。 [ 新しいロールプロジェクトの追加]ウィンドウで、[ サービスバスキューを持つワーカーロール ] を選択して[ 追加 ] をクリックします（図6）。





図 6. Service Busキューを使用するように構成されたワーカーロールプロジェクトの追加



WorkerRole.csファイルを開き、その内容を以下のコードに置き換えます。

 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<string>()); 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; }}}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

WebRole.csファイルをMVC4Galleryプロジェクトに追加し、そのコンテンツを以下のコードで置き換えます。

 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; }}}}
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

RolesクラウドプロジェクトのMVC 4ギャラリーでマウスの右ボタンをダブルクリックして、Webロールを管理するためのGUIを開きます（図7）。





図 7. Webロール管理のグラフィカルインターフェイス



[ 構成 ]タブで、[ 診断を有効にする ]オプションをオフにします。 [設定 ]タブに移動し、 [設定の 追加 ]をクリックして、 storageaccountという新しい構成設定を作成します。 そのタイプを接続文字列として指定し、省略記号ボタンをクリックして接続文字列を設定します。 必要なデータはパート1で記録されました。 [ 設定の追加]をクリックし、 Microsoft.ServiceBus.ConnectionStringという名前（タイプはString）を入力し、[ 値]フィールドに次の行を挿入します。



エンドポイント= sb：// [名前空間] .servicebus.windows.net; SharedSecretIssuer = owner; SharedSecretValue = [DefaultKey]



Endpoint部分の名前空間名、 SharedSecretIssuerの デフォルト発行者 、およびSharedSecretValueの デフォルトキーはどこにありますか。 OKをクリックします。 RolesクラウドプロジェクトでWorkerRoleWithSBQueue 1を2回右クリックして、Workerロールを管理するためのGUIを開きます。



[ 構成 ]タブで、[ 診断を有効にする ]オプションをオフにします。 [設定 ]タブに移動し、 [設定の 追加 ]をクリックして、 storageaccountという新しい構成設定を作成します。 そのタイプを接続文字列として指定し、省略記号ボタンをクリックして接続文字列を設定します。 必要なデータはパート1で記録されました。 [ OK]をクリックします。 接続文字列に必要な値を貼り付けて、 Microsoft.ServiceBus.ConnectionStringを構成します。 必要なデータはパート1に記録されました- エンドポイントパートのネームスペース名、 SharedSecretIssuerの デフォルト発行者 、およびSharedSecretValueの デフォルトキー 。 変更を保存して、Workerロール管理のグラフィカルインターフェイスを閉じます。



F5キーを押してプロジェクトを開始します。 プロジェクトはローカルコンピューティングエミュレータで開始され、 ホーム/インデックスビューでブラウザが起動します。



画像を選択して[ 保存 ]をクリックします 。 画像を読み込んだ後、ページが更新されます。 現時点では、アップロードした画像は1つしか表示されていないことに注意してください。 しばらくして（わずか数秒）ページを更新します-今度は、イメージプロセッサがキューをポーリングし、Webロールからメッセージを受信し、ブロブをダウンロードし、そのコピーを作成して、新しいブロブをリポジトリに配置する必要があります。

Visual Studio 2012からクラウドサービスのWindows AzureプラットフォームにASP.NET MVC 4アプリケーションを展開する

Windows Azureプラットフォームのクラウドサービスにアプリケーションをデプロイするには、それに応じてVisual Studio 2012の発行機能を構成する必要があります。



MVC 4 Galleryクラウドプロジェクトを右クリックします。 紺Azure [ 発行]をクリックします。 開いたダイアログボックスで、[ サブスクリプションの選択 ]の下のリストを展開し、[ <管理...>]を選択します（図12）。





図 12。



表示されるWindows Azureクラウドサービスのプロジェクト管理ダイアログボックスで、[ 新規 ]をクリックします。 アプリケーションのデプロイに使用される新しい証明書の適切な名前を入力します。 [ OK]をクリックします。 [ フルパスのコピー]リンクをクリックします。 Windows Azure管理ポータルに移動します。 [ ホステッドサービス、ストレージアカウント、CDN ]タブをクリックします。 。 [ 管理証明書 ]タブをクリックします。 。 [ 管理証明書 ]タブで、[ 証明書の追加 ]をクリックします。 開いた[ 新しい管理証明書の追加 ]ダイアログボックスで、[ 参照 ]をクリックし、Visual Studioからコピーした証明書パスを[ファイル名]フィールドに貼り付けます。 開くをクリックします。 OKをクリックします。 [ ホステッドサービス ]タブに移動し、[ プロパティ ]パネルからサブスクリプションIDをコピーします 。 Visual Studio 2012に移動します。コピーしたサブスクリプション識別子を対応するフィールドに貼り付けます（図13）。 OKをクリックします。





図 13。



閉じるをクリックします 。 次へをクリックします。 [Windows Azureの公開設定]ページで、追加の展開オプションを構成できます。 [ 公開]をクリックします。 Windows Azureアクティビティログビューで展開プロセスを確認できます（図14）。





図 14. Windows Azureアクティビティログの表示



[ ホストされたサービス ]タブのWindows Azure管理ポータルに移動します。 デプロイされたアプリケーションを選択し、[ プロパティ ]パネルの[ DNS名]フィールドのリンクをクリックして、Webサイトに移動します（図15）。



図 15. Windows Azure管理ポータル



サイトは、ローカルコンピューティングエミュレーターに展開した後と同じように見えることに注意してください。 これは、どちらの場合もWindows Azureの実際のストレージが使用されるためです。 新しい画像を追加して、結果を観察します。