Redis Cache で Web アプリを作成する方法How to create a Web App with Redis Cache

このチュートリアルでは、Visual Studio 2017 を使用して ASP.NET Web アプリケーションを作成し Azure App Service の Web アプリにデプロイする方法を紹介します。This tutorial shows how to create and deploy an ASP.NET web application to a web app in Azure App Service using Visual Studio 2017. サンプル アプリケーションでは、チームの一連の統計情報をデータベースから取得して表示します。また Azure Redis Cache を使用して、キャッシュにデータを保存したりキャッシュからデータを取得したりするための各種の方法を紹介しています。The sample application displays a list of team statistics from a database and shows different ways to use Azure Redis Cache to store and retrieve data from the cache. チュートリアルの最後には、実際にデータベースの読み取りと書き込みを行う Web アプリが完成します。Web アプリは、Azure Redis Cache を使って最適化され、Azure でホストされます。When you complete the tutorial you'll have a running web app that reads and writes to a database, optimized with Azure Redis Cache, and hosted in Azure.

学習内容:You'll learn:

  • ASP.NET MVC 5 Web アプリケーションを Visual Studio で作成する方法。How to create an ASP.NET MVC 5 web application in Visual Studio.
  • Entity Framework を使用してデータベースのデータにアクセスする方法。How to access data from a database using Entity Framework.
  • データの保存と取得に Azure Redis Cache を使うことでデータのスループットを高め、データベースの負荷を軽減する方法。How to improve data throughput and reduce database load by storing and retrieving data using Azure Redis Cache.
  • Redis ソート済みセットを使用して上位 5 チームを取得する方法。How to use a Redis sorted set to retrieve the top 5 teams.
  • Resource Manager テンプレートを使用してアプリケーションの Azure リソースをプロビジョニングする方法。How to provision the Azure resources for the application using a Resource Manager template.
  • Visual Studio を使用してアプリケーションを Azure に発行する方法How to publish the application to Azure using Visual Studio.

前提条件Prerequisites

このチュートリアルを完了するには、次の前提条件を満たしている必要があります。To complete the tutorial, you must have the following prerequisites.

Azure アカウントAzure account

このチュートリアルを完了するには、Azure アカウントが必要です。You need an Azure account to complete the tutorial. そのための方法は次のとおりです。You can:

Visual Studio 2017 と Azure SDK for .NETVisual Studio 2017 with the Azure SDK for .NET

このチュートリアルは、Visual Studio 2017 と Azure SDK for .NET 向けに書かれています。The tutorial is written for Visual Studio 2017 with the Azure SDK for .NET. Azure SDK 2.9.5 は、Visual Studio インストーラーに付属しています。The Azure SDK 2.9.5 is included with the Visual Studio installer.

Visual Studio 2015 を使用している場合は、Azure SDK for .NET 2.8.2 以降でチュートリアルを実行できます。If you have Visual Studio 2015, you can follow the tutorial with the Azure SDK for .NET 2.8.2 or later. 最新の Azure SDK for Visual Studio 2015 はここからダウンロードしてくださいDownload the latest Azure SDK for Visual Studio 2015 here. Visual Studio をまだ持っていない場合は、SDK と共に自動的にインストールされます。Visual Studio is automatically installed with the SDK if you don't already have it. 一部の画面は、このチュートリアルに例示されている画像と異なる場合があります。Some screens may look different from the illustrations shown in this tutorial.

Visual Studio 2013 を持っている場合は、 最新の Azure SDK for Visual Studio 2013 をダウンロードできます。If you have Visual Studio 2013, you can download the latest Azure SDK for Visual Studio 2013. 一部の画面は、このチュートリアルに例示されている画像と異なる場合があります。Some screens may look different from the illustrations shown in this tutorial.

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

  1. Visual Studio を開き、[ファイル][新規作成][プロジェクト] の順にクリックします。Open Visual Studio and click File, New, Project.
  2. [テンプレート] リストの [Visual C#] ノードを展開し、[クラウド] を選択して [ASP.NET Web アプリケーション] をクリックします。Expand the Visual C# node in the Templates list, select Cloud, and click ASP.NET Web Application. [.NET Framework 4.5.2] 以降が選択されていることを確認します。Ensure that .NET Framework 4.5.2 or higher is selected. [名前] ボックスに「ContosoTeamStats」と入力し、[OK] をクリックします。Type ContosoTeamStats into the Name textbox and click OK.

    Create project

  3. プロジェクトの種類として、 [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.

    Visual Studio 2015 で実行している場合は、[クラウドにホストする] チェック ボックスをオフにします。If you are following along with Visual Studio 2015, clear the Host in the cloud checkbox. このチュートリアルの以降の手順では、Azure リソースをプロビジョニングし、アプリケーションを Azure に発行します。You'll provision the Azure resources and publish the application to Azure in subsequent steps in the tutorial. Visual Studio から [クラウド内のホスト] チェック ボックスをオンにした状態で App Service Web アプリをプロビジョニングする例については、 ASP.NET と Visual Studio を使用した Azure App Service での Web アプリの使用に関する記事を参照してください。For an example of provisioning an App Service web app from Visual Studio by leaving Host in the cloud checked, see Get started with Web Apps in Azure App Service, using ASP.NET and Visual Studio.

    Select project template

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

ASP.NET MVC アプリケーションの作成Create the ASP.NET MVC application

このセクションでは、データベースからチームの統計情報を読み取って表示する基本的なアプリケーションを作成します。In this section of the tutorial, you'll create the basic application that reads and displays team statistics from a database.

Entity Framework NuGet パッケージの追加Add the Entity Framework NuGet package

  1. [ツール] メニューで [NuGet パッケージ マネージャー][パッケージ マネージャー コンソール] の順にクリックします。Click NuGet Package Manager, Package Manager Console from the Tools menu.
  2. [パッケージ マネージャー コンソール] ウィンドウで、次のコマンドを実行します。Run the following command from the Package Manager Console window.

    Install-Package EntityFramework
    

このパッケージの詳細については、EntityFramework に関する NuGet ページを参照してください。For more information about this package, see the EntityFramework NuGet page.

モデルの追加Add the model

  1. ソリューション エクスプローラーModels フォルダーを右クリックし、[追加][クラス] の順に選択します。Right-click Models in Solution Explorer, and choose Add, Class.

    Add model

  2. クラス名に「 Team 」と入力し、 [追加]をクリックします。Enter Team for the class name and click Add.

    Add model class

  3. Team.cs ファイルの先頭にある using ステートメントを次の using ステートメントに置き換えます。Replace the using statements at the top of the Team.cs file with the following using statements.

    using System;
    using System.Collections.Generic;
    using System.Data.Entity;
    using System.Data.Entity.SqlServer;
    
  4. Team クラスの定義を次のコード スニペットに置き換えます。このコード スニペットでは、更新された Team クラスの定義に加え、その他の Entity Framework の一部のヘルパー クラスの定義が含まれています。Replace the definition of the Team class with the following code snippet that contains an updated Team class definition as well as some other Entity Framework helper classes. このチュートリアルで使用されている Entity Framework の Code First 手法の詳細については、「新しいデータベースの Code First」を参照してください。For more information on the code first approach to Entity Framework that's used in this tutorial, see Code first to a new database.

    public class Team
    {
        public int ID { get; set; }
        public string Name { get; set; }
        public int Wins { get; set; }
        public int Losses { get; set; }
        public int Ties { get; set; }
    
        static public void PlayGames(IEnumerable<Team> teams)
        {
            // Simple random generation of statistics.
            Random r = new Random();
    
            foreach (var t in teams)
            {
                t.Wins = r.Next(33);
                t.Losses = r.Next(33);
                t.Ties = r.Next(0, 5);
            }
        }
    }
    
    public class TeamContext : DbContext
    {
        public TeamContext()
            : base("TeamContext")
        {
        }
    
        public DbSet<Team> Teams { get; set; }
    }
    
    public class TeamInitializer : CreateDatabaseIfNotExists<TeamContext>
    {
        protected override void Seed(TeamContext context)
        {
            var teams = new List<Team>
            {
                new Team{Name="Adventure Works Cycles"},
                new Team{Name="Alpine Ski House"},
                new Team{Name="Blue Yonder Airlines"},
                new Team{Name="Coho Vineyard"},
                new Team{Name="Contoso, Ltd."},
                new Team{Name="Fabrikam, Inc."},
                new Team{Name="Lucerne Publishing"},
                new Team{Name="Northwind Traders"},
                new Team{Name="Consolidated Messenger"},
                new Team{Name="Fourth Coffee"},
                new Team{Name="Graphic Design Institute"},
                new Team{Name="Nod Publishers"}
            };
    
            Team.PlayGames(teams);
    
            teams.ForEach(t => context.Teams.Add(t));
            context.SaveChanges();
        }
    }
    
    public class TeamConfiguration : DbConfiguration
    {
        public TeamConfiguration()
        {
            SetExecutionStrategy("System.Data.SqlClient", () => new SqlAzureExecutionStrategy());
        }
    }
    
  5. ソリューション エクスプローラーで、web.config をダブルクリックして開きます。In Solution Explorer, double-click web.config to open it.

    web.config

  6. 次の connectionStrings セクションを追加します。Add the following connectionStrings section. 接続文字列の名前は、Entity Framework のデータベース コンテキスト クラス ( TeamContext) の名前と一致している必要があります。The name of the connection string must match the name of the Entity Framework database context class which is TeamContext.

    <connectionStrings>
        <add name="TeamContext" connectionString="Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\Teams.mdf;Integrated Security=True"     providerName="System.Data.SqlClient" />
    </connectionStrings>
    

    次の例に示すように、configSections の後に続けて、新しい connectionStrings セクションを追加できます。You can add the new connectionStrings section so that it follows configSections, as shown in the following example.

    <configuration>
      <configSections>
        <!-- For more information on Entity Framework configuration, visit http://go.microsoft.com/fwlink/?LinkID=237468 -->
        <section name="entityFramework" type="System.Data.Entity.Internal.ConfigFile.EntityFrameworkSection, EntityFramework, Version=6.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
      </configSections>
      <connectionStrings>
        <add name="TeamContext" connectionString="Data Source=(LocalDB)\MSSQLLocalDB;AttachDbFilename=|DataDirectory|\Teams.mdf;Integrated Security=True"     providerName="System.Data.SqlClient" />
      </connectionStrings>
      ...
    

    注意

    接続文字列は、このチュートリアルの実行に使用されている Visual Studio および SQL Server Express Edition のバージョンによって異なる場合があります。Your connection string may be different depending on the version of Visual Studio and SQL Server Express edition used to complete the tutorial. web.config テンプレートは、インストールされているバージョンに一致するように構成する必要があります。また、(LocalDB)\v11.0 (SQL Server Express 2012 の場合) や Data Source=(LocalDB)\MSSQLLocalDB (SQL Server Express 2014 以降の場合) などの Data Source エントリを含めることができます。The web.config template should be configured to match your installation, and may contain Data Source entries like (LocalDB)\v11.0 (from SQL Server Express 2012) or Data Source=(LocalDB)\MSSQLLocalDB (from SQL Server Express 2014 and newer). 接続文字列および SQL Express のバージョンの詳細については、「SQL Server 2016 Express LocalDB」を参照してください。For more information about connection strings and SQL Express versions, see SQL Server 2016 Express LocalDB .

コントローラーの追加Add the controller

  1. F6 キーを押して、プロジェクトをビルドします。Press F6 to build the project.
  2. ソリューション エクスプローラーControllers フォルダーを右クリックし、[追加][コントローラー] の順に選択します。In Solution Explorer, right-click the Controllers folder and choose Add, Controller.

    コントローラーの追加

  3. [Entity Framework を使用した、ビューがある MVC 5 コントローラー] を選択し、[追加] をクリックします。Choose MVC 5 Controller with views, using Entity Framework, and click Add. [追加]をクリックした後にエラーが発生する場合は、先にプロジェクトをビルド済みであることを確認してください。If you get an error after clicking Add, ensure that you have built the project first.

    Add controller class

  4. [モデル クラス] ボックスの一覧から [Team (ContosoTeamStats.Models)] を選択します。Select Team (ContosoTeamStats.Models) from the Model class drop-down list. [データ コンテキスト クラス] ボックスの一覧から [TeamContext (ContosoTeamStats.Models)] を選択します。Select TeamContext (ContosoTeamStats.Models) from the Data context class drop-down list. [コントローラー名] ボックスに「TeamsController」と入力します (自動的に入力されなかった場合)。Type TeamsController in the Controller name textbox (if it is not automatically populated). [追加] をクリックしてコントローラー クラスを作成し、既定のビューを追加します。Click Add to create the controller class and add the default views.

    Configure controller

  5. ソリューション エクスプローラーGlobal.asax を展開し、Global.asax.cs をダブルクリックして開きます。In Solution Explorer, expand Global.asax and double-click Global.asax.cs to open it.

    Global.asax.cs

  6. ファイルの上部に次の 2 つの using ステートメントを、他の using ステートメントに続けて追加します。Add the following two using statements at the top of the file under the other using statements.

    using System.Data.Entity;
    using ContosoTeamStats.Models;
    
  7. Application_Start メソッドの最後に次のコード行を追加します。Add the following line of code at the end of the Application_Start method.

    Database.SetInitializer<TeamContext>(new TeamInitializer());
    
  8. ソリューション エクスプローラーApp_Start を展開し、RouteConfig.cs をダブルクリックします。In Solution Explorer, expand App_Start and double-click RouteConfig.cs.

    RouteConfig.cs

  9. RegisterRoutes メソッドに含まれる次のコードの controller = "Home" を、次の例に示すように controller = "Teams" に置き換えます。Replace controller = "Home" in the following code in the RegisterRoutes method with controller = "Teams" as shown in the following example.

    routes.MapRoute(
        name: "Default",
        url: "{controller}/{action}/{id}",
        defaults: new { controller = "Teams", action = "Index", id = UrlParameter.Optional }
    );
    

ビューの構成Configure the views

  1. ソリューション エクスプローラーViews フォルダー、Shared フォルダーを順に展開し、_Layout.cshtml をダブルクリックします。In Solution Explorer, expand the Views folder and then the Shared folder, and double-click _Layout.cshtml.

    _Layout.cshtml

  2. 次の例のように title 要素の内容を変更し、My ASP.NET ApplicationContoso Team Stats に置き換えます。Change the contents of the title element and replace My ASP.NET Application with Contoso Team Stats as shown in the following example.

    <title>@ViewBag.Title - Contoso Team Stats</title>
    
  3. body セクションで、最初の Html.ActionLink ステートメントを更新します。Application nameContoso Team Stats に、HomeTeams に置き換えてください。In the body section, update the first Html.ActionLink statement and replace Application name with Contoso Team Stats and replace Home with Teams.

    • 変更前: @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })Before: @Html.ActionLink("Application name", "Index", "Home", new { area = "" }, new { @class = "navbar-brand" })
    • 変更後: @Html.ActionLink("Contoso Team Stats", "Index", "Teams", new { area = "" }, new { @class = "navbar-brand" })After: @Html.ActionLink("Contoso Team Stats", "Index", "Teams", new { area = "" }, new { @class = "navbar-brand" })

      コードの変更

  4. Ctrl + F5 キーを押してアプリケーションをビルドし、実行します。Press Ctrl+F5 to build and run the application. このバージョンのアプリケーションは、データベースから直接結果を読み取ります。This version of the application reads the results directly from the database. [Entity Framework を使用した、ビューがある MVC 5 コントローラー] スキャフォールディングによってアプリケーションに自動的に追加された [新規作成][編集][詳細][削除] の各アクションに注目してください。Note the Create New, Edit, Details, and Delete actions that were automatically added to the application by the MVC 5 Controller with views, using Entity Framework scaffold. 次のセクションでは、Redis Cache を追加してデータへのアクセスを効率化し、アプリケーションに機能を追加します。In the next section of the tutorial you'll add Redis Cache to optimize the data access and provide additional features to the application.

Starter application

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

このセクションでは、 StackExchange.Redis キャッシュ クライアントを使用して、Azure Redis Cache インスタンスで Contoso チームの統計情報を格納したり、取得したりするようにサンプル アプリケーションを構成します。In this section of the tutorial, you'll configure the sample application to store and retrieve Contoso team statistics from an Azure Redis Cache instance by using the StackExchange.Redis cache client.

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

  1. Visual Studio で StackExchange.Redis NuGet パッケージを使用してクライアント アプリケーションを構成するには、[ツール] メニューで [NuGet パッケージ マネージャー][パッケージ マネージャー コンソール] の順にクリックします。To configure a client application in Visual Studio using the StackExchange.Redis NuGet package, click NuGet Package Manager, Package Manager Console from the Tools menu.
  2. [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.

  3. ソリューション エクスプローラーControllers フォルダーを展開し、TeamsController.cs をダブルクリックして開きます。In Solution Explorer, expand the Controllers folder and double-click TeamsController.cs to open it.

    Teams controller

  4. 次の 2 つの using ステートメントを TeamsController.cs に追加します。Add the following two using statements to TeamsController.cs.

    using System.Configuration;
    using StackExchange.Redis;
    
  5. 次の 2 つのプロパティを TeamsController クラスに追加します。Add the following two properties to the TeamsController class.

    // Redis Connection string info
    private static Lazy<ConnectionMultiplexer> lazyConnection = new Lazy<ConnectionMultiplexer>(() =>
    {
        string cacheConnection = ConfigurationManager.AppSettings["CacheConnection"].ToString();
        return ConnectionMultiplexer.Connect(cacheConnection);
    });
    
    public static ConnectionMultiplexer Connection
    {
        get
        {
            return lazyConnection.Value;
        }
    }
    
  6. コンピューター上に WebAppPlusCacheAppSecrets.config という名前のファイルを作成し、サンプル アプリケーションのソース コードでチェックインされない場所に配置します (どこかにチェックインすることを決めた場合)。Create a file on your computer named WebAppPlusCacheAppSecrets.config and place it in a location that won't be checked in with the source code of your sample application, should you decide to check it in somewhere. この例では、AppSettingsSecrets.config ファイルを C:\AppSecrets\WebAppPlusCacheAppSecrets.config に配置しています。In this example the AppSettingsSecrets.config file is located at C:\AppSecrets\WebAppPlusCacheAppSecrets.config.

    WebAppPlusCacheAppSecrets.config ファイルを編集し、次の内容を追加します。Edit the WebAppPlusCacheAppSecrets.config file and add the following contents. この情報は、アプリケーションをローカルで実行する場合に、Azure Redis Cache インスタンスへの接続に使用されます。If you run the application locally this information is used to connect to your Azure Redis Cache instance. このチュートリアルの後半で、Azure Redis Cache インスタンスをプロビジョニングし、キャッシュの名前とパスワードを更新します。Later in the tutorial you'll provision an Azure Redis Cache instance and update the cache name and password. Azure にデプロイした場合、キャッシュ接続情報は、このファイルからではなく Web アプリのアプリケーション設定から取得されます。したがってサンプル アプリケーションをローカルで実行することを予定していない場合は、このファイルの作成およびこのファイルを参照する後続の手順を省略してかまいません。If you don't plan to run the sample application locally you can skip the creation of this file and the subsequent steps that reference the file, because when you deploy to Azure the application retrieves the cache connection information from the app setting for the Web App and not from this file. WebAppPlusCacheAppSecrets.config は、アプリケーションと一緒に Azure にデプロイするものではないため、アプリケーションをローカルで実行する場合以外は必要ありません。Since the WebAppPlusCacheAppSecrets.config is not deployed to Azure with your application, you don't need it unless you are going to run the application locally.

    <appSettings>
      <add key="CacheConnection" value="MyCache.redis.cache.windows.net,abortConnect=false,ssl=true,password=..."/>
    </appSettings>
    
  7. ソリューション エクスプローラーで、web.config をダブルクリックして開きます。In Solution Explorer, double-click web.config to open it.

    web.config

  8. 次の file 属性を appSettings 要素に追加します。Add the following file attribute to the appSettings element. 異なるファイル名または場所を使用した場合は、この例の値を実際の値で置き換えてください。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\WebAppPlusCacheAppSecrets.config">After: <appSettings file="C:\AppSecrets\WebAppPlusCacheAppSecrets.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 にデプロイするときに、WebAppPlusCacheAppSecrests.config ファイルはデプロイされません (それが目的です)。When you deploy your web app to Azure, the WebAppPlusCacheAppSecrests.config file won't be deployed (that's what you want). Azure には、これらのシークレットを指定する方法がいくつかあります。このチュートリアルでは、以降の手順で Azure リソースをプロビジョニングするときに自動的にシークレットが構成されます。There are several ways to specify these secrets in Azure, and in this tutorial they are configured automatically for you when you provision the Azure resources in a subsequent tutorial step. Azure におけるシークレットの扱いの詳細については、「Best practices for deploying passwords and other sensitive data to ASP.NET and Azure App Service (ASP.NET および Azure App Service にパスワードや機密データをデプロイするためのベスト プラクティス)」を参照してください。For more information about working with secrets in Azure, see Best practices for deploying passwords and other sensitive data to ASP.NET and Azure App Service.

キャッシュまたはデータベースから結果を返すように TeamsController クラスを更新するUpdate the TeamsController class to return results from the cache or the database

このサンプルでは、データベースまたはキャッシュから、チームの統計情報を取得できます。In this sample, team statistics can be retrieved from the database or from the cache. チームの統計情報は、シリアル化された List<Team>としてキャッシュに格納されるほか、Redis のデータ型を使用してソート済みセットとして格納されます。Team statistics are stored in the cache as a serialized List<Team>, and also as a sorted set using Redis data types. ソート済みセットから項目を取得するときは、一部または全部の項目を対象にできるほか、特定の項目を照会することもできます。When retrieving items from a sorted set, you can retrieve some, all, or query for certain items. このサンプルでは、勝利数のランキングで上位 5 チームをソート済みセットに対して照会します。In this sample you'll query the sorted set for the top 5 teams ranked by number of wins.

注意

Azure Redis Cache を使用するためにチームの統計情報を複数の形式でキャッシュに格納する必要はありません。It is not required to store the team statistics in multiple formats in the cache in order to use Azure Redis Cache. このチュートリアルでは、データをキャッシュする際に使用できる各種の方法とデータ型を例示するために、複数の形式を使用しています。This tutorial uses multiple formats to demonstrate some of the different ways and different data types you can use to cache data.

  1. TeamsController.cs ファイルの他の using ステートメントの先頭に、次の using ステートメントを追加します。Add the following using statements to the TeamsController.cs file at the top with the other using statements.

    using System.Diagnostics;
    using Newtonsoft.Json;
    
  2. 現在の public ActionResult Index() メソッドの実装を次の実装に置き換えます。Replace the current public ActionResult Index() method implementation with the following implementation.

    // GET: Teams
    public ActionResult Index(string actionType, string resultType)
    {
        List<Team> teams = null;
    
        switch(actionType)
        {
            case "playGames": // Play a new season of games.
                PlayGames();
                break;
    
            case "clearCache": // Clear the results from the cache.
                ClearCachedTeams();
                break;
    
            case "rebuildDB": // Rebuild the database with sample data.
                RebuildDB();
                break;
        }
    
        // Measure the time it takes to retrieve the results.
        Stopwatch sw = Stopwatch.StartNew();
    
        switch(resultType)
        {
            case "teamsSortedSet": // Retrieve teams from sorted set.
                teams = GetFromSortedSet();
                break;
    
            case "teamsSortedSetTop5": // Retrieve the top 5 teams from the sorted set.
                teams = GetFromSortedSetTop5();
                break;
    
            case "teamsList": // Retrieve teams from the cached List<Team>.
                teams = GetFromList();
                break;
    
            case "fromDB": // Retrieve results from the database.
            default:
                teams = GetFromDB();
                break;
        }
    
        sw.Stop();
        double ms = sw.ElapsedTicks / (Stopwatch.Frequency / (1000.0));
    
        // Add the elapsed time of the operation to the ViewBag.msg.
        ViewBag.msg += " MS: " + ms.ToString();
    
        return View(teams);
    }
    
  3. 以下の 3 つのメソッドを TeamsController クラスに追加して、前のコード スニペットで追加した switch ステートメントにある 3 種類のアクション (playGamesclearCacherebuildDB) を実装します。Add the following three methods to the TeamsController class to implement the playGames, clearCache, and rebuildDB action types from the switch statement added in the previous code snippet.

    PlayGames メソッドは、あるシーズンのゲームをシミュレートすることでチームの統計情報を更新し、結果をデータベースに保存して、古くなったデータをキャッシュから消去します。The PlayGames method updates the team statistics by simulating a season of games, saves the results to the database, and clears the now outdated data from the cache.

    void PlayGames()
    {
        ViewBag.msg += "Updating team statistics. ";
        // Play a "season" of games.
        var teams = from t in db.Teams
                    select t;
    
        Team.PlayGames(teams);
    
        db.SaveChanges();
    
        // Clear any cached results
        ClearCachedTeams();
    }
    

    RebuildDB メソッドは、既定で存在する一連のチームでデータベースを再初期化してその統計情報を生成し、古くなったデータをキャッシュから消去します。The RebuildDB method reinitializes the database with the default set of teams, generates statistics for them, and clears the now outdated data from the cache.

    void RebuildDB()
    {
        ViewBag.msg += "Rebuilding DB. ";
        // Delete and re-initialize the database with sample data.
        db.Database.Delete();
        db.Database.Initialize(true);
    
        // Clear any cached results
        ClearCachedTeams();
    }
    

    ClearCachedTeams メソッドは、キャッシュされているチームの統計情報をキャッシュから削除します。The ClearCachedTeams method removes any cached team statistics from the cache.

    void ClearCachedTeams()
    {
        IDatabase cache = Connection.GetDatabase();
        cache.KeyDelete("teamsList");
        cache.KeyDelete("teamsSortedSet");
        ViewBag.msg += "Team data removed from cache. ";
    } 
    
  4. キャッシュやデータベースからチームの統計情報を取得する各種の方法を実装するために、以下の 4 つのメソッドを TeamsController クラスに追加します。Add the following four methods to the TeamsController class to implement the various ways of retrieving the team statistics from the cache and the database. いずれのメソッドも戻り値は List<Team> で、それがビューに表示されます。Each of these methods returns a List<Team> which is then displayed by the view.

    GetFromDB メソッドは、データベースからチームの統計情報を読み取ります。The GetFromDB method reads the team statistics from the database.

    List<Team> GetFromDB()
    {
        ViewBag.msg += "Results read from DB. ";
        var results = from t in db.Teams
            orderby t.Wins descending
            select t; 
    
        return results.ToList<Team>();
    }
    

    GetFromList メソッドは、シリアル化された List<Team> としてチームの統計情報をキャッシュから読み取ります。The GetFromList method reads the team statistics from cache as a serialized List<Team>. キャッシュ ミスが発生した場合は、データベースからチームの統計情報を読み取り、次回使用できるようキャッシュに格納します。If there is a cache miss, the team statistics are read from the database and then stored in the cache for next time. このサンプルでキャッシュとの間でやり取りされる .NET オブジェクトのシリアル化には、JSON.NET シリアル化を使用しています。In this sample we're using JSON.NET serialization to serialize the .NET objects to and from the cache. 詳細については、 Azure Redis Cache における .NET オブジェクトの使用方法に関するセクションを参照してください。For more information, see How to work with .NET objects in Azure Redis Cache.

    List<Team> GetFromList()
    {
        List<Team> teams = null;
    
        IDatabase cache = Connection.GetDatabase();
        string serializedTeams = cache.StringGet("teamsList");
        if (!String.IsNullOrEmpty(serializedTeams))
        {
            teams = JsonConvert.DeserializeObject<List<Team>>(serializedTeams);
    
            ViewBag.msg += "List read from cache. ";
        }
        else
        {
            ViewBag.msg += "Teams list cache miss. ";
            // Get from database and store in cache
            teams = GetFromDB();
    
            ViewBag.msg += "Storing results to cache. ";
            cache.StringSet("teamsList", JsonConvert.SerializeObject(teams));
        }
        return teams;
    }
    

    GetFromSortedSet メソッドは、キャッシュされたソート済みセットからチームの統計情報を読み取ります。The GetFromSortedSet method reads the team statistics from a cached sorted set. キャッシュ ミスが発生した場合は、データベースからチームの統計情報を読み取り、ソート済みセットとしてキャッシュに格納します。If there is a cache miss, the team statistics are read from the database and stored in the cache as a sorted set.

    List<Team> GetFromSortedSet()
    {
        List<Team> teams = null;
        IDatabase cache = Connection.GetDatabase();
        // If the key teamsSortedSet is not present, this method returns a 0 length collection.
        var teamsSortedSet = cache.SortedSetRangeByRankWithScores("teamsSortedSet", order: Order.Descending);
        if (teamsSortedSet.Count() > 0)
        {
            ViewBag.msg += "Reading sorted set from cache. ";
            teams = new List<Team>();
            foreach (var t in teamsSortedSet)
            {
                Team tt = JsonConvert.DeserializeObject<Team>(t.Element);
                teams.Add(tt);
            }
        }
        else
        {
            ViewBag.msg += "Teams sorted set cache miss. ";
    
            // Read from DB
            teams = GetFromDB();
    
            ViewBag.msg += "Storing results to cache. ";
            foreach (var t in teams)
            {
                Console.WriteLine("Adding to sorted set: {0} - {1}", t.Name, t.Wins);
                cache.SortedSetAdd("teamsSortedSet", JsonConvert.SerializeObject(t), t.Wins);
            }
        }
        return teams;
    }
    

    GetFromSortedSetTop5 メソッドは、キャッシュされたソート済みセットから上位 5 チームを読み取ります。The GetFromSortedSetTop5 method reads the top 5 teams from the cached sorted set. 最初に、 teamsSortedSet キーがキャッシュに存在するかどうかをチェックします。It starts by checking the cache for the existence of the teamsSortedSet key. このキーが存在しない場合は、 GetFromSortedSet メソッドが呼び出され、チームの統計情報を読み取り、キャッシュに格納します。If this key is not present, the GetFromSortedSet method is called to read the team statistics and store them in the cache. 次に、キャッシュされたソート済みセットから上位 5 チームを照会して返します。Next, the cached sorted set is queried for the top 5 teams which are returned.

    List<Team> GetFromSortedSetTop5()
    {
        List<Team> teams = null;
        IDatabase cache = Connection.GetDatabase();
    
        // If the key teamsSortedSet is not present, this method returns a 0 length collection.
        var teamsSortedSet = cache.SortedSetRangeByRankWithScores("teamsSortedSet", stop: 4, order: Order.Descending);
        if(teamsSortedSet.Count() == 0)
        {
            // Load the entire sorted set into the cache.
            GetFromSortedSet();
    
            // Retrieve the top 5 teams.
            teamsSortedSet = cache.SortedSetRangeByRankWithScores("teamsSortedSet", stop: 4, order: Order.Descending);
        }
    
        ViewBag.msg += "Retrieving top 5 teams from cache. ";
        // Get the top 5 teams from the sorted set
        teams = new List<Team>();
        foreach (var team in teamsSortedSet)
        {
            teams.Add(JsonConvert.DeserializeObject<Team>(team.Element));
        }
        return teams;
    }
    

キャッシュと連動するように Create、Edit、Delete の各メソッドを更新するUpdate the Create, Edit, and Delete methods to work with the cache

このサンプルの過程で生成されたスキャフォールディング コードには、チームの追加、編集、削除を行うメソッドが含まれています。The scaffolding code that was generated as part of this sample includes methods to add, edit, and delete teams. キャッシュ内のデータは、チームが追加、編集、削除されるたびに古くなります。Anytime a team is added, edited, or removed, the data in the cache becomes outdated. このセクションでは、キャッシュされたチームを消去することによってキャッシュとデータベースの同期状態を維持するように、この 3 つのメソッドに変更を加えます。In this section you'll modify these three methods to clear the cached teams so that the cache won't be out of sync with the database.

  1. TeamsController クラスの Create(Team team) メソッドに移動します。Browse to the Create(Team team) method in the TeamsController class. 次の例のように、 ClearCachedTeams メソッドの呼び出しを追加します。Add a call to the ClearCachedTeams method, as shown in the following example.

    // POST: Teams/Create
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Create([Bind(Include = "ID,Name,Wins,Losses,Ties")] Team team)
    {
        if (ModelState.IsValid)
        {
            db.Teams.Add(team);
            db.SaveChanges();
            // When a team is added, the cache is out of date.
            // Clear the cached teams.
            ClearCachedTeams();
            return RedirectToAction("Index");
        }
    
        return View(team);
    }
    
  2. TeamsController クラスの Edit(Team team) メソッドに移動します。Browse to the Edit(Team team) method in the TeamsController class. 次の例のように、 ClearCachedTeams メソッドの呼び出しを追加します。Add a call to the ClearCachedTeams method, as shown in the following example.

    // POST: Teams/Edit/5
    // To protect from overposting attacks, please enable the specific properties you want to bind to, for 
    // more details see http://go.microsoft.com/fwlink/?LinkId=317598.
    [HttpPost]
    [ValidateAntiForgeryToken]
    public ActionResult Edit([Bind(Include = "ID,Name,Wins,Losses,Ties")] Team team)
    {
        if (ModelState.IsValid)
        {
            db.Entry(team).State = EntityState.Modified;
            db.SaveChanges();
            // When a team is edited, the cache is out of date.
            // Clear the cached teams.
            ClearCachedTeams();
            return RedirectToAction("Index");
        }
        return View(team);
    }
    
  3. TeamsController クラスの DeleteConfirmed(int id) メソッドに移動します。Browse to the DeleteConfirmed(int id) method in the TeamsController class. 次の例のように、 ClearCachedTeams メソッドの呼び出しを追加します。Add a call to the ClearCachedTeams method, as shown in the following example.

    // POST: Teams/Delete/5
    [HttpPost, ActionName("Delete")]
    [ValidateAntiForgeryToken]
    public ActionResult DeleteConfirmed(int id)
    {
        Team team = db.Teams.Find(id);
        db.Teams.Remove(team);
        db.SaveChanges();
        // When a team is deleted, the cache is out of date.
        // Clear the cached teams.
        ClearCachedTeams();
        return RedirectToAction("Index");
    }
    

キャッシュと連動するように Teams Index ビューを更新するUpdate the Teams Index view to work with the cache

  1. ソリューション エクスプローラーで、Views フォルダー、Teams フォルダーの順に展開し、Index.cshtml をダブルクリックします。In Solution Explorer, expand the Views folder, then the Teams folder, and double-click Index.cshtml.

    Index.cshtml

  2. ファイルの上部付近から次の段落要素を探します。Near the top of the file, look for the following paragraph element.

    Action table

    これは、新しいチームを作成するためのリンクです。This is the link to create a new team. 段落要素を以下の表に置き換えます。Replace the paragraph element with the following table. この表には、新しいチームの作成、新しいシーズンのゲーム プレイ、キャッシュの消去、各種形式でのキャッシュからのチーム取得、データベースからのチームの取得、新しいサンプル データでのデータベースの再構築を行うためのアクション リンクが含まれています。This table has action links for creating a new team, playing a new season of games, clearing the cache, retrieving the teams from the cache in several formats, retrieving the teams from the database, and rebuilding the database with fresh sample data.

    <table class="table">
        <tr>
            <td>
                @Html.ActionLink("Create New", "Create")
            </td>
            <td>
                @Html.ActionLink("Play Season", "Index", new { actionType = "playGames" })
            </td>
            <td>
                @Html.ActionLink("Clear Cache", "Index", new { actionType = "clearCache" })
            </td>
            <td>
                @Html.ActionLink("List from Cache", "Index", new { resultType = "teamsList" })
            </td>
            <td>
                @Html.ActionLink("Sorted Set from Cache", "Index", new { resultType = "teamsSortedSet" })
            </td>
            <td>
                @Html.ActionLink("Top 5 Teams from Cache", "Index", new { resultType = "teamsSortedSetTop5" })
            </td>
            <td>
                @Html.ActionLink("Load from DB", "Index", new { resultType = "fromDB" })
            </td>
            <td>
                @Html.ActionLink("Rebuild DB", "Index", new { actionType = "rebuildDB" })
            </td>
        </tr>    
    </table>
    
  3. Index.cshtml ファイルの一番下までスクロールし、次の tr 要素を追加します。これが、ファイル内の最後のテーブルの最終行となります。Scroll to the bottom of the Index.cshtml file and add the following tr element so that it is the last row in the last table in the file.

    <tr><td colspan="5">@ViewBag.Msg</td></tr>
    

    この行は、ViewBag.Msg の値を表示します。これには、現在の操作に関する状態レポートが含まれています。This row displays the value of ViewBag.Msg which contains a status report about the current operation. ViewBag.Msg は、前の手順のいずれかのアクション リンクをクリックしたときに設定されます。The ViewBag.Msg is set when you click any of the action links from the previous step.

    Status message

  4. F6 キーを押して、プロジェクトをビルドします。Press F6 to build the project.

Azure リソースのプロビジョニングProvision the Azure resources

Azure でアプリケーションをホストするにはまず、アプリケーションに必要な Azure サービスをプロビジョニングする必要があります。To host your application in Azure, you must first provision the Azure services that your application requires. このチュートリアルのサンプル アプリケーションでは、次の Azure サービスを使用します。The sample application in this tutorial uses the following Azure services.

  • Azure Redis CacheAzure Redis Cache
  • App Service Web AppsApp Service Web App
  • SQL DatabaseSQL Database

新しいリソース グループまたは既存のリソース グループにこれらのサービスをデプロイするには、次の [Deploy to Azure (Azure へのデプロイ)] ボタンをクリックします。To deploy these services to a new or existing resource group of your choice, click the following Deploy to Azure button.

Azure へのデプロイDeploy to Azure

この [Deploy to Azure (Azure へのデプロイ)] ボタンは、Web アプリと Redis Cache と SQL Database を作成する Azure クイック スタート テンプレートを使用して、これらのサービスをプロビジョニングし、SQL Database の接続文字列を設定して、Azure Redis Cache 接続文字列のアプリケーション設定を行います。This Deploy to Azure button uses the Create a Web App plus Redis Cache plus SQL Database Azure Quickstart template to provision these services and set the connection string for the SQL Database and the application setting for the Azure Redis Cache connection string.

注意

Azure アカウントがない場合は、数分で 無料の Azure アカウントを作成 できます。If you don't have an Azure account, you can create a free Azure account in just a couple of minutes.

[Deploy to Azure (Azure へのデプロイ)] ボタンをクリックすると、Azure ポータルが開き、テンプレートによって記述されたリソースの作成プロセスが開始されます。Clicking the Deploy to Azure button takes you to the Azure portal and initiates the process of creating the resources described by the template.

Azure へのデプロイ

  1. [基本] セクションで、使用する Azure サブスクリプションを選択し、既存のリソース グループを選択するか新しいリソース グループを作成して、リソース グループの場所を指定します。In the Basics section, select the Azure subscription to use, and select an existing resource group or create a new one, and specify the resource group location.
  2. [設定] セクションで、管理者のログイン (admin は使用しないでください)、管理者のログイン パスワードデータベース名を指定します。In the Settings section, specify an Administrator Login (don't use admin), Administrator Login Password, and Database Name. その他のパラメーターは、Free App Service ホスティング プランを使用するように構成し、Free レベルに付属しない SQL Database と Azure Redis Cache については、コストを低く抑えるように設定しています。The other parameters are configured for a free App Service hosting plan, and lower-cost options for the SQL Database and Azure Redis Cache, which don't come with a free tier.

    Azure へのデプロイ

  3. 目的の設定を構成した後、ページの末尾までスクロールし、使用条件を読んで、[上記の使用条件に同意する] チェック ボックスをオンにします。After configuring the desired settings, scroll to the end of the page, read the terms and conditions, and check the I agree to the terms and conditions stated above checkbox.

  4. リソースのプロビジョニングを開始するには、[購入] をクリックします。To begin provisioning the resources, click Purchase.

デプロイの進行状況を表示するには、通知アイコンをクリックし、 [デプロイが開始されました]をクリックします。To view the progress of your deployment, click the notification icon and click Deployment started.

[デプロイが開始されました]

デプロイのステータスは、 [Microsoft.Template] ブレードで確認できます。You can view the status of your deployment on the Microsoft.Template blade.

[Deploy to Azure (Azure へのデプロイ)]

プロビジョニングが完了したら、Visual Studio から Azure にアプリケーションを発行できます。When provisioning is complete, you can publish your application to Azure from Visual Studio.

注意

プロビジョニング処理中になんらかのエラーが発生した場合は、 [Microsoft.Template] ブレードに表示されます。Any errors that may occur during the provisioning process are displayed on the Microsoft.Template blade. 一般に、サブスクリプションあたりの Free App Service ホスティング プランが多すぎたり SQL Server が多すぎたりすることが原因でエラーが発生します。Common errors are too many SQL Servers or too many Free App Service hosting plans per subscription. エラーを解決し、[Microsoft.Template] ブレードの [再デプロイ] またはこのチュートリアルの [Deploy to Azure (Azure へのデプロイ)] ボタンをクリックして処理を再開してください。Resolve any errors and restart the process by clicking Redeploy on the Microsoft.Template blade or the Deploy to Azure button in this tutorial.

Azure へのアプリケーションの発行Publish the application to Azure

この手順ではアプリケーションを Azure に発行し、クラウドで実行します。In this step of the tutorial, you'll publish the application to Azure and run it in the cloud.

  1. Visual Studio で ContosoTeamStats プロジェクトを右クリックし、[発行] を選択します。Right-click the ContosoTeamStats project in Visual Studio and choose Publish.

    [発行]

  2. [Microsoft Azure App Service] をクリックし、[既存のものを選択] を選択して、[発行] をクリックします。Click Microsoft Azure App Service, choose Select Existing, and click Publish.

    [発行]

  3. Azure リソースを作成するときに使用したサブスクリプションを選択し、そのリソースが含まれているリソース グループを展開して、目的の Web アプリを選択します。Select the subscription used when creating the Azure resources, expand the resource group containing the resources, and select the desired Web App. [Deploy to Azure (Azure へのデプロイ)] ボタンを使用した場合、Web アプリの名前は webSite から始まります。If you used the Deploy to Azure button your Web App name starts with webSite followed by some additional characters.

    Select Web App

  4. [OK] をクリックして発行プロセスを開始します。Click OK to begin the publishing process. しばらくすると発行プロセスが完了し、ブラウザーが起動してサンプル アプリケーションが実行されます。After a few moments the publishing process completes and a browser is launched with the running sample application. 検証時または発行時に DNS エラーが発生した場合で、かつアプリケーションに必要な Azure リソースのプロビジョニング プロセスが完了した直後である場合は、しばらく待ってからもう一度実行してください。If you get a DNS error when validating or publishing, and the provisioning process for the Azure resources for the application has just recently completed, wait a moment and try again.

    Cache added

次の表は、サンプル アプリケーションの各アクション リンクとその説明を一覧にしたものです。The following table describes each action link from the sample application.

アクションAction 説明Description
新規作成Create New 新しいチームを作成します。Create a new Team.
Play SeasonPlay Season ゲームのシーズンを再生し、チームの統計情報を更新して、キャッシュに格納されている古いチーム データがあれば消去します。Play a season of games, update the team stats, and clear any outdated team data from the cache.
Clear CacheClear Cache チームの統計情報をキャッシュから消去します。Clear the team stats from the cache.
List from CacheList from Cache チームの統計情報をキャッシュから取得します。Retrieve the team stats from the cache. キャッシュ ミスが発生した場合は、統計情報をデータベースから読み込んで、次回使用できるようキャッシュに保存します。If there is a cache miss, load the stats from the database and save to the cache for next time.
Sorted Set from CacheSorted Set from Cache ソート済みセットを使用してキャッシュからチームの統計情報を取得します。Retrieve the team stats from the cache using a sorted set. キャッシュ ミスが発生した場合は、統計情報をデータベースから読み込み、ソート済みセットを使用してキャッシュに保存します。If there is a cache miss, load the stats from the database and save to the cache using a sorted set.
Top 5 Teams from CacheTop 5 Teams from Cache ソート済みセットを使用してキャッシュから上位 5 チームを取得します。Retrieve the top 5 teams from the cache using a sorted set. キャッシュ ミスが発生した場合は、統計情報をデータベースから読み込み、ソート済みセットを使用してキャッシュに保存します。If there is a cache miss, load the stats from the database and save to the cache using a sorted set.
Load from DBLoad from DB チームの統計情報をデータベースから取得します。Retrieve the team stats from the database.
Rebuild DBRebuild DB データベースを再構築し、サンプル チーム データを再度読み込みます。Rebuild the database and reload it with sample team data.
Edit / Details / DeleteEdit / Details / Delete チームの編集、詳細表示、削除を実行します。Edit a team, view details for a team, delete a team.

いくつかのアクションをクリックし、各種のソースからデータを取得してみてください。Click some of the actions and experiment with retrieving the data from the different sources. それぞれの方法で、データベースやキャッシュからデータを取得するのにかかる時間の違いをよく観察してください。Not the differences in the time it takes to complete the various ways of retrieving the data from the database and the cache.

アプリケーションを使い終わったときにリソースを削除するDelete the resources when you are finished with the application

チュートリアルのサンプル アプリケーションを使い終わったら、コストとリソースを節約するために Azure リソースを削除しましょう。When you are finished with the sample tutorial application, you can delete the Azure resources used in order to conserve cost and resources. Azure リソースのプロビジョニング 」セクションの [Deploy to Azure (Azure へのデプロイ)] ボタンを使用し、すべてのリソースが同じリソース グループに属している場合は、リソース グループを削除することにより、それらを 1 回の操作でまとめて削除できます。If you use the Deploy to Azure button in the Provision the Azure resources section and all of your resources are contained in the same resource group, you can delete them together in one operation by deleting the resource group.

  1. Azure ポータル にサインインし、 [リソース グループ]をクリックします。Sign in to the Azure portal and click Resource groups.
  2. リソース グループの名前を [フィルター項目] ボックスに入力します。Type the name of your resource group into the Filter items... textbox.
  3. リソース グループの右側にある [...] をクリックします。Click ... to the right of your resource group.
  4. [ 削除] をクリックします。Click Delete.

    削除

  5. リソース グループの名前を入力して [削除]をクリックします。Type the name of your resource group and click Delete.

    削除の確定

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

重要

いったん削除したリソース グループを元に戻すことはできません。リソース グループとそこに存在するすべてのリソースは完全に削除されるので注意が必要です。Note that 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, you can delete each resource individually from their respective blades.

サンプル アプリケーションをローカル コンピューターで実行するRun the sample application on your local machine

アプリケーションをローカル コンピューターから実行するには、データのキャッシュ先となる Azure Redis Cache インスタンスが必要となります。To run the application locally on your machine, you need an Azure Redis Cache instance in which to cache your data.

  • 前セクションで説明した手順に従ってアプリケーションを Azure に発行した場合は、その過程でプロビジョニングした Azure Redis Cache インスタンスを使用できます。If you have published your application to Azure as described in the previous section, you can use the Azure Redis Cache instance that was provisioned during that step.
  • 既存の Azure Redis Cache インスタンスが他にも存在する場合、そのインスタンスを使用してこのサンプルをローカルで実行できます。If you have another existing Azure Redis Cache instance, you can use that to run this sample locally.
  • Azure Redis Cache インスタンスを作成する必要がある場合は、「 キャッシュの作成」の手順に従ってください。If you need to create an Azure Redis Cache instance, you can follow the steps in Create a cache.

使用するキャッシュを選択または作成したら、Azure Portal でそのキャッシュの保存先を参照し、キャッシュのホスト名アクセス キーを取得します。Once you have selected or created the cache to use, browse to the cache in the Azure portal and retrieve the host name and access keys for your cache. 手順については、「 Redis Cache の設定の構成」を参照してください。For instructions, see Configure Redis cache settings.

  1. このチュートリアルの「Redis Cache を使用するようにアプリケーションを構成する」の手順で作成した WebAppPlusCacheAppSecrets.config ファイルを任意のエディターで開きます。Open the WebAppPlusCacheAppSecrets.config file that you created during the Configure the application to use Redis Cache step of this tutorial using the editor of your choice.
  2. value 属性の MyCache.redis.cache.windows.net を実際のキャッシュのホスト名に置き換え、そのキャッシュのプライマリ キーまたはセカンダリ キーをパスワードとして指定します。Edit the value attribute and replace MyCache.redis.cache.windows.net with the host name of your cache, and specify either the primary or secondary key of your cache as the password.

    <appSettings>
      <add key="CacheConnection" value="MyCache.redis.cache.windows.net,abortConnect=false,ssl=true,password=..."/>
    </appSettings>
    
  3. Ctrl キーを押しながら F5 キーを押して アプリケーションを実行します。Press Ctrl+F5 to run the application.

注意

アプリケーション (データベースを含む) がローカルで実行されているのに対し、Redis Cache は Azure でホストされているので、キャッシュの方がデータベースよりもパフォーマンスが低いように見える場合があります。Note that because the application, including the database, is running locally and the Redis Cache is hosted in Azure, the cache may appear to under-perform the database. パフォーマンスを最大限に引き出すには、クライアント アプリケーションと Azure Redis Cache インスタンスを同じ場所に置いてください。For best performance, the client application and Azure Redis Cache instance should be in the same location.

次のステップNext steps