Azure Cloud Services と ASP.NET を使ってみるGet started with Azure Cloud Services and ASP.NET

概要Overview

このチュートリアルでは、ASP.NET MVC フロントエンドを使用する多層 .NET アプリケーションを作成して Azure クラウド サービスにデプロイする方法について説明します。This tutorial shows how to create a multi-tier .NET application with an ASP.NET MVC front-end, and deploy it to an Azure cloud service. このアプリケーションでは、Azure SQL DatabaseAzure Blob service、および Azure Queue サービスを使用します。The application uses Azure SQL Database, the Azure Blob service, and the Azure Queue service. MSDN コード ギャラリーから、対象の Visual Studio プロジェクトをダウンロード できます。You can download the Visual Studio project from the MSDN Code Gallery.

このチュートリアルでは、アプリケーションを作成してローカルで実行する方法、アプリケーションを Azure にデプロイしてクラウドで実行する方法、アプリケーションを最初から作成する方法について説明します。The tutorial shows you how to build and run the application locally, how to deploy it to Azure and run in the cloud, and how to build it from scratch. アプリケーションを最初から作成する手順から始め、必要に応じて後でアプリケーションのテストとデプロイ手順に進んでください。You can start by building from scratch and then do the test and deploy steps afterward if you prefer.

Contoso Ads アプリケーションContoso Ads application

このアプリケーションは、広告の掲示板です。The application is an advertising bulletin board. ユーザーは、テキストを入力し、画像をアップロードして広告を作成します。Users create an ad by entering text and uploading an image. 広告の一覧にはサムネイル画像が表示されます。広告を選択すると、フルサイズ画像と詳細が表示されます。They can see a list of ads with thumbnail images, and they can see the full-size image when they select an ad to see the details.

Ad list

アプリケーションでは、 キューを中心とした作業パターン を使用して、CPU 負荷の高い縮小表示の作成をバックエンド プロセスにオフロードします。The application uses the queue-centric work pattern to off-load the CPU-intensive work of creating thumbnails to a back-end process.

代替アーキテクチャ:App Service と WebJobsAlternative architecture: App Service and WebJobs

このチュートリアルでは、Azure クラウド サービスでフロントエンドとバックエンドの両方を実行する方法について説明します。This tutorial shows how to run both front-end and back-end in an Azure cloud service. これに代わる方法として、フロントエンドを Azure Web Apps で実行し、バックエンド用に WebJobs 機能を使用する方法があります。An alternative is to run the front-end in Azure App Service and use the WebJobs feature for the back-end. Web ジョブを使用するチュートリアルについては、「 Get Started with the Azure WebJobs SDK (Azure Web ジョブ SDK の概要)」を参照してください。For a tutorial that uses WebJobs, see Get Started with the Azure WebJobs SDK. ご自身のシナリオに最適なサービスを選択する方法の詳細については、「Azure App Service、Cloud Services、および Virtual Machines の比較」を参照してください。For information about how to choose the services that best fit your scenario, see Azure App Service, Cloud Services, and virtual machines comparison.

学習内容What you'll learn

  • Azure SDK をインストールして、Azure 向け開発用にコンピューターを準備する方法How to enable your machine for Azure development by installing the Azure SDK.
  • ASP.NET MVC の Web ロールと worker ロールを使用して、Visual Studio クラウド サービス プロジェクトを作成する方法How to create a Visual Studio cloud service project with an ASP.NET MVC web role and a worker role.
  • Azure ストレージ エミュレーターを使用してクラウド サービス プロジェクトをローカルでテストする方法How to test the cloud service project locally, using the Azure storage emulator.
  • Azure ストレージ アカウントを使用してクラウド プロジェクトを Azure クラウド サービスに発行し、テストする方法How to publish the cloud project to an Azure cloud service and test using an Azure storage account.
  • ファイルを Azure Blob service にアップロードして保存する方法How to upload files and store them in the Azure Blob service.
  • Azure Queue サービスを使用して階層間の通信を行う方法How to use the Azure Queue service for communication between tiers.

前提条件Prerequisites

このチュートリアルは、Web ロールworker ロールなどの用語を含む Azure Cloud Services の基本概念を理解している方を対象にしています。The tutorial assumes that you understand basic concepts about Azure cloud services such as web role and worker role terminology. また、Visual Studio で ASP.NET MVC または Web フォーム プロジェクトを操作する方法を理解していることも前提としています。It also assumes that you know how to work with ASP.NET MVC or Web Forms projects in Visual Studio. サンプル アプリケーションでは MVC を使用しますが、チュートリアルのほとんどは Web フォームにも当てはまります。The sample application uses MVC, but most of the tutorial also applies to Web Forms.

Azure サブスクリプションがなくてもアプリケーションをローカルに実行できますが、アプリケーションをクラウドにデプロイするには Azure サブスクリプションが必要になります。You can run the app locally without an Azure subscription, but you'll need one to deploy the application to the cloud. アカウントを持っていない場合は、MSDN サブスクライバーの特典を有効にするか、無料試用版にサインアップしてください。If you don't have an account, you can activate your MSDN subscriber benefits or sign up for a free trial.

このチュートリアルの手順は、次のどの製品でも使用できます。The tutorial instructions work with any of the following products:

  • Visual Studio 2013Visual Studio 2013
  • Visual Studio 2015Visual Studio 2015
  • Visual Studio 2017Visual Studio 2017
  • Visual Studio 2019Visual Studio 2019

これらの製品をお持ちでない場合は、Azure SDK をインストールすると Visual Studio が自動的にインストールされます。If you don't have one of these, Visual Studio may be installed automatically when you install the Azure SDK.

アプリケーションのアーキテクチャApplication architecture

このアプリでは、広告を SQL データベースに格納します。その際、テーブルを作成してデータにアクセスするために Entity Framework Code First を使用します。The app stores ads in a SQL database, using Entity Framework Code First to create the tables and access the data. それぞれの広告に対し、フルサイズ画像用とサムネイル用の 2 つの URL がデータベースに格納されます。For each ad, the database stores two URLs, one for the full-size image and one for the thumbnail.

広告表

ユーザーが画像をアップロードすると、Web ロールで実行されているフロントエンドによってその画像が Azure BLOBに格納され、広告情報がその BLOB を示す URL と共にデータベースに格納されます。When a user uploads an image, the front-end running in a web role stores the image in an Azure blob, and it stores the ad information in the database with a URL that points to the blob. 同時に、メッセージが Azure キューに書き込まれます。At the same time, it writes a message to an Azure queue. worker ロールで実行されているバックエンド プロセスは、定期的にキューをポーリングして新しいメッセージの有無を確認します。A back-end process running in a worker role periodically polls the queue for new messages. 新しいメッセージが出現すると、worker ロールはその画像の縮小表示を作成し、その広告の縮小表示 URL データベース フィールドを更新します。When a new message appears, the worker role creates a thumbnail for that image and updates the thumbnail URL database field for that ad. 次の図に、アプリケーションの各パーツのやり取りを示します。The following diagram shows how the parts of the application interact.

Contoso Ads architecture

開発環境の設定Set up the development environment

最初に、Visual Studio と Azure SDK を使用した開発環境を設定します。To start, set up your development environment with Visual Studio and the Azure SDK.

  • Visual Studio 2019 には Azure SDK が含まれています。Visual Studio 2019 includes the Azure SDK. Visual Studio 2019 を使用している場合、開発環境を設定するための追加のセットアップは必要ありません。If you're using Visual Studio 2019, no additional setup is needed for the development environment.

  • Visual Studio 2015 の場合、次のリンクをクリックして Azure SDK for Visual Studio 2015 をインストールします。For Visual Studio 2015, click the following link to install the Azure SDK for Visual Studio 2015.

  • Visual Studio 2013 の場合、次のリンクをクリックして Azure SDK for Visual Studio 2013 をインストールします。For Visual Studio 2013, click the following link to install the Azure SDK for Visual Studio 2013.

  • Visual Studio をまだインストールしていない場合は、以下の手順に従って Visual Studio 2019 と Azure SDK をインストールしてください。If you don't have Visual Studio installed, use the following to install Visual Studio 2019 with the Azure SDK.

注意

マシンに既にある SDK の依存関係の数に応じて、SDK のインストールには長時間 (数分から 30 分以上) かかる場合があります。Depending on the number of the SDK dependencies already on your machine, installing the SDK could take a long time, from several minutes to a half hour or more.

完成したソリューションをダウンロードして実行するDownload and run the completed solution

  1. 完成したソリューションをダウンロードして解凍します。Download and unzip the completed solution.

  2. Visual Studio を起動します。Start Visual Studio.

  3. [ファイル] メニューの [プロジェクトを開く] を選択し、ソリューションをダウンロードした場所に移動して、ソリューション ファイルを開きます。From the File menu choose Open Project, navigate to where you downloaded the solution, and then open the solution file.

  4. Ctrl + Shift + B キーを押して、ソリューションをビルドします。Press CTRL+SHIFT+B to build the solution.

    既定では、 .zip ファイルに含まれていなかった NuGet パッケージのすべての内容が Visual Studio によって自動的に復元されます。By default, Visual Studio automatically restores the NuGet package content, which was not included in the .zip file. パッケージが復元されない場合は、 [ソリューションの NuGet パッケージの管理] ダイアログ ボックスの右上にある [復元] ボタンをクリックしてパッケージを手動でインストールします。If the packages don't restore, install them manually by going to the Manage NuGet Packages for Solution dialog box and clicking the Restore button at the top right.

  5. ソリューション エクスプローラーで、ContosoAdsCloudService がスタートアップ プロジェクトとして選択されていることを確認します。In Solution Explorer, make sure that ContosoAdsCloudService is selected as the startup project.

  6. Visual Studio 2015 以上を使用している場合は、ContosoAdsWeb プロジェクトのアプリケーションの Web.config ファイルと ContosoAdsCloudService プロジェクトの ServiceConfiguration.Local.cscfg ファイルで SQL Server 接続文字列を変更します。If you're using Visual Studio 2015 or higher, change the SQL Server connection string in the application Web.config file of the ContosoAdsWeb project and in the ServiceConfiguration.Local.cscfg file of the ContosoAdsCloudService project. いずれの場合も、"(localdb)\v11.0" を "(localdb)\MSSQLLocalDB" に変更します。In each case, change "(localdb)\v11.0" to "(localdb)\MSSQLLocalDB".

  7. Ctrl キーを押しながら F5 キーを押してアプリケーションを実行します。Press CTRL+F5 to run the application.

    クラウド サービス プロジェクトをローカルで実行すると、Visual Studio によって Azure "コンピューティング エミュレーター" と Azure "ストレージ エミュレーター" が自動的に起動されます。When you run a cloud service project locally, Visual Studio automatically invokes the Azure compute emulator and Azure storage emulator. コンピューティング エミュレーターは、コンピューターのリソースを使用して、Web ロール環境と worker ロール環境をシミュレートします。The compute emulator uses your computer's resources to simulate the web role and worker role environments. ストレージ エミュレーターは、 SQL Server Express LocalDB を使用して、Azure クラウド ストレージをシミュレートします。The storage emulator uses a SQL Server Express LocalDB database to simulate Azure cloud storage.

    クラウド サービス プロジェクトを初めて実行するときは、エミュレーターが起動されるまで 1 分程度かかります。The first time you run a cloud service project, it takes a minute or so for the emulators to start up. エミュレーターの起動が完了すると、既定のブラウザーが開き、アプリケーションのホーム ページが表示されます。When emulator startup is finished, the default browser opens to the application home page.

    Contoso Ads architecture

  8. [Create an Ad (広告を作成)] をクリックします。Click Create an Ad.

  9. 何らかのテスト データを入力し、アップロードする画像 ( .jpg ) を選択したら、 [Create] をクリックします。Enter some test data and select a .jpg image to upload, and then click Create.

    作成ページ

    [Index] ページが表示されますが、新しい広告の処理が完了していないため、縮小表示はまだ表示されません。The app goes to the Index page, but it doesn't show a thumbnail for the new ad because that processing hasn't happened yet.

  10. しばらく待ってから [Index] ページを更新すると、縮小表示が表示されます。Wait a moment and then refresh the Index page to see the thumbnail.

    Index ページ

  11. 広告に対応する [Details] をクリックすると、フルサイズの画像が表示されます。Click Details for your ad to see the full-size image.

    詳細ページ

これまで、クラウドへの接続なしで、アプリケーションを完全にローカル コンピューター上で実行してきました。You've been running the application entirely on your local computer, with no connection to the cloud. ストレージ エミュレーターは、キュー データと BLOB データを SQL Server Express LocalDB データベースに格納します。アプリケーションは、広告データを別の LocalDB データベースに格納します。The storage emulator stores the queue and blob data in a SQL Server Express LocalDB database, and the application stores the ad data in another LocalDB database. Web アプリが初めてアクセスしようとしたとき、広告データベースが Entity Framework Code First によって自動的に作成されました。Entity Framework Code First automatically created the ad database the first time the web app tried to access it.

次のセクションでは、クラウドで実行されたときにキュー、BLOB、およびアプリケーション データベース用に Azure クラウド リソースを使用するソリューションを構成します。In the following section you'll configure the solution to use Azure cloud resources for queues, blobs, and the application database when it runs in the cloud. 必要であれば、ローカルでの実行を継続しながらクラウド ストレージとデータベース リソースを使用することもできます。If you wanted to continue to run locally but use cloud storage and database resources, you could do that. 後で方法を説明しますが、これは接続文字列を設定するだけで済みます。It's just a matter of setting connection strings, which you'll see how to do.

Azure にアプリケーションを展開するDeploy the application to Azure

アプリケーションをクラウドで実行するには、次の手順を実行します。You'll do the following steps to run the application in the cloud:

  • Azure クラウド サービスを作成します。Create an Azure cloud service.
  • Azure SQL データベースを作成します。Create an Azure SQL database.
  • Azure ストレージ アカウントを作成します。Create an Azure storage account.
  • Azure で実行されたときに Azure SQL データベースを使用するためのソリューションを構成します。Configure the solution to use your Azure SQL database when it runs in Azure.
  • Azure で実行されたときに Azure ストレージ アカウントを使用するためのソリューションを構成します。Configure the solution to use your Azure storage account when it runs in Azure.
  • プロジェクトを Azure クラウド サービスにデプロイします。Deploy the project to your Azure cloud service.

Azure クラウド サービスの作成Create an Azure cloud service

Azure クラウド サービスは、アプリケーションの実行環境です。An Azure cloud service is the environment the application will run in.

  1. ブラウザーで、Azure Portal を開きます。In your browser, open the Azure portal.

  2. [リソースの作成]、[Compute]、[クラウド サービス] の順にクリックします。Click Create a resource > Compute > Cloud Service.

  3. [DNS 名] 入力ボックスに、クラウド サービスの URL プレフィックスを入力します。In the DNS name input box, enter a URL prefix for the cloud service.

    この URL は一意である必要があります。This URL has to be unique. 選択したプレフィックスが既に使用されている場合は、エラー メッセージが表示されます。You'll get an error message if the prefix you choose is already in use.

  4. 新しいリソース グループをサービスに指定します。Specify a new Resource group for the service. [新規作成] をクリックし、[リソース グループ] 入力ボックスに名前を入力します (例: CS_contososadsRG)。Click Create new and then type a name in the Resource group input box, such as CS_contososadsRG.

  5. アプリケーションをデプロイするリージョンを選択します。Choose the region where you want to deploy the application.

    このフィールドは、クラウド サービスがホストされるデータセンターを指定します。This field specifies which datacenter your cloud service will be hosted in. 運用アプリケーションの場合は、顧客に最も近いリージョンを選択してください。For a production application, you'd choose the region closest to your customers. このチュートリアルでは、自分に最も近いリージョンを選択してください。For this tutorial, choose the region closest to you.

  6. Create をクリックしてください。Click Create.

    次の画像では、クラウド サービスは CSvccontosoads.cloudapp.net という URL で作成されます。In the following image, a cloud service is created with the URL CSvccontosoads.cloudapp.net.

    新しいクラウド サービス

Azure SQL データベースの作成Create an Azure SQL database

アプリをクラウドで実行すると、クラウドベースのデータベースがアプリによって使用されます。When the app runs in the cloud, it will use a cloud-based database.

  1. Azure Portal で、 [リソースの作成]、[Databases]、[SQL Database] の順にクリックします。In the Azure portal, click Create a resource > Databases > SQL Database.

  2. [データベース名] ボックスに「 contosoads」と入力します。In the Database Name box, enter contosoads.

  3. [リソース グループ][既存のものを使用] をクリックし、クラウド サービスに使用しているリソース グループを選択します。In the Resource group, click Use existing and select the resource group used for the cloud service.

  4. 次の図にある、 [サーバー] の [必要な設定の構成] をクリックし、 [新しいサーバーの作成] をクリックします。In the following image, click Server - Configure required settings and Create a new server.

    データベース サーバーへのトンネル

    または、サブスクリプションに既にサーバーが設定されている場合は、ドロップダウン リストからそのサーバーを選択します。Alternatively, if your subscription already has a server, you can select that server from the drop-down list.

  5. [サーバー名] ボックスに「csvccontosodbserver」と入力します。In the Server name box, enter csvccontosodbserver.

  6. 管理者のログイン名パスワードを入力します。Enter an administrator Login Name and Password.

    [新しいサーバーの作成] を選択した場合、ここで既存の名前とパスワードを入力することはしません。If you selected Create a new server, you aren't entering an existing name and password here. 後でデータベースへのアクセス時に使用する、現在定義中の新しい名前とパスワードを入力します。You're entering a new name and password that you're defining now to use later when you access the database. 以前に作成したサーバーを選択した場合は、既に作成されている管理ユーザー アカウントのパスワードを入力します。If you selected a server that you created previously, you'll be prompted for the password to the administrative user account you already created.

  7. [場所] で、クラウド サービスに選択したのと同じ場所を選択します。Choose the same Location that you chose for the cloud service.

    クラウド サービスとデータベースが異なるデータ センター (異なるリージョン) にあると、遅延時間が長くなり、データ センター外の帯域幅に対して課金されることになります。When the cloud service and database are in different datacenters (different regions), latency will increase and you will be charged for bandwidth outside the data center. データ センター内の帯域幅は無料です。Bandwidth within a data center is free.

  8. [Azure サービスにサーバーへのアクセスを許可する] チェック ボックスをオンにします。Check Allow azure services to access server.

  9. 新しいサーバーについて [選択] をクリックします。Click Select for the new server.

    新しい SQL Database サーバー

  10. Create をクリックしてください。Click Create.

Azure のストレージ アカウントの作成Create an Azure storage account

Azure ストレージ アカウントは、キューおよび BLOB データをクラウドに格納するためのリソースを提供します。An Azure storage account provides resources for storing queue and blob data in the cloud.

現実のアプリケーションでは、通常、アプリケーション データとログ データ、テスト データと運用データに別個のアカウントを作成します。In a real-world application, you would typically create separate accounts for application data versus logging data, and separate accounts for test data versus production data. このチュートリアルでは、アカウントを 1 つだけ使用します。For this tutorial, you'll use just one account.

  1. Azure Portal で、 [リソースの作成]、[Storage]、[ストレージ アカウント - Blob、File、Table、Queue] の順にクリックします。In the Azure portal, click Create a resource > Storage > Storage account - blob, file, table, queue.

  2. [名前] ボックスに、URL プレフィックスを入力します。In the Name box, enter a URL prefix.

    このプレフィックスに、このボックスの下に表示されているテキストを連結したものが、ストレージ アカウントに固有の URL になります。This prefix plus the text you see under the box will be the unique URL to your storage account. 入力したプレフィックスが既に他のユーザーによって使用されている場合は、別のプレフィックスを選択する必要があります。If the prefix you enter has already been used by someone else, you'll have to choose a different prefix.

  3. [デプロイ モデル][クラシック] に設定します。Set the Deployment model to Classic.

  4. [レプリケーション] ボックスの一覧で、 [ローカル冗長ストレージ (LRS)] を選択します。Set the Replication drop-down list to Locally redundant storage.

    geo レプリケーションをストレージ アカウントに対して有効にすると、格納されたコンテンツがセカンダリ データセンターにレプリケートされ、プライマリ ロケーションで重大な障害が発生した場合のフェールオーバーが有効になります。When geo-replication is enabled for a storage account, the stored content is replicated to a secondary datacenter to enable failover if a major disaster occurs in the primary location. Geo レプリケーションには追加費用が発生する場合があります。Geo-replication can incur additional costs. また、テストおよび開発アカウントの場合は、一般的に Geo レプリケーションに対する課金は避けたいと考えるでしょう。For test and development accounts, you generally don't want to pay for geo-replication. 詳細については、「 ストレージ アカウントの作成、管理、削除」を参照してください。For more information, see Create, manage, or delete a storage account.

  5. [リソース グループ][既存のものを使用] をクリックし、クラウド サービスに使用しているリソース グループを選択します。In the Resource group, click Use existing and select the resource group used for the cloud service.

  6. [場所] ボックスの一覧で、クラウド サービスに選択したのと同じリージョンを選択します。Set the Location drop-down list to the same region you chose for the cloud service.

    クラウド サービスとストレージ アカウントが異なるデータ センター (異なるリージョン) にあると、遅延時間が長くなり、データ センター外の帯域幅に対して課金されることになります。When the cloud service and storage account are in different datacenters (different regions), latency will increase and you will be charged for bandwidth outside the data center. データ センター内の帯域幅は無料です。Bandwidth within a data center is free.

    Azure アフィニティ グループには、データ センター内のリソース間の距離を最短にする機能が備わっており、それにより遅延時間を短縮できます。Azure affinity groups provide a mechanism to minimize the distance between resources in a data center, which can reduce latency. このチュートリアルでは、アフィニティ グループを使用しません。This tutorial does not use affinity groups. 詳細については、 Azure でアフィニティ グループを作成する方法に関するページを参照してください。For more information, see How to Create an Affinity Group in Azure.

  7. Create をクリックしてください。Click Create.

    新しいストレージ アカウント

    次の画像では、ストレージ アカウントは csvccontosoads.core.windows.netという URL で作成されます。In the image, a storage account is created with the URL csvccontosoads.core.windows.net.

Azure で実行されたときに Azure SQL データベースを使用するためのソリューションの設定Configure the solution to use your Azure SQL database when it runs in Azure

Web プロジェクトと worker ロール プロジェクトはそれぞれ独自のデータベース接続文字列を持ち、アプリが Azure で実行されたときにそれぞれが Azure SQL データベースを指し示す必要があります。The web project and the worker role project each has its own database connection string, and each needs to point to the Azure SQL database when the app runs in Azure.

Web ロールと worker ロールのクラウド サービス環境設定には、 Web.config の変換 を使用します。You'll use a Web.config transform for the web role and a cloud service environment setting for the worker role.

注意

このセクションと次のセクションでは、資格情報をプロジェクト ファイルに格納します。In this section and the next section, you store credentials in project files. 機密データは、パブリックなソース コード リポジトリに格納しないでくださいDon't store sensitive data in public source code repositories.

  1. ContosoAdsWeb プロジェクトで、アプリケーションの Web.config ファイルの Web.Release.config 変換ファイルを開き、<connectionStrings> 要素が含まれているコメント ブロックを削除した後、次のコードをその場所に貼り付けます。In the ContosoAdsWeb project, open the Web.Release.config transform file for the application Web.config file, delete the comment block that contains a <connectionStrings> element, and paste the following code in its place.

    <connectionStrings>
        <add name="ContosoAdsContext" connectionString="{connectionstring}"
        providerName="System.Data.SqlClient" xdt:Transform="SetAttributes" xdt:Locator="Match(name)"/>
    </connectionStrings>
    

    ファイルは編集できるように開いたままにしておきます。Leave the file open for editing.

  2. Azure Portal で、左側のウィンドウの [SQL データベース] をクリックし、このチュートリアル用に作成したデータベースをクリックしてから、 [接続文字列の表示] をクリックします。In the Azure portal, click SQL Databases in the left pane, click the database you created for this tutorial, and then click Show connection strings.

    接続文字列の表示

    接続文字列と、パスワードのプレースホルダーがポータルに表示されます。The portal displays connection strings, with a placeholder for the password.

    Connection strings

  3. Web.Release.config 変換ファイルで {connectionstring} を削除し、Azure Portal からコピーした ADO.NET 接続文字列をその場所に貼り付けます。In the Web.Release.config transform file, delete {connectionstring} and paste in its place the ADO.NET connection string from the Azure portal.

  4. Web.Release.config 変換ファイルに貼り付けた接続文字列内の {your_password_here} を、新しい SQL データベース用に作成したパスワードで置き換えます。In the connection string that you pasted into the Web.Release.config transform file, replace {your_password_here} with the password you created for the new SQL database.

  5. ファイルを保存します。Save the file.

  6. 以降の worker ロール プロジェクトを構成するための手順で使用する接続文字列を選択してコピーします (引用符は除きます)。Select and copy the connection string (without the surrounding quotation marks) for use in the following steps for configuring the worker role project.

  7. ソリューション エクスプローラーで、該当するクラウド サービス プロジェクトの [ロール] の下の [ContosoAdsWorker] を右クリックし、 [プロパティ] をクリックします。In Solution Explorer, under Roles in the cloud service project, right-click ContosoAdsWorker and then click Properties.

    ロール プロパティ

  8. [設定] タブをクリックします。Click the Settings tab.

  9. [サービス構成][クラウド] に変更します。Change Service Configuration to Cloud.

  10. ContosoAdsDbConnectionString 設定の [値] フィールドを選択し、このチュートリアルの前のセクションでコピーした接続文字列を貼り付けます。Select the Value field for the ContosoAdsDbConnectionString setting, and then paste the connection string that you copied from the previous section of the tutorial.

    Database connection string for worker role

  11. 変更を保存します。Save your changes.

Azure で実行されたときに Azure ストレージ アカウントを使用するためのソリューションの設定Configure the solution to use your Azure storage account when it runs in Azure

Web ロール プロジェクトと worker ロール プロジェクトの Azure ストレージ アカウント接続文字列は、クラウド サービス プロジェクトの環境設定に保存されます。Azure storage account connection strings for both the web role project and the worker role project are stored in environment settings in the cloud service project. それぞれのプロジェクトには、アプリケーションがローカルに実行されたときに使用される設定とクラウドで実行されたときに使用される設定が別々にあります。For each project, there is a separate set of settings to be used when the application runs locally and when it runs in the cloud. ここでは、Web ロール プロジェクトと worker ロール プロジェクトの両方のクラウド環境設定を更新します。You'll update the cloud environment settings for both web and worker role projects.

  1. ソリューション エクスプローラーで、 [ContosoAdsCloudService] プロジェクトの [ロール] の下にある [ContosoAdsWeb] を右クリックし、 [プロパティ] をクリックします。In Solution Explorer, right-click ContosoAdsWeb under Roles in the ContosoAdsCloudService project, and then click Properties.

    ロール プロパティ

  2. [設定] タブをクリックします。 [サービス構成] ボックスの一覧の [クラウド] を選択します。Click the Settings tab. In the Service Configuration drop-down box, choose Cloud.

    クラウドの構成

  3. StorageConnectionString エントリを選択すると、行の右端に省略記号 [...] ボタンが表示されます。Select the StorageConnectionString entry, and you'll see an ellipsis (...) button at the right end of the line. 省略記号ボタンをクリックして、 [ストレージ アカウント接続文字列の作成] ダイアログ ボックスを開きます。Click the ellipsis button to open the Create Storage Account Connection String dialog box.

    [接続文字列の作成] ボックスを開く

  4. [ストレージ接続文字列の作成] ダイアログ ボックスで、 [サブスクリプション] オプションをクリックします。前に作成したストレージ アカウントを選択し、 [OK] をクリックします。In the Create Storage Connection String dialog box, click Your subscription, choose the storage account that you created earlier, and then click OK. まだログインしていない場合は、Azure アカウントの資格情報を入力するよう求められます。If you're not already logged in, you'll be prompted for your Azure account credentials.

    ストレージ接続文字列の作成

  5. 変更を保存します。Save your changes.

  6. StorageConnectionString 接続文字列の場合と同じ手順を使用して、Microsoft.WindowsAzure.Plugins.Diagnostics.ConnectionString 接続文字列を設定します。Follow the same procedure that you used for the StorageConnectionString connection string to set the Microsoft.WindowsAzure.Plugins.Diagnostics.ConnectionString connection string.

    この接続文字列は、ログに使用されます。This connection string is used for logging.

  7. ContosoAdsWeb ロールの場合と同じ手順に従って、ContosoAdsWorker ロールの両方の接続文字列を設定します。Follow the same procedure that you used for the ContosoAdsWeb role to set both connection strings for the ContosoAdsWorker role. このとき、 [サービス構成][クラウド] に設定するのを忘れないでください。Don't forget to set Service Configuration to Cloud.

Visual Studio UI を使用して構成したロールの環境設定は、ContosoAdsCloudService プロジェクトの次のファイルに格納されます。The role environment settings that you have configured using the Visual Studio UI are stored in the following files in the ContosoAdsCloudService project:

  • ServiceDefinition.csdef - 設定名を定義します。ServiceDefinition.csdef - Defines the setting names.
  • ServiceConfiguration.Cloud.cscfg - アプリがクラウドで実行されるときに値を提供します。ServiceConfiguration.Cloud.cscfg - Provides values for when the app runs in the cloud.
  • ServiceConfiguration.Local.cscfg - アプリがローカルで実行されるときに値を提供します。ServiceConfiguration.Local.cscfg - Provides values for when the app runs locally.

たとえば、ServiceDefinition.csdef には、次の定義が含まれます。For example, the ServiceDefinition.csdef includes the following definitions:

<ConfigurationSettings>
    <Setting name="StorageConnectionString" />
    <Setting name="ContosoAdsDbConnectionString" />
</ConfigurationSettings>

ServiceConfiguration.Cloud.cscfg ファイルには、Visual Studio でこれらの設定に入力した値が含まれます。And the ServiceConfiguration.Cloud.cscfg file includes the values you entered for those settings in Visual Studio.

<Role name="ContosoAdsWorker">
    <Instances count="1" />
    <ConfigurationSettings>
        <Setting name="StorageConnectionString" value="{yourconnectionstring}" />
        <Setting name="ContosoAdsDbConnectionString" value="{yourconnectionstring}" />
        <!-- other settings not shown -->

    </ConfigurationSettings>
    <!-- other settings not shown -->

</Role>

<Instances> 設定は、Azure で worker ロール コードが実行される仮想マシンの数を指定します。The <Instances> setting specifies the number of virtual machines that Azure will run the worker role code on. 次のステップ 」セクションに、クラウド サービスのスケールアウトに関する情報へのリンクが含まれています。The Next steps section includes links to more information about scaling out a cloud service,

Azure にプロジェクトをデプロイするDeploy the project to Azure

  1. ソリューション エクスプローラーで、 [ContosoAdsCloudService] クラウド プロジェクトを右クリックし、 [発行] をクリックします。In Solution Explorer, right-click the ContosoAdsCloudService cloud project and then select Publish.

    [発行] メニュー

  2. Azure アプリケーションの発行ウィザードの [サインイン] 手順で、 [次へ] をクリックします。In the Sign in step of the Publish Azure Application wizard, click Next.

    [サインイン] 手順

  3. ウィザードの [設定] 手順で、 [次へ] をクリックします。In the Settings step of the wizard, click Next.

    [設定] 手順

    [詳細設定] タブの既定の設定はこのチュートリアルではそのまま使用します。The default settings in the Advanced tab are fine for this tutorial. [詳細設定] タブの詳細については、「 Microsoft Azure アプリケーションの発行ウィザード」を参照してください。For information about the advanced tab, see Publish Azure Application Wizard.

  4. [概要] 手順で、 [発行] をクリックします。In the Summary step, click Publish.

    [概要] 手順

    [Azure のアクティビティ ログ] ウィンドウが Visual Studio で開きます。The Azure Activity Log window opens in Visual Studio.

  5. 右矢印のアイコンをクリックしてデプロイの詳細を展開します。Click the right arrow icon to expand the deployment details.

    デプロイが完了するまで 5 分程度かかる場合があります。The deployment can take up to 5 minutes or more to complete.

    [Azure のアクティビティ ログ] ウィンドウ

  6. デプロイが完了したら、 Web アプリの URL をクリックしてアプリケーションを起動します。When the deployment status is complete, click the Web app URL to start the application.

  7. この段階で、アプリケーションをローカルで実行したときと同様に、広告を作成、表示、編集して、アプリをテストできます。You can now test the app by creating, viewing, and editing some ads, as you did when you ran the application locally.

注意

テストが終了したら、クラウド サービスを削除または停止します。When you're finished testing, delete or stop the cloud service. クラウド サービスを使用していない場合でも仮想マシンのリソースが予約されるため、課金が発生します。Even if you're not using the cloud service, it's accruing charges because virtual machine resources are reserved for it. またクラウド サービスを実行したままにしておくと、その URL を見つけた他のユーザーが広告を作成したり表示したりする可能性があります。And if you leave it running, anyone who finds your URL can create and view ads. Azure Portal で、クラウド サービスの [概要] タブに移動し、ページの上部にある [削除] ボタンをクリックします。In the Azure portal, go to the Overview tab for your cloud service, and then click the Delete button at the top of the page. 一時的に他のユーザーがこのサイトにアクセスできないようにするには、代わりに [停止] をクリックします。If you just want to temporarily prevent others from accessing the site, click Stop instead. この場合は、課金が継続されます。In that case, charges will continue to accrue. 同様の手順で、不要になった SQL データベースとストレージ アカウントを削除できます。You can follow a similar procedure to delete the SQL database and storage account when you no longer need them.

アプリケーションを最初から作成するCreate the application from scratch

完成版のアプリケーションをまだダウンロードしていない場合は今すぐダウンロードしてください。If you haven't already downloaded the completed application, do that now. 以降の操作では、ダウンロードしたプロジェクトから新しいプロジェクトにファイルをコピーします。You'll copy files from the downloaded project into the new project.

Contoso Ads アプリケーションを作成するには、次の手順を実行します。Creating the Contoso Ads application involves the following steps:

  • クラウド サービスの Visual Studio ソリューションを作成します。Create a cloud service Visual Studio solution.
  • NuGet パッケージを更新して追加します。Update and add NuGet packages.
  • プロジェクト参照を設定します。Set project references.
  • 接続文字列を構成します。Configure connection strings.
  • コード ファイルを追加します。Add code files.

ソリューションを作成したら、クラウド サービス プロジェクト、Azure BLOB、およびキューに一意のコードを見ていきます。After the solution is created, you'll review the code that is unique to cloud service projects and Azure blobs and queues.

クラウド サービス Visual Studio ソリューションの作成Create a cloud service Visual Studio solution

  1. Visual Studio で、 新しいプロジェクト from the [新しいプロジェクト] を選択します。In Visual Studio, choose New Project from the File menu.

  2. [新しいプロジェクト] ダイアログ ボックスの左側のウィンドウで、 [Visual C#] を展開し、 [クラウド] テンプレート、 [Azure クラウド サービス] テンプレートの順に選択します。In the left pane of the New Project dialog box, expand Visual C# and choose Cloud templates, and then choose the Azure Cloud Service template.

  3. プロジェクトおよびソリューションに ContosoAdsCloudService という名前を付けて [OK] をクリックします。Name the project and solution ContosoAdsCloudService, and then click OK.

    [新しいプロジェクト]

  4. [新しい Azure クラウド サービス] ダイアログ ボックスで、Web ロールと worker ロールを追加します。In the New Azure Cloud Service dialog box, add a web role and a worker role. Web ロールに ContosoAdsWeb という名前を付け、worker ロールに ContosoAdsWorker という名前を付けますName the web role ContosoAdsWeb, and name the worker role ContosoAdsWorker. (右側のウィンドウの鉛筆アイコンを使用して、ロールの既定の名前を変更します)。(Use the pencil icon in the right-hand pane to change the default names of the roles.)

    新しいクラウド サービス プロジェクト

  5. Web ロールの [新しい ASP.NET プロジェクト] ダイアログ ボックスで、MVC テンプレートを選択し、次に [認証の変更] をクリックします。When you see the New ASP.NET Project dialog box for the web role, choose the MVC template, and then click Change Authentication.

    [認証の変更]

  6. [認証の変更] ダイアログ ボックスで、 [認証なし] をクリックし、次に [OK] をクリックします。In the Change Authentication dialog box, choose No Authentication, and then click OK.

    [認証なし]

  7. [新しい ASP.NET プロジェクト] ダイアログで [OK] をクリックします。In the New ASP.NET Project dialog, click OK.

  8. ソリューション エクスプローラーで (プロジェクトのソリューション以外の) ソリューションを右クリックし、 [追加] > [新しいプロジェクト] の順に選択します。In Solution Explorer, right-click the solution (not one of the projects), and choose Add - New Project.

  9. [新しいプロジェクトの追加] ダイアログ ボックスで、左側のウィンドウの [Visual C#] の下の [Windows] を選択し、 [クラス ライブラリ] テンプレートをクリックします。In the Add New Project dialog box, choose Windows under Visual C# in the left pane, and then click the Class Library template.

  10. プロジェクトに ContosoAdsCommonという名前を付けて [OK] をクリックします。Name the project ContosoAdsCommon, and then click OK.

    Web ロール プロジェクトと worker ロール プロジェクトの両方から Entity Framework のコンテキストとデータ モデルを参照する必要があります。You need to reference the Entity Framework context and the data model from both web and worker role projects. 代わりの方法として、Entity Framework に関連するクラスを Web ロール プロジェクトで定義し、worker ロール プロジェクトからそのプロジェクトを参照することもできます。As an alternative, you could define the EF-related classes in the web role project and reference that project from the worker role project. ただしその代替方法では、worker ロール プロジェクトに、必要としない Web アセンブリへの参照が含まれることになります。But in the alternative approach, your worker role project would have a reference to web assemblies that it doesn't need.

NuGet パッケージの更新および追加Update and add NuGet packages

  1. ソリューションの [NuGet パッケージの管理] ダイアログ ボックスを開きます。Open the Manage NuGet Packages dialog box for the solution.

  2. ウィンドウの上部にある [更新プログラム] を選択します。At the top of the window, select Updates.

  3. WindowsAzure.Storage パッケージを探し、一覧にある場合はそれを選択します。さらに、更新する Web プロジェクトと worker プロジェクトを選択し、 [更新] をクリックします。Look for the WindowsAzure.Storage package, and if it's in the list, select it and select the web and worker projects to update it in, and then click Update.

    ストレージ クライアント ライブラリは Visual Studio プロジェクト テンプレートよりも頻繁に更新されるため、新しく作成したプロジェクトのバージョンの更新が必要になることがよくあります。The storage client library is updated more frequently than Visual Studio project templates, so you'll often find that the version in a newly-created project needs to be updated.

  4. ウィンドウの上部にある [参照] を選択します。At the top of the window, select Browse.

  5. EntityFramework NuGet パッケージを見つけて、3 つのプロジェクトすべてにインストールします。Find the EntityFramework NuGet package, and install it in all three projects.

  6. Microsoft.WindowsAzure.ConfigurationManager NuGet パッケージを見つけ、worker ロール プロジェクトにインストールします。Find the Microsoft.WindowsAzure.ConfigurationManager NuGet package, and install it in the worker role project.

プロジェクト参照の設定Set project references

  1. ContosoAdsWeb プロジェクトで、ContosoAdsCommon プロジェクトの参照を設定します。In the ContosoAdsWeb project, set a reference to the ContosoAdsCommon project. ContosoAdsWeb プロジェクトを右クリックし、 [参照] - [参照の追加] の順にクリックします。Right-click the ContosoAdsWeb project, and then click References - Add References. [参照マネージャー] ダイアログ ボックスで、左側のウィンドウの [ソリューション] > [プロジェクト] の順に選択し、 [ContosoAdsCommon] を選択して [OK] をクリックします。In the Reference Manager dialog box, select Solution – Projects in the left pane, select ContosoAdsCommon, and then click OK.

  2. ContosoAdsWorker プロジェクトで、ContosoAdsCommon プロジェクトの参照を設定します。In the ContosoAdsWorker project, set a reference to the ContosoAdsCommon project.

    ContosoAdsCommon は、Entity Framework データ モデルおよびコンテキスト クラスを含みます。これらは、フロントエンドとバックエンドの両方で使用されます。ContosoAdsCommon will contain the Entity Framework data model and context class, which will be used by both the front-end and back-end.

  3. ContosoAdsWorker プロジェクトで、System.Drawing プロジェクトの参照を設定します。In the ContosoAdsWorker project, set a reference to System.Drawing.

    このアセンブリは、画像を縮小表示に変換するためにバックエンドで使用されます。This assembly is used by the back-end to convert images to thumbnails.

接続文字列の構成Configure connection strings

このセクションでは、Azure Storage と SQL 接続文字列をローカルでのテスト用に構成します。In this section, you configure Azure Storage and SQL connection strings for testing locally. チュートリアルの前半で紹介したデプロイ手順では、アプリケーションをクラウドで実行する場合の接続文字列の設定方法について説明しました。The deployment instructions earlier in the tutorial explain how to set up the connection strings for when the app runs in the cloud.

  1. ContosoAdsWeb プロジェクトで、アプリケーションの Web.config ファイルを開き、connectionStrings 要素を configSections 要素の後に挿入します。In the ContosoAdsWeb project, open the application Web.config file, and insert the following connectionStrings element after the configSections element.

    <connectionStrings>
        <add name="ContosoAdsContext" connectionString="Data Source=(localdb)\v11.0; Initial Catalog=ContosoAds; Integrated Security=True; MultipleActiveResultSets=True;" providerName="System.Data.SqlClient" />
    </connectionStrings>
    

    Visual Studio 2015 以上を使用している場合は、"v11.0" を "MSSQLLocalDB" に置き換えます。If you're using Visual Studio 2015 or higher, replace "v11.0" with "MSSQLLocalDB".

  2. 変更を保存します。Save your changes.

  3. ContosoAdsCloudService プロジェクトで、 [ロール] の下の [ContosoAdsWeb] を右クリックし、 [プロパティ] をクリックします。In the ContosoAdsCloudService project, right-click ContosoAdsWeb under Roles, and then click Properties.

    ロール プロパティ

  4. [ContosoAdsWeb [ロール]] プロパティ ウィンドウで、 [設定] タブをクリックし、 [設定の追加] をクリックします。In the ContosoAdsWeb [Role] properties window, click the Settings tab, and then click Add Setting.

    [サービス構成][すべての構成] のままにしておきます。Leave Service Configuration set to All Configurations.

  5. StorageConnectionString という名前の設定を追加します。Add a setting named StorageConnectionString. [種類][接続文字列] に設定し、 [値]UseDevelopmentStorage=true に設定します。Set Type to ConnectionString, and set Value to UseDevelopmentStorage=true.

    新しい接続文字列

  6. 変更を保存します。Save your changes.

  7. 同じ手順を実行して、ストレージの接続文字列を ContosoAdsWorker ロール プロパティに追加します。Follow the same procedure to add a storage connection string in the ContosoAdsWorker role properties.

  8. [ContosoAdsWorker [Role]] プロパティ ウィンドウで、もう 1 つ接続文字列を追加します。Still in the ContosoAdsWorker [Role] properties window, add another connection string:

    • 名前:ContosoAdsDbConnectionStringName: ContosoAdsDbConnectionString

    • 型: stringType: String

    • 値:Web ロール プロジェクトに使用したのと同じ接続文字列を貼り付けますValue: Paste the same connection string you used for the web role project. (次の例は Visual Studio 2013 用です。(The following example is for Visual Studio 2013. Visual Studio 2015 以降を使用していて、この例をコピーする場合は、忘れずにデータ ソースを変更してください)。Don't forget to change the Data Source if you copy this example and you're using Visual Studio 2015 or higher.)

      Data Source=(localdb)\v11.0; Initial Catalog=ContosoAds; Integrated Security=True; MultipleActiveResultSets=True;
      

コード ファイルの追加Add code files

このセクションでは、ダウンロードしたソリューションから新しいソリューションにコード ファイルをコピーします。In this section, you copy code files from the downloaded solution into the new solution. 以降のセクションでは、このコードの重要な部分について説明します。The following sections will show and explain key parts of this code.

プロジェクトまたはフォルダーにファイルを追加するには、プロジェクトまたはフォルダーを右クリックし、 [追加] - [既存の項目] にデプロイする方法について説明します。To add files to a project or a folder, right-click the project or folder and click Add - Existing Item. 目的のファイルを選択してから [追加] をクリックします。Select the files you want and then click Add. 既存のファイルを置き換えるかどうかをたずねるメッセージが表示されたら、 [はい] をクリックします。If asked whether you want to replace existing files, click Yes.

  1. ContosoAdsCommon プロジェクトで、Class1.cs ファイルを削除します。その場所に、ダウンロードしたプロジェクトから Ad.cs ファイルと ContosoAdscontext.cs ファイルを追加します。In the ContosoAdsCommon project, delete the Class1.cs file and add in its place the Ad.cs and ContosoAdscontext.cs files from the downloaded project.

  2. ContosoAdsWeb プロジェクトで、ダウンロードしたプロジェクトから次のファイルを追加します。In the ContosoAdsWeb project, add the following files from the downloaded project.

    • Global.asax.csGlobal.asax.cs.
    • Views\Shared フォルダー内: _Layout.cshtmlIn the Views\Shared folder: _Layout.cshtml.
    • Views\Home フォルダー内:Index.cshtmlIn the Views\Home folder: Index.cshtml.
    • Controllers フォルダー内:AdController.csIn the Controllers folder: AdController.cs.
    • Views\Ad フォルダー (最初にフォルダーを作成): 5 つの .cshtml ファイル。In the Views\Ad folder (create the folder first): five .cshtml files.
  3. ContosoAdsWorker プロジェクトで、ダウンロードしたプロジェクトから WorkerRole.cs を追加します。In the ContosoAdsWorker project, add WorkerRole.cs from the downloaded project.

この段階で、チュートリアルの前の説明で示した手順に従ってアプリケーションをビルドして実行できます。アプリは、ローカル データベースおよびストレージ エミュレーター リソースを使用します。You can now build and run the application as instructed earlier in the tutorial, and the app will use local database and storage emulator resources.

以降のセクションでは、Azure 環境、BLOB、およびキューの操作に関連するコードについて説明します。The following sections explain the code related to working with the Azure environment, blobs, and queues. このチュートリアルでは、スキャフォールディングを使用した MVC コントローラーおよびビューの作成方法、SQL Server データベースで動作する Entity Framework コードの作成方法、ASP.NET 4.5 での非同期プログラミングの基礎については説明していません。This tutorial does not explain how to create MVC controllers and views using scaffolding, how to write Entity Framework code that works with SQL Server databases, or the basics of asynchronous programming in ASP.NET 4.5. これらのトピックについては、次のリソースを参照してください。For information about these topics, see the following resources:

ContosoAdsCommon - Ad.csContosoAdsCommon - Ad.cs

Ad.cs ファイルは、広告カテゴリの enum と広告情報の POCO エンティティ クラスを定義します。The Ad.cs file defines an enum for ad categories and a POCO entity class for ad information.

public enum Category
{
    Cars,
    [Display(Name="Real Estate")]
    RealEstate,
    [Display(Name = "Free Stuff")]
    FreeStuff
}

public class Ad
{
    public int AdId { get; set; }

    [StringLength(100)]
    public string Title { get; set; }

    public int Price { get; set; }

    [StringLength(1000)]
    [DataType(DataType.MultilineText)]
    public string Description { get; set; }

    [StringLength(1000)]
    [DisplayName("Full-size Image")]
    public string ImageURL { get; set; }

    [StringLength(1000)]
    [DisplayName("Thumbnail")]
    public string ThumbnailURL { get; set; }

    [DataType(DataType.Date)]
    [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
    public DateTime PostedDate { get; set; }

    public Category? Category { get; set; }
    [StringLength(12)]
    public string Phone { get; set; }
}

ContosoAdsCommon - ContosoAdsContext.csContosoAdsCommon - ContosoAdsContext.cs

ContosoAdsContext クラスは、Entity Framework によって SQL データベースに格納される DbSet コレクションで Ad クラスを使用することを指定します。The ContosoAdsContext class specifies that the Ad class is used in a DbSet collection, which Entity Framework will store in a SQL database.

public class ContosoAdsContext : DbContext
{
    public ContosoAdsContext() : base("name=ContosoAdsContext")
    {
    }
    public ContosoAdsContext(string connString)
        : base(connString)
    {
    }
    public System.Data.Entity.DbSet<Ad> Ads { get; set; }
}

このクラスには 2 つのコンストラクターがあります。The class has two constructors. 1 つ目のコンストラクターは Web プロジェクトによって使用され、Web.config ファイルに格納される接続文字列の名前を指定します。The first of them is used by the web project, and specifies the name of a connection string that is stored in the Web.config file. 2 つ目のコンストラクターにより、Web.config ファイルがないため worker ロール プロジェクトによって使用される実際の接続文字列を渡すことができます。The second constructor enables you to pass in the actual connection string used by the worker role project, since it doesn't have a Web.config file. この接続文字列がどこに格納されるかについては既に説明しました。後のセクションで、DbContext クラスを初期化するときに接続文字列がどのように取得されるかについて説明します。You saw earlier where this connection string was stored, and you'll see later how the code retrieves the connection string when it instantiates the DbContext class.

ContosoAdsWeb - Global.asax.csContosoAdsWeb - Global.asax.cs

Application_Start メソッドから呼び出されるコードにより、images BLOB コンテナーと images キューが存在しない場合はこれらが作成されます。Code that is called from the Application_Start method creates an images blob container and an images queue if they don't already exist. これにより、新しいストレージ アカウントの使用を開始するたびに、または新しいコンピューターでストレージ エミュレーターの使用を開始するたびに、必要な BLOB コンテナーとキューが自動的に作成されます。This ensures that whenever you start using a new storage account, or start using the storage emulator on a new computer, the required blob container and queue will be created automatically.

次に、 .cscfg ファイルからのストレージ接続文字列を使用してストレージ アカウントへのアクセスが取得されます。The code gets access to the storage account by using the storage connection string from the .cscfg file.

var storageAccount = CloudStorageAccount.Parse
    (RoleEnvironment.GetConfigurationSettingValue("StorageConnectionString"));

次に、 images BLOB コンテナーの参照が取得され、コンテナーがまだ存在していない場合はこれが作成され、新しいコンテナーのアクセス許可が設定されます。Then it gets a reference to the images blob container, creates the container if it doesn't already exist, and sets access permissions on the new container. 既定では、新しいコンテナーは、ストレージ アカウント資格情報を持つクライアントのみに BLOB へのアクセスを許可します。By default, new containers only allow clients with storage account credentials to access blobs. Web サイトで画像 BLOB を指し示す URL を使用して画像を表示できるようにするには、BLOB をパブリックに設定する必要があります。The website needs the blobs to be public so that it can display images using URLs that point to the image blobs.

var blobClient = storageAccount.CreateCloudBlobClient();
var imagesBlobContainer = blobClient.GetContainerReference("images");
if (imagesBlobContainer.CreateIfNotExists())
{
    imagesBlobContainer.SetPermissions(
        new BlobContainerPermissions
        {
            PublicAccess =BlobContainerPublicAccessType.Blob
        });
}

似たようなコードを使用して、 images キューの参照を取得し、新しいキューを作成できます。Similar code gets a reference to the images queue and creates a new queue. この場合、アクセス許可の変更は必要ありません。In this case, no permissions change is needed.

CloudQueueClient queueClient = storageAccount.CreateCloudQueueClient();
var imagesQueue = queueClient.GetQueueReference("images");
imagesQueue.CreateIfNotExists();

ContosoAdsWeb - _Layout.cshtmlContosoAdsWeb - _Layout.cshtml

_Layout.cshtml ファイルは、アプリ名をヘッダーとフッターに設定し、"Ads" メニュー エントリを作成します。The _Layout.cshtml file sets the app name in the header and footer, and creates an "Ads" menu entry.

ContosoAdsWeb - Views\Home\Index.cshtmlContosoAdsWeb - Views\Home\Index.cshtml

Views\Home\Index.cshtml ファイルは、ホーム ページにカテゴリ リンクを表示します。The Views\Home\Index.cshtml file displays category links on the home page. リンクは、querystring 変数の Category enum の整数値を Ads Index ページに渡します。The links pass the integer value of the Category enum in a querystring variable to the Ads Index page.

<li>@Html.ActionLink("Cars", "Index", "Ad", new { category = (int)Category.Cars }, null)</li>
<li>@Html.ActionLink("Real estate", "Index", "Ad", new { category = (int)Category.RealEstate }, null)</li>
<li>@Html.ActionLink("Free stuff", "Index", "Ad", new { category = (int)Category.FreeStuff }, null)</li>
<li>@Html.ActionLink("All", "Index", "Ad", null, null)</li>

ContosoAdsWeb - AdController.csContosoAdsWeb - AdController.cs

AdController.cs ファイル内では、コンストラクターによって InitializeStorage メソッドが呼び出され、BLOB とキューを操作するための API を提供する Azure Storage クライアント ライブラリ オブジェクトが作成されます。In the AdController.cs file, the constructor calls the InitializeStorage method to create Azure Storage Client Library objects that provide an API for working with blobs and queues.

次に、Global.asax.cs と同様に、images BLOB コンテナーへの参照が取得されます。Then the code gets a reference to the images blob container as you saw earlier in Global.asax.cs. この処理中に、Web アプリに適した既定の 再試行ポリシー が設定されます。While doing that it sets a default retry policy appropriate for a web app. 既定の指数関数的バックオフ再試行ポリシーでは、一時的な障害に対する反復的再試行操作によって Web アプリが 1 分以上停止する可能性があります。The default exponential backoff retry policy could hang the web app for longer than a minute on repeated retries for a transient fault. ここでは、再試行ごとに 3 秒待機し、再試行の回数を 3 回までとする再試行ポリシーを指定しています。The retry policy specified here waits three seconds after each try for up to three tries.

var blobClient = storageAccount.CreateCloudBlobClient();
blobClient.DefaultRequestOptions.RetryPolicy = new LinearRetry(TimeSpan.FromSeconds(3), 3);
imagesBlobContainer = blobClient.GetContainerReference("images");

似たようなコードを使用して、 images キューの参照を取得できます。Similar code gets a reference to the images queue.

CloudQueueClient queueClient = storageAccount.CreateCloudQueueClient();
queueClient.DefaultRequestOptions.RetryPolicy = new LinearRetry(TimeSpan.FromSeconds(3), 3);
imagesQueue = queueClient.GetQueueReference("images");

コントローラー コードのほとんどは、DbContext クラスを使用した Entity Framework データ モデルの操作に典型的なものです。Most of the controller code is typical for working with an Entity Framework data model using a DbContext class. ただし、ファイルをアップロードして Blob Storage に保存する HttpPost Create メソッドは例外です。An exception is the HttpPost Create method, which uploads a file and saves it in blob storage. モデル バインダーは、このメソッドに HttpPostedFileBase オブジェクトを提供します。The model binder provides an HttpPostedFileBase object to the method.

[HttpPost]
[ValidateAntiForgeryToken]
public async Task<ActionResult> Create(
    [Bind(Include = "Title,Price,Description,Category,Phone")] Ad ad,
    HttpPostedFileBase imageFile)

ユーザーがアップロードするファイルを選択すると、ファイルがアップロードされて BLOB に保存されます。さらに、Ad データベース レコードが更新され、その BLOB を示す URL が反映されます。If the user selected a file to upload, the code uploads the file, saves it in a blob, and updates the Ad database record with a URL that points to the blob.

if (imageFile != null && imageFile.ContentLength != 0)
{
    blob = await UploadAndSaveBlobAsync(imageFile);
    ad.ImageURL = blob.Uri.ToString();
}

アップロード操作を実行するコードは UploadAndSaveBlobAsync メソッドに含まれています。The code that does the upload is in the UploadAndSaveBlobAsync method. このコードでは、BLOB の GUID 名が作成され、ファイルがアップロードおよび保存され、保存された BLOB への参照が返されます。It creates a GUID name for the blob, uploads and saves the file, and returns a reference to the saved blob.

private async Task<CloudBlockBlob> UploadAndSaveBlobAsync(HttpPostedFileBase imageFile)
{
    string blobName = Guid.NewGuid().ToString() + Path.GetExtension(imageFile.FileName);
    CloudBlockBlob imageBlob = imagesBlobContainer.GetBlockBlobReference(blobName);
    using (var fileStream = imageFile.InputStream)
    {
        await imageBlob.UploadFromStreamAsync(fileStream);
    }
    return imageBlob;
}

HttpPost Create メソッドは、BLOB をアップロードしてデータベースを更新した後、画像を縮小表示に変換する準備が整ったことをバックエンド プロセスに通知するキュー メッセージを作成します。After the HttpPost Create method uploads a blob and updates the database, it creates a queue message to inform that back-end process that an image is ready for conversion to a thumbnail.

string queueMessageString = ad.AdId.ToString();
var queueMessage = new CloudQueueMessage(queueMessageString);
await queue.AddMessageAsync(queueMessage);

HttpPost Edit メソッドのコードも似ていますが、ユーザーが新しい画像ファイルを選択した場合に既に存在している BLOB を削除する必要がある点が異なります。The code for the HttpPost Edit method is similar except that if the user selects a new image file any blobs that already exist must be deleted.

if (imageFile != null && imageFile.ContentLength != 0)
{
    await DeleteAdBlobsAsync(ad);
    imageBlob = await UploadAndSaveBlobAsync(imageFile);
    ad.ImageURL = imageBlob.Uri.ToString();
}

次の例で示すのは、広告が削除されたときに BLOB を削除するコードです。The next example shows the code that deletes blobs when you delete an ad.

private async Task DeleteAdBlobsAsync(Ad ad)
{
    if (!string.IsNullOrWhiteSpace(ad.ImageURL))
    {
        Uri blobUri = new Uri(ad.ImageURL);
        await DeleteAdBlobAsync(blobUri);
    }
    if (!string.IsNullOrWhiteSpace(ad.ThumbnailURL))
    {
        Uri blobUri = new Uri(ad.ThumbnailURL);
        await DeleteAdBlobAsync(blobUri);
    }
}
private static async Task DeleteAdBlobAsync(Uri blobUri)
{
    string blobName = blobUri.Segments[blobUri.Segments.Length - 1];
    CloudBlockBlob blobToDelete = imagesBlobContainer.GetBlockBlobReference(blobName);
    await blobToDelete.DeleteAsync();
}

ContosoAdsWeb - Views\Ad\Index.cshtml および Details.cshtmlContosoAdsWeb - Views\Ad\Index.cshtml and Details.cshtml

Index.cshtml ファイルは、縮小表示を他の広告データと共に表示します。The Index.cshtml file displays thumbnails with the other ad data.

<img src="@Html.Raw(item.ThumbnailURL)" />

Details.cshtml ファイルは、フルサイズの画像を表示します。The Details.cshtml file displays the full-size image.

<img src="@Html.Raw(Model.ImageURL)" />

ContosoAdsWeb - Views\Ad\Create.cshtml および Edit.cshtmlContosoAdsWeb - Views\Ad\Create.cshtml and Edit.cshtml

Create.cshtml ファイルと Edit.cshtml ファイルは、フォームのエンコードを指定してコントローラーが HttpPostedFileBase オブジェクトを取得できるようにします。The Create.cshtml and Edit.cshtml files specify form encoding that enables the controller to get the HttpPostedFileBase object.

@using (Html.BeginForm("Create", "Ad", FormMethod.Post, new { enctype = "multipart/form-data" }))

<input> 要素は、ファイル選択ダイアログを表示するようにブラウザーに指示します。An <input> element tells the browser to provide a file selection dialog.

<input type="file" name="imageFile" accept="image/*" class="form-control fileupload" />

ContosoAdsWorker - WorkerRole.cs - OnStart メソッドContosoAdsWorker - WorkerRole.cs - OnStart method

Azure worker ロール環境は、worker ロールの起動時に WorkerRole クラスの OnStart メソッドを呼び出し、OnStart メソッドの終了時に Run メソッドを呼び出します。The Azure worker role environment calls the OnStart method in the WorkerRole class when the worker role is getting started, and it calls the Run method when the OnStart method finishes.

OnStart メソッドは、 .cscfg ファイルからデータベース接続文字列を取得して Entity Framework の DbContext クラスに渡します。The OnStart method gets the database connection string from the .cscfg file and passes it to the Entity Framework DbContext class. 既定で SQLClient プロバイダーが使用されるため、プロバイダーを指定する必要はありません。The SQLClient provider is used by default, so the provider does not have to be specified.

var dbConnString = CloudConfigurationManager.GetSetting("ContosoAdsDbConnectionString");
db = new ContosoAdsContext(dbConnString);

次に、ストレージ アカウントへの参照が取得され、BLOB コンテナーとキューが存在しない場合はこれらが作成されます。After that, the method gets a reference to the storage account and creates the blob container and queue if they don't exist. この操作を行うためのコードは、Web ロールの Application_Start メソッドで示したコードに似ています。The code for that is similar to what you already saw in the web role Application_Start method.

ContosoAdsWorker - WorkerRole.cs - Run メソッドContosoAdsWorker - WorkerRole.cs - Run method

Run メソッドは、OnStart メソッドが初期化操作を終了するときに呼び出されます。The Run method is called when the OnStart method finishes its initialization work. このメソッドは、新しいキュー メッセージを監視する無限ループを実行して、キュー メッセージが到着したときにそれを処理します。The method executes an infinite loop that watches for new queue messages and processes them when they arrive.

public override void Run()
{
    CloudQueueMessage msg = null;

    while (true)
    {
        try
        {
            msg = this.imagesQueue.GetMessage();
            if (msg != null)
            {
                ProcessQueueMessage(msg);
            }
            else
            {
                System.Threading.Thread.Sleep(1000);
            }
        }
        catch (StorageException e)
        {
            if (msg != null && msg.DequeueCount > 5)
            {
                this.imagesQueue.DeleteMessage(msg);
            }
            System.Threading.Thread.Sleep(5000);
        }
    }
}

ループの各イテレーションの後でキュー メッセージが見つからなかった場合、プログラムは 1 秒間スリープ状態になります。After each iteration of the loop, if no queue message was found, the program sleeps for a second. これにより、worker ロールによって過剰な CPU 時間およびストレージ トランザクション コストが発生しないようにしています。This prevents the worker role from incurring excessive CPU time and storage transaction costs. Microsoft Customer Advisory Team では、ある開発者に関する話を紹介しています。この開発者は、この処理を組み込むのを忘れて運用環境にデプロイし、休暇に出かけてしまったのです。The Microsoft Customer Advisory Team tells a story about a developer who forgot to include this, deployed to production, and left for vacation. 開発者が休暇から戻ると、その不注意によって休暇分を超える損失が生じていました。When he got back, his oversight cost more than the vacation.

ときには、キュー メッセージの内容が原因で処理エラーが生じることがあります。Sometimes the content of a queue message causes an error in processing. このようなメッセージは 有害メッセージと呼ばれ、エラーをログに記録してループを再開するだけでは、このメッセージを処理する試みが際限なく繰り返されることになります。This is called a poison message, and if you just logged an error and restarted the loop, you could endlessly try to process that message. そこで、catch ブロックに if ステートメントを含めて、アプリが現在のメッセージを処理しようと試みた回数を調べ、その回数が 5 回を超えた場合はメッセージをキューから削除するようにしています。Therefore the catch block includes an if statement that checks to see how many times the app has tried to process the current message, and if it has been more than 5 times, the message is deleted from the queue.

ProcessQueueMessage は、キュー メッセージが見つかったときに呼び出されます。ProcessQueueMessage is called when a queue message is found.

private void ProcessQueueMessage(CloudQueueMessage msg)
{
    var adId = int.Parse(msg.AsString);
    Ad ad = db.Ads.Find(adId);
    if (ad == null)
    {
        throw new Exception(String.Format("AdId {0} not found, can't create thumbnail", adId.ToString()));
    }

    CloudBlockBlob inputBlob = this.imagesBlobContainer.GetBlockBlobReference(ad.ImageURL);

    string thumbnailName = Path.GetFileNameWithoutExtension(inputBlob.Name) + "thumb.jpg";
    CloudBlockBlob outputBlob = this.imagesBlobContainer.GetBlockBlobReference(thumbnailName);

    using (Stream input = inputBlob.OpenRead())
    using (Stream output = outputBlob.OpenWrite())
    {
        ConvertImageToThumbnailJPG(input, output);
        outputBlob.Properties.ContentType = "image/jpeg";
    }

    ad.ThumbnailURL = outputBlob.Uri.ToString();
    db.SaveChanges();

    this.imagesQueue.DeleteMessage(msg);
}

このコードには、データベースを読み取って画像の URL を取得する操作、画像を縮小表示に変換する操作、縮小表示を BLOB に保存する操作、縮小表示 BLOB の URL を反映するようにデータベースを更新する操作、およびキュー メッセージを削除する操作が含まれています。This code reads the database to get the image URL, converts the image to a thumbnail, saves the thumbnail in a blob, updates the database with the thumbnail blob URL, and deletes the queue message.

注意

ConvertImageToThumbnailJPG メソッドのコードでは、簡略化のために System.Drawing 名前空間のクラスを使用しています。The code in the ConvertImageToThumbnailJPG method uses classes in the System.Drawing namespace for simplicity. ただし、この名前空間のクラスは Windows フォーム用に設計されています。However, the classes in this namespace were designed for use with Windows Forms. これらのクラスは、Windows または ASP.NET サービスでの使用に関してサポートされていません。They are not supported for use in a Windows or ASP.NET service. イメージの処理オプションの詳細については、イメージの動的生成イメージのサイズ変更の詳細に関する各ページを参照してください。For more information about image-processing options, see Dynamic Image Generation and Deep Inside Image Resizing.

トラブルシューティングTroubleshooting

このチュートリアルの手順に従って作業しているときに発生する可能性のある一般的なエラーとその解決方法について説明します。In case something doesn't work while you're following the instructions in this tutorial, here are some common errors and how to resolve them.

ServiceRuntime.RoleEnvironmentExceptionServiceRuntime.RoleEnvironmentException

RoleEnvironment オブジェクトは、アプリケーションを Azure で実行したときまたは Azure コンピューティング エミュレーターを使用してローカルで実行したときに Azure によって提供されます。The RoleEnvironment object is provided by Azure when you run an application in Azure or when you run locally using the Azure compute emulator. アプリケーションをローカルで実行しているときにこのエラーが発生した場合は、ContosoAdsCloudService プロジェクトがスタートアップ プロジェクトとして設定されていることを確認してください。If you get this error when you're running locally, make sure that you have set the ContosoAdsCloudService project as the startup project. こうすることで、Azure コンピューティング エミュレーターを使用して実行するようにプロジェクトが設定されます。This sets up the project to run using the Azure compute emulator.

アプリケーションが Azure RoleEnvironment を使用する目的の 1 つに、 .cscfg ファイルに格納されている接続文字列値を取得することがあります。したがって、この例外の別の原因として、接続文字列が見つからないことが考えられます。One of the things the application uses the Azure RoleEnvironment for is to get the connection string values that are stored in the .cscfg files, so another cause of this exception is a missing connection string. ContosoAdsWeb プロジェクトのクラウド構成とローカル構成の両方に対して StorageConnectionString 設定が作成されていること、および ContosoAdsWorker プロジェクトの両方の構成に対して両方の接続文字列が作成されていることを確認してください。Make sure that you created the StorageConnectionString setting for both Cloud and Local configurations in the ContosoAdsWeb project, and that you created both connection strings for both configurations in the ContosoAdsWorker project. ソリューション全体を対象に StorageConnectionString の "すべて検索" を実行すると、6 つのファイルに 9 件見つかります。If you do a Find All search for StorageConnectionString in the entire solution, you should see it 9 times in 6 files.

ポート xxx にオーバーライドできません。Cannot override to port xxx. 新しいポートが http プロトコルで許容されている最小値 8080 を下回っていますNew port below minimum allowed value 8080 for protocol http

Web プロジェクトで使用するポート番号を変更してください。Try changing the port number used by the web project. ContosoAdsWeb プロジェクトを右クリックし、 [プロパティ] をクリックします。Right-click the ContosoAdsWeb project, and then click Properties. [Web] タブで、 [プロジェクトの URL] 設定のポート番号を変更します。Click the Web tab, and then change the port number in the Project Url setting.

ほかに考えられるこの問題の解決方法については、次のセクションを参照してください。For another alternative that might resolve the problem, see the following section.

ローカルで実行しているときに発生するその他のエラーOther errors when running locally

既定では、新しいクラウド サービス プロジェクトは、Azure コンピューティング エミュレーター Express を使用して Azure 環境をシミュレートします。By default new cloud service projects use the Azure compute emulator express to simulate the Azure environment. これはフル装備のコンピューティング エミュレーターの軽量バージョンです。フル装備のエミュレーターは、Express バージョンが動作しない特定の条件でも動作します。This is a lightweight version of the full compute emulator, and under some conditions the full emulator will work when the express version does not.

フル装備のエミュレーターを使用するようにプロジェクトを変更するには、ContosoAdsCloudService プロジェクトを右クリックし、 [プロパティ] をクリックします。To change the project to use the full emulator, right-click the ContosoAdsCloudService project, and then click Properties. [プロパティ] ウィンドウで、 [Web] タブをクリックし、 [Full Emulator を使用する] をクリックします。In the Properties window click the Web tab, and then click the Use Full Emulator radio button.

フル装備のエミュレーターを使用してアプリケーションを実行するには、管理者特権で Visual Studio を開く必要があります。In order to run the application with the full emulator, you have to open Visual Studio with administrator privileges.

次の手順Next steps

Contoso Ads アプリケーションは、入門用のチュートリアルという目的から意図的にシンプルに作られています。The Contoso Ads application has intentionally been kept simple for a getting-started tutorial. たとえば、このアプリケーションには、依存関係の挿入作業パターンのリポジトリと単位が実装されていません。さらに、ログのためのインターフェイス、データ モデルの変更を管理するための EF Code First Migrations、一時的なネットワーク エラーを管理するための EF 接続の回復性なども省略されています。For example, it doesn't implement dependency injection or the repository and unit of work patterns, it doesn't use an interface for logging, it doesn't use EF Code First Migrations to manage data model changes or EF Connection Resiliency to manage transient network errors, and so forth.

以下に、より現実的なコーディング手法を示すいくつかのクラウド サービス サンプル アプリケーションを、やさしいものから順に示します。Here are some cloud service sample applications that demonstrate more real-world coding practices, listed from less complex to more complex:

クラウド向けの開発については、「 Azure を使用した実際のクラウド アプリケーションの作成」をご覧ください。For general information about developing for the cloud, see Building Real-World Cloud Apps with Azure.

Azure Storage に関するベスト プラクティスおよびパターンを紹介するビデオについては、「 Microsoft Azure Storage - What's New, Best Practices and Patterns (Microsoft Azure Storage - 新機能、ベスト プラクティス、パターン)」を参照してください。For a video introduction to Azure Storage best practices and patterns, see Microsoft Azure Storage – What's New, Best Practices and Patterns.

詳細については、次のリソースを参照してください。For more information, see the following resources: