クイック スタート: Redis Cache を使用して ASP.NET Web アプリを作成するQuickstart: Create a ASP.NET Web App with Redis Cache

はじめにIntroduction

このクイック スタートでは、Visual Studio 2017 を使用して ASP.NET Web アプリケーションを作成し Azure App Service にデプロイする方法を説明します。This quickstart shows how to create and deploy an ASP.NET web application to Azure App Service using Visual Studio 2017. このサンプル アプリケーションは、Azure Redis Cache に接続して、キャッシュにデータを格納し、キャッシュからデータを取得します。The sample application connects to an Azure Redis Cache to store and retrieve data from the cache. このクイック スタートを最後まで行うと、Azure Redis Cache との間で読み書きを行う Web アプリが完成し、Azure でホストされています。When you complete the quickstart you have a running web app, hosted in Azure, that reads and writes to an Azure Redis Cache.

簡単なテストが完了した Azure

Azure サブスクリプションをお持ちでない場合は、開始する前に 無料アカウント を作成してください。If you don't have an Azure subscription, create a free account before you begin.

前提条件Prerequisites

このクイック スタートを完了するには、次の前提条件を満たしている必要があります。To complete the quickstart, you must have the following prerequisites:

  • 次のワークロードを使って、Visual Studio 2017 をインストールします。Install Visual Studio 2017 with the following workloads:
    • ASP.NET および Web の開発ASP.NET and web development
    • Azure 開発Azure Development

Visual Studio プロジェクトの作成Create the Visual Studio project

Visual Studio を開き、[ファイル][新規作成][プロジェクト] の順にクリックします。Open Visual Studio and click File, New, Project.

Create project

[新しいプロジェクト] ダイアログで、次の操作を行います。In the New Project dialog, take the following steps:

  1. [テンプレート] の一覧で、[Visual C#] ノードを展開します。Expand the Visual C# node in the Templates list
  2. [クラウド] を選びますSelect Cloud
  3. [ASP.NET Web アプリケーション] をクリックしますClick ASP.NET Web Application
  4. .NET Framework 4.5.2 以降が選択されていることを確認しますEnsure that .NET Framework 4.5.2 or higher is selected
  5. [名前] ボックスでプロジェクトの名前を指定します。この例では ContosoTeamStats を使いますGive the project a name in the Name textbox, for this example we've used ContosoTeamStats
  6. Click OK.Click OK.

[新しい ASP.NET Web アプリケーション] 画面が表示されます。You will be presented with a New ASP.NET Web Application screen:

Select project template

プロジェクトの種類として、 [MVC] を選択します。Select MVC as the project type.

[認証] の設定で [認証なし] が指定されていることを確認します。Ensure that No Authentication is specified for the Authentication settings. Visual Studio のバージョンによっては、既定値が他の値に設定されている場合があります。Depending on your version of Visual Studio, the default may be set to something else. これを変更するには、[認証の変更] をクリックし、[認証なし] を選択します。To change it, click Change Authentication and select No Authentication.

[OK] をクリックしてプロジェクトを作成します。Click OK to create the project.

キャッシュの作成Create a cache

次に、アプリ用のキャッシュを作成します。Next, you create the cache for the app.

キャッシュを作成するには、まず Azure Portal にサインインし、[リソースの作成] > [データベース] > [Redis Cache] の順にクリックします。To create a cache, first sign in to the Azure portal, and click Create a resource > Databases > Redis Cache.

新しいキャッシュ

[新規 Redis Cache] で、新しいキャッシュの設定を構成します。In New Redis Cache, configure the settings for your new cache.

SettingSetting 推奨値Suggested value [説明]Description
DNS 名DNS name グローバルに一意の名前Globally unique name キャッシュ名は 1 ~ 63 文字の文字列で、数字、英字、- 文字のみを使用する必要があります。The cache name must be a string between 1 and 63 characters and contain only numbers, letters, and the - character. キャッシュ名の先頭と末尾には - 文字を使用できません。また、連続する - 文字は無効です。The cache name cannot start or end with the - character, and consecutive - characters are not valid.
サブスクリプションSubscription 該当するサブスクリプションYour subscription この新しい Azure Redis Cache が作成されるサブスクリプション。The subscription under which this new Azure Redis Cache is created.
リソース グループResource Group TestResourcesTestResources その中にキャッシュを作成する新しいリソース グループの名前。Name for the new resource group in which to create your cache. アプリのすべてのリソースを 1 つのグループ内に配置することで、それらを一緒に管理できます。By putting all the resources for an app in a group, you can manage them together. たとえば、リソース グループを削除すれば、そのアプリに関連付けられているすべてのリソースが削除されます。For example, deleting the resource group would delete all resources associated with the app.
場所Location 米国東部East US キャッシュを使用する他のサービスの近くのリージョンを選択します。Choose a region near to other services that will use your cache.
価格レベルPricing tier Basic C0 (250 MB のキャッシュ)Basic C0 (250 MB Cache) 価格レベルによって、キャッシュのサイズ、パフォーマンス、および使用可能な機能が決まります。The pricing tier determines the size, performance, and features available for the cache. 詳細については、Azure Redis Cache の概要に関するページを参照してください。For more information, see Azure Redis Cache Overview.
ダッシュボードにピン留めするPin to dashboard オンSelected クリックすると、新しいキャッシュをダッシュ ボードにピン留めし、簡単に見つけられるようになります。Click pin the new cache to your dashboard making it easy to find.

キャッシュの作成

新しいキャッシュ設定を構成したら、[作成] をクリックします。Once the new cache settings are configured, click Create.

キャッシュが作成されるまで数分かかる場合があります。It can take a few minutes for the cache to be created. 状態を確認するには、ダッシュボードで進行状況を監視してください。To check the status, you can monitor the progress on the dashboard. キャッシュが作成されると、新しいキャッシュの状態が 実行中 になり、使用できるようになります。After the cache has been created, your new cache has a Running status and is ready for use.

作成されたキャッシュ

Azure Portal を使用して、ホスト名、ポート、およびアクセス キーを取得するRetrieve host name, ports, and access keys using the Azure Portal

Azure Redis Cache のインスタンスに接続するときには、キャッシュ クライアントにキャッシュのホスト名、ポート、およびキーが必要です。When connecting to an Azure Redis Cache instance, cache clients need the host name, ports, and a key for the cache. 一部のクライアントは、若干異なる名前で、これらの項目を参照できます。Some clients may refer to these items by slightly different names. この情報は、Azure Portal で取得できます。You can retrieve this information in the Azure portal.

Azure Portal を使用してアクセス キーを取得するには、キャッシュを参照して、[アクセス キー] をクリックします。To retrieve the access keys using the Azure portal, browse to your cache and click Access keys.

Redis Cache のキー

ホスト名やポートを取得するには、[プロパティ] をクリックします。To retrieve host name, ports, click Properties.

Redis cache properties

コンピューター上に CacheSecrets.config という名前のファイルを作成し、サンプル アプリケーションのソース コードでチェックインされない場所に置きます。Create a file on your computer named CacheSecrets.config and place it in a location where it won't be checked in with the source code of your sample application. このクイック スタートでは、CacheSecrets.config ファイルを C:\AppSecrets\CacheSecrets.config に配置します。For this quickstart, the CacheSecrets.config file is located here, C:\AppSecrets\CacheSecrets.config.

CacheSecrets.config ファイルを編集し、次の内容を追加します。Edit the CacheSecrets.config file and add the following contents:

<appSettings>
    <add key="CacheConnection" value="<cache-name>.redis.cache.windows.net,abortConnect=false,ssl=true,password=<access-key>"/>
</appSettings>

<cache-name> は実際のキャッシュ ホスト名に置き換えます。Replace <cache-name> with your cache host name.

<access-key> は、実際のキャッシュのプライマリ キーに置き換えます。Replace <access-key> with the primary key for your cache.

ヒント

セカンダリ アクセス キーは、プライマリ アクセス キーを再生成する間の代替キーとして、キー ローテーションのときに使われます。The secondary access key is used during key rotation as an alternate key while you regenerate the primary access key.

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

MVC アプリケーションを更新するUpdate the MVC application

このセクションでは、Azure Redis Cache に対する簡単なテストを表示する新しいビューをサポートするようにアプリケーションを更新します。In this section, you update the application to support a new view that will display a simple test against an Azure Redis Cache.

キャッシュ用のアプリ設定で web.config ファイルを更新するUpdate the web.config file with an app setting for the cache

アプリケーションをローカルで実行すると、CacheSecrets.config 内の情報が、Azure Redis Cache インスタンスへの接続に使われます。When you run the application locally, the information in CacheSecrets.config is used to connect to your Azure Redis Cache instance. 後でこのアプリケーションを Azure にデプロイします。Later you'll deploy this application to Azure. そのときに、アプリケーションがこのファイルの代わりにキャッシュ接続情報の取得に使用するアプリ設定を Azure 内で構成します。At that time, you will configure an app setting in Azure that the application will use to retrieve the cache connection information instead of this file. CacheSecrets.config はアプリケーションと一緒に Azure にデプロイされず、アプリケーションのローカルなテストの間にだけ使われます。Since CacheSecrets.config is not deployed to Azure with your application, you only use it while testing the application locally. キャッシュ データへの不正アクセスを防ぐため、この情報は可能な限り安全に保持してください。You want to keep this information as secure as possible to prevent malicious access to your cache data.

ソリューション エクスプローラーで、web.config ファイルをダブルクリックして開きます。In Solution Explorer, double-click the web.config file to open it.

web.config

web.config ファイルで <appSetting> 要素を探し、次の file 属性を追加します。In the web.config file, find the <appSetting> element, and add the following file attribute. 異なるファイル名または場所を使用した場合は、この例の値を実際の値で置き換えてください。If you used a different file name or location, substitute those values for the ones shown in the example.

  • 変更前: <appSettings>Before: <appSettings>
  • 変更後: <appSettings file="C:\AppSecrets\CacheSecrets.config">After: <appSettings file="C:\AppSecrets\CacheSecrets.config">

<appSettings> 要素内のマークアップは、ASP.NET ランタイムによって外部ファイルの内容と結合されます。The ASP.NET runtime merges the contents of the external file with the markup in the <appSettings> element. 指定したファイルが見つからない場合、このファイル属性は無視されます。The runtime ignores the file attribute if the specified file cannot be found. このアプリケーションのソース コードにシークレット (キャッシュへの接続文字列) は含まれていません。Your secrets (the connection string to your cache) are not included as part of the source code for the application. Web アプリを Azure にデプロイするときに、CacheSecrests.config ファイルはデプロイされません。When you deploy your web app to Azure, the CacheSecrests.config file won't be deployed.

StackExchange.Redis を使用するようにアプリケーションを構成するConfigure the application to use StackExchange.Redis

Visual Studio 用の StackExchange.Redis NuGet パッケージを使うようにアプリを構成するには、[ツール] > [NuGet パッケージ マネージャー] > [パッケージ マネージャー コンソール] の順にクリックします。To configure the app to use the StackExchange.Redis NuGet package for Visual Studio, click Tools > NuGet Package Manager > Package Manager Console.

[Package Manager Console] ウィンドウで、次のコマンドを実行します。Run the following command from the Package Manager Console window:

Install-Package StackExchange.Redis

クライアント アプリケーションから StackExchange.Redis Cache クライアントを使用して Azure Redis Cache にアクセスするために必要なアセンブリ参照が NuGet パッケージによってダウンロードされ追加されます。The NuGet package downloads and adds the required assembly references for your client application to access Azure Redis Cache with the StackExchange.Redis cache client. StackExchange.Redis クライアント ライブラリの厳密な名前を持つバージョンを使用する場合は、StackExchange.Redis.StrongName パッケージをインストールします。If you prefer to use a strong-named version of the StackExchange.Redis client library, install the StackExchange.Redis.StrongName package.

HomeController とレイアウトを更新するUpdate the HomeController and Layout

ソリューション エクスプローラーControllers フォルダーを展開し、HomeController.cs ファイルを開きます。In Solution Explorer, expand the Controllers folder, and open the HomeController.cs file.

キャッシュ クライアントとアプリの設定をサポートするために、次の 2 つの using ステートメントをファイルの先頭に追加します。Add the following two using statements at the top of the file to support the cache client and app settings.

using System.Configuration;
using StackExchange.Redis;

新しいキャッシュに対していくつかのコマンドを実行する新しい RedisCache アクションをサポートするために、次のメソッドを HomeController クラスに追加します。Add the following method to the HomeController class to support a new RedisCache action that executes some commands against the new cache.

    public ActionResult RedisCache()
    {
        ViewBag.Message = "A simple example with Azure Redis Cache on ASP.NET.";

        var lazyConnection = new Lazy<ConnectionMultiplexer>(() =>
        {
            string cacheConnection = ConfigurationManager.AppSettings["CacheConnection"].ToString();
            return ConnectionMultiplexer.Connect(cacheConnection);
        });

        // Connection refers to a property that returns a ConnectionMultiplexer
        // as shown in the previous example.
        IDatabase cache = lazyConnection.Value.GetDatabase();

        // Perform cache operations using the cache object...

        // Simple PING command
        ViewBag.command1 = "PING";
        ViewBag.command1Result = cache.Execute(ViewBag.command1).ToString();

        // Simple get and put of integral data types into the cache
        ViewBag.command2 = "GET Message";
        ViewBag.command2Result = cache.StringGet("Message").ToString();

        ViewBag.command3 = "SET Message \"Hello! The cache is working from ASP.NET!\"";
        ViewBag.command3Result = cache.StringSet("Message", "Hello! The cache is working from ASP.NET!").ToString();

        // Demostrate "SET Message" executed as expected...
        ViewBag.command4 = "GET Message";
        ViewBag.command4Result = cache.StringGet("Message").ToString();

        // Get the client list, useful to see if connection list is growing...
        ViewBag.command5 = "CLIENT LIST";
        ViewBag.command5Result = cache.Execute("CLIENT", "LIST").ToString().Replace(" id=", "\rid=");

        lazyConnection.Value.Dispose();

        return View();
    }

ソリューション エクスプローラーで、[Views] > [Shared] フォルダーを展開し、_Layout.cshtml ファイルを開きます。In Solution Explorer, expand Views>Shared folder, and open the _Layout.cshtml file.

置換前のコード:Replace:

@Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })

置換後のコード:With:

@Html.ActionLink("Azure Redis Cache Test", "RedisCache", "Home", new { area = "" }, new { @class = "navbar-brand" })

新しい RedisCache ビューを追加するAdd a new RedisCache view

ソリューション エクスプローラーで、[Views] フォルダーを展開し、[Home] フォルダーを右クリックします。In Solution Explorer, expand the Views folder, and then right-click the Home folder. [追加] > [ビュー...] を選択します。Choose Add > View....

[ビューの追加] ダイアログで、ビューの名前に「RedisCache」と入力し、[追加] をクリックします。In the Add View dialog, enter RedisCache for the View Name, and click Add.

RedisCache.cshtml ファイルのコードを次のコードに置き換えます。Replace the code in the RedisCache.cshtml file with the following code:

@{
    ViewBag.Title = "Azure Redis Cache Test";
}

<h2>@ViewBag.Title.</h2>
<h3>@ViewBag.Message</h3>
<br /><br />
<table border="1" cellpadding="10">
    <tr>
        <th>Command</th>
        <th>Result</th>
    </tr>
    <tr>
        <td>@ViewBag.command1</td>
        <td><pre>@ViewBag.command1Result</pre></td>
    </tr>
    <tr>
        <td>@ViewBag.command2</td>
        <td><pre>@ViewBag.command2Result</pre></td>
    </tr>
    <tr>
        <td>@ViewBag.command3</td>
        <td><pre>@ViewBag.command3Result</pre></td>
    </tr>
    <tr>
        <td>@ViewBag.command4</td>
        <td><pre>@ViewBag.command4Result</pre></td>
    </tr>
    <tr>
        <td>@ViewBag.command5</td>
        <td><pre>@ViewBag.command5Result</pre></td>
    </tr>
</table>

アプリをローカルで実行するRun the app locally

既定では、プロジェクトはテストとデバッグのためにアプリを IIS Express にローカルにホストするように構成されます。By default the project is configured to host the app locally in IIS Express for testing and debugging.

Visual Studio のメニューで [デバッグ] > [デバッグの開始] をクリックしてアプリをビルドし、テストとデバッグのためにアプリをローカルに開始します。In Visual Studio on the menu, click Debug > Start Debugging to build and start the app locally for testing and debugging.

ブラウザーで、ナビゲーション バーの [Azure Redis Cache Test](Azure Redis Cache のテスト) をクリックします。In the browser, click Azure Redis Cache Test on the navigation bar.

次の例では、Message キーは、前にポータルの Redis コンソールを使って設定されたキャッシュ値を持っていたことがわかります。In the example below, you can see the Message key previously had a cached value, which was set using the Redis Console in the portal. アプリは、そのキャッシュ値を更新しました。The app updated that cached value. また、アプリは PING および CLIENT LIST コマンドも実行しました。The app also executed the PING and CLIENT LIST commands.

完了した簡単なローカル テスト

Azure に発行して実行するPublish and run in Azure

アプリのローカル テストが正常に終了したら、アプリを Azure にデプロイして、クラウドで実行します。Once you have successfully tested the app locally, you will deploy the app to Azure and run it in the cloud.

アプリを Azure に発行するPublish the app to Azure

Visual Studio で、ソリューション エクスプローラーのプロジェクト ノードを右クリックし、[発行] を選択します。In Visual Studio, right-click the project node in Solution Explorer, and choose Publish.

[発行]

[Microsoft Azure App Service] をクリックし、[新規作成] を選択して、[発行] をクリックします。Click Microsoft Azure App Service, choose Create New, and click Publish.

App Service に発行する

[App Service の作成] ダイアログで、次のように変更します。In the Create App Service dialog, make the following changes:

SettingSetting 推奨値Recommended Value 説明Description
アプリ名App Name 既定値を使用します。Use default アプリ名は、Azure へのデプロイ時にアプリのホスト名になります。The app name will be the host name for the app when deployed to Azure. 一意にするために必要な場合、名前にタイムスタンプのサフィックスが追加される場合があります。The name may have a timestamp suffix added to it if necessary to make it unique.
サブスクリプションSubscription Azure サブスクリプションを選びますChoose your Azure subscription このサブスクリプションに関連するホスティング料金が請求されます。This subscription will be charged for any related hosting charges. 複数の Azure サブスクリプションがある場合は、適切なサブスクリプションを選択したことを確認します。If you have multiple Azure subscriptions, Verify the desired subscription is selected.
リソース グループResource Group キャッシュを作成したものと同じリソース グループを使います。Use the same resource group where you created the cache. たとえば、TestResourceGroup などです。For example, TestResourceGroup. リソース グループは、すべてのリソースをグループとして管理するときに便利です。The resource group helps you want to manage all resources as a group. 後でアプリを削除する必要があるときは、グループを削除するだけで済みます。Later when you want to delete the app, you can just delete the group.
App Service プランApp Service Plan [新規] をクリックし、TestingPlan という名前で新しい App Service プランを作成します。Click New and create a new App Service Plan named TestingPlan.
キャッシュを作成するときに使ったものと同じ [場所] を使います。Use the same Location you used when creating your cache.
サイズでは [Free] を選びます。Choose Free for the size.
App Service プランでは、Web アプリを実行するための一連のコンピューティング リソースを定義します。An App Service plan defines a set of compute resources for a web app to run with.

[App Service] ダイアログ

App Service のホスティング設定を構成した後、[作成] をクリックしてアプリ用の新しい App Service を作成します。Once you have the App Service hosting settings configured, click Create to create a new App Service for your app.

Visual Studio の [出力] ウィンドウを監視し、Azure への発行の状態を確認します。Monitor the Output window in Visual Studio to see the status of the publish to Azure. 発行が正常に完了すると、App Service の URL が次に示すように記録されます。When publishing has successfully completed, the URL for the App Service is logged as shown below:

発行の出力

キャッシュ用のアプリの設定を追加するAdd the app setting for the cache

新しい App Service の発行が完了したら、新しいアプリの設定を追加します。Once publishing has completed for the new App Service, add a new app setting. この設定は、キャッシュの接続情報を格納するために使われます。This setting will be used to store the cache connection information. Azure portal の上部にある検索バーにアプリ名を入力し、作成した新しい App Service を検索します。Type the app name in the search bar at the top of the Azure portal to find the new App Service you just created.

App Service を検索する

キャッシュへの接続に使用する CacheConnection という名前の新しいアプリ設定をアプリに追加します。Add a new app setting named CacheConnection for the app to use to connect to the cache. CacheSecrets.config ファイルで CacheConnection 用に構成したものと同じ値を使います。Use the same value you configured for CacheConnection in your CacheSecrets.config file. 値には、キャッシュのホスト名とアクセス キーが含まれます。The value contains the cache host name and access key.

アプリの設定を追加する

Azure でのアプリの実行Run the app in Azure

ブラウザーで、App Service の URL を参照します。In your browser, browse to the URL for the App Service. URL は、発行操作の結果として Visual Studio の出力ウィンドウに表示されます。The URL is shown in the results of the publishing operation in the Output window in Visual Studio. Azure portal においても、作成した App Service の [概要] ページで提供されます。It is also provided in the Azure portal on the Overview page of the App Service you created.

ナビゲーション バーの [Azure Redis Cache Test](Azure Redis Cache のテスト) をクリックして、キャッシュへのアクセスをテストします。Click Azure Redis Cache Test on the navigation bar to test cache access.

簡単なテストが完了した Azure

リソースのクリーンアップClean up resources

次のチュートリアルに進む場合は、このクイック スタートで作成したリソースを維持して、再利用することができます。If you will be continuing to the next tutorial, you can keep the resources created in this quickstart and reuse them.

クイック スタートのサンプル アプリケーションの使用を終える場合は、課金を避けるために、このクイック スタートで作成した Azure リソースを削除することができます。Otherwise, if you are finished with the quickstart sample application, you can delete the Azure resources created in this quickstart to avoid charges.

重要

いったん削除したリソース グループを元に戻すことはできません。リソース グループとそこに存在するすべてのリソースは完全に削除されます。Deleting a resource group is irreversible and that the resource group and all the resources in it are permanently deleted. 間違ったリソース グループやリソースをうっかり削除しないようにしてください。Make sure that you do not accidentally delete the wrong resource group or resources. このサンプルのホストとなるリソースを、保持するリソースが含まれている既存のリソース グループ内に作成した場合は、リソース グループを削除するのではなく、個々のブレードから各リソースを個別に削除することができます。If you created the resources for hosting this sample inside an existing resource group that contains resources you want to keep, you can delete each resource individually from their respective blades instead of deleting the resource group.

Azure ポータル にサインインし、 [リソース グループ] をクリックします。Sign in to the Azure portal and click Resource groups.

[名前でフィルター] ボックスにリソース グループの名前を入力します。In the Filter by name... textbox, type the name of your resource group. この記事の手順では、TestResources という名前のリソース グループを使用しました。The instructions for this article used a resource group named TestResources. 結果一覧でリソース グループの [...] をクリックし、[リソース グループの削除] をクリックします。On your resource group in the result list, click ... then Delete resource group.

削除

リソース グループの削除の確認を求めるメッセージが表示されます。You will be asked to confirm the deletion of the resource group. 確認のためにリソース グループの名前を入力し、[削除] をクリックします。Type the name of your resource group to confirm, and click Delete.

しばらくすると、リソース グループとそこに含まれているすべてのリソースが削除されます。After a few moments, the resource group and all of its contained resources are deleted.

次の手順Next steps

次のチュートリアルでは、より現実的なシナリオで Azure Redis Cache を使って、アプリのパフォーマンスを向上させます。In this next tutorial, you will use Azure Redis Cache in a more real-world scenario to improve performance of an app. このアプリケーションを更新し、ASP.NET とデータベースでキャッシュ アサイド パターンを使ってスコアボードの結果をキャッシュします。You will update this application to cache leaderboard results using the cache-aside pattern with ASP.NET and a database.