クイック スタート: ASP.NET Web アプリを作成するQuickstart: Create an ASP.NET web app

はじめに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 by using Visual Studio 2017. このサンプル アプリケーションは、Azure Redis Cache に接続して、キャッシュにデータを格納し、キャッシュからデータを取得します。The sample application connects to Azure Redis Cache to store and retrieve data from the cache. このクイック スタートを完了すると、Azure Redis Cache との間で読み書きを行う Web アプリが完成し、Azure でホストされています。After you finish the quickstart, you'll have a running web app, hosted in Azure, that reads and writes to Azure Redis Cache.

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

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

前提条件Prerequisites

このクイック スタートを完了するには、次の環境で Visual Studio 2017 をインストールする必要があります。To complete the quickstart, you need to install Visual Studio 2017 with the following environments:

  • ASP.NET および Web の開発ASP.NET and web development
  • Azure の開発Azure development

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

  1. Visual Studio を開き、[ファイル] >[新規] > [プロジェクト] の順に選択します。Open Visual Studio, and then and select File >New > Project.

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

    Create project

    a.a. [テンプレート] の一覧で、[Visual C#] ノードを展開します。In the Templates list, expand the Visual C# node.

    b.b. [クラウド] を選択しますSelect Cloud.

    c.c. [ASP.NET Web アプリケーション] を選択します。Select ASP.NET Web Application.

    d.d. .NET Framework 4.5.2 以降が選択されていることを確認します。Verify that .NET Framework 4.5.2 or higher is selected.

    e.e. [名前] ボックスで、プロジェクトに名前を付けます。In the Name box, give the project a name. この例では、ContosoTeamStats という名前を使用しました。For this example, we used ContosoTeamStats.

    f.f. [OK] を選択します。Select OK.

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

  4. [認証] の設定で [認証なし] が指定されていることを確認します。Make sure that No Authentication is specified for the Authentication settings. Visual Studio のバージョンによっては、既定の [認証] が別の設定になっている場合があります。Depending on your version of Visual Studio, the default Authentication setting might be something else. これを変更するには、[認証の変更][認証なし] の順に選択します。To change it, select Change Authentication and then No Authentication.

  5. [OK] を選択してプロジェクトを作成します。Select OK to create the project.

キャッシュの作成Create a cache

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

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

    新しいキャッシュ

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

    SettingSetting 推奨値Suggested value 説明Description
    DNS 名DNS name グローバルに一意の名前Globally unique name キャッシュ名。The cache name. 1 から 63 文字の文字列で、数字、英字、- 文字のみを使用する必要があります。It 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 instance 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 deletes all resources that are 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 that are available for the cache. 詳細については、Azure Redis Cache の概要に関するページを参照してください。For more information, see Azure Redis Cache Overview.
    ダッシュボードにピン留めするPin to dashboard オンSelected 新しいキャッシュをダッシュボードにピン留めし、簡単に見つけられるようにします。Pin the new cache to your dashboard to make it easy to find.

    キャッシュの作成

  3. 新しいキャッシュ設定を構成したら、[作成] を選択します。After the new cache settings are configured, select 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, it shows the status Running, and is ready for use.

    作成されたキャッシュ

Azure portal を使用して、ホスト名、ポート、およびアクセス キーを取得するRetrieve host name, ports, and access keys by 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 might refer to these items by slightly different names. この情報は、Azure Portal で取得できます。You can retrieve this information in the Azure portal.

アクセス キーおよびホスト名を取得するにはTo retrieve the access keys and host name

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

    Azure Redis Cache のキー

  2. ホスト名とポートを取得するには、[プロパティ] を選択します。To retrieve the host name and ports, select Properties.

    Azure Redis Cache のプロパティ

CacheSecrets.config ファイルを編集するにはTo edit the CacheSecrets.config file

  1. コンピューター上に CacheSecrets.config というファイルを作成します。そのファイルをサンプル アプリケーションのソース コードでチェックインされない場所に配置します。Create a file on your computer named CacheSecrets.config. Put 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 at C:\AppSecrets\CacheSecrets.config.

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

    <appSettings>
        <add key="CacheConnection" value="<cache-name>.redis.cache.windows.net,abortConnect=false,ssl=true,password=<access-key>"/>
    </appSettings>
    
  3. <cache-name> は実際のキャッシュ ホスト名に置き換えます。Replace <cache-name> with your cache host name.

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

    ヒント

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

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

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

このセクションでは、Azure Redis Cache に対する簡単なテストを表示する新しいビューをサポートするようにアプリケーションを更新します。In this section, you update the application to support a new view that displays a simple test against 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 deploy this application to Azure. そのときに、アプリケーションがこのファイルの代わりにキャッシュ接続情報の取得に使用するアプリ設定を Azure 内で構成します。At that time, you configure an app setting in Azure that the application uses to retrieve the cache connection information instead of this file.

CacheSecrets.config はアプリケーションと一緒に Azure にデプロイされず、アプリケーションのローカルなテストの間にだけ使われます。Because the file CacheSecrets.config isn't deployed to Azure with your application, you only use it while testing the application locally. キャッシュ データへの不正アクセスを防ぐため、この情報は可能な限り安全に保持してください。Keep this information as secure as possible to prevent malicious access to your cache data.

web.config ファイルを更新するにはTo update the web.config file

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

    web.config

  2. web.config ファイルで <appSetting> 要素を見つけます。In the web.config file, find the <appSetting> element. 次の file 属性を追加します。Then add the following file attribute. 異なるファイル名または場所を使用した場合は、この例の値を実際の値で置き換えてください。If you used a different file name or location, substitute those values for the ones that are 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 can't be found. このアプリケーションのソース コードにシークレット (キャッシュへの接続文字列) は含まれていません。Your secrets (the connection string to your cache) aren't 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 isn't deployed.

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

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

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

    Install-Package StackExchange.Redis
    
  3. クライアント アプリケーションから 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 とレイアウトを更新するにはTo update the HomeController and Layout

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

  2. キャッシュ クライアントとアプリの設定をサポートするために、次の 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;
    
  3. 新しいキャッシュに対していくつかのコマンドを実行する新しい RedisCache アクションをサポートするために、次のメソッドを HomeController クラスに追加します。Add the following method to the HomeController class to support a new RedisCache action that runs 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();
        }
    
  4. ソリューション エクスプローラーで、[ビュー] > [共有] フォルダーを順に展開します。 次に _Layout.cshtml ファイルを開きます。Then open the _Layout.cshtml file.

    置換前のコード:Replace:

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

    を以下に置き換えます。with:

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

新しい RedisCache ビューを追加するにはTo add a new RedisCache view

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

  2. [ビューの追加] ダイアログで、ビューの名前に「RedisCache」と入力します。In the Add View dialog box, enter RedisCache for the View Name. その後、[追加] を選択します。Then select Add.

  3. 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.

アプリをローカルで実行するにはTo run the app locally

  1. Visual Studio で [デバッグ] > [デバッグの開始] の順に選択してアプリをビルドし、テストとデバッグのためにアプリをローカルで起動します。In Visual Studio, select Debug > Start Debugging to build and start the app locally for testing and debugging.

  2. ブラウザーで、ナビゲーション バーの [Azure Redis Cache Test] を選択します。In the browser, select Azure Redis Cache Test on the navigation bar.

  3. 次の例では、以前に Message キーにキャッシュされた値がありました。この値は、ポータルの Azure Redis Cache コンソールを使用して設定されています。In the following example, the Message key previously had a cached value, which was set by using the Azure Redis Cache 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 にデプロイして、クラウドで実行します。After you successfully test the app locally, you can deploy the app to Azure and run it in the cloud.

アプリを Azure に発行するにはTo publish the app to Azure

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

    [発行]

  2. [Microsoft Azure App Service][新規作成][発行] の順に選択します。Select Microsoft Azure App Service, select Create New, and then select Publish.

    App Service に発行する

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

    SettingSetting 推奨値Recommended value 説明Description
    アプリ名App name 既定値を使用します。Use the default. アプリ名は、Azure へのデプロイ時にアプリのホスト名になります。The app name is the host name for the app when it's deployed to Azure. 必要に応じて、名前を一意にするためにタイムスタンプのサフィックスが追加される場合があります。The name might have a timestamp suffix added to it to make it unique if necessary.
    サブスクリプションSubscription Azure サブスクリプションを選択します。Choose your Azure subscription. 関連するホスティング料金は、このサブスクリプションに請求されます。This subscription is charged for any related hosting costs. 複数の Azure サブスクリプションがある場合は、適切なサブスクリプションを選択したことを確認します。If you have multiple Azure subscriptions, verify that the subscription that you want is selected.
    [リソース グループ]Resource group キャッシュを作成したものと同じリソース グループを使います (TestResourceGroup など)。Use the same resource group where you created the cache (for example, TestResourceGroup). リソース グループは、すべてのリソースをグループとして管理するときに便利です。The resource group helps you 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 プランを作成します。Select New, and then 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] ダイアログ ボックス

  4. App Service のホスティング設定を構成したら、[作成] を選択します。After you configure the App Service hosting settings, select Create.

  5. Visual Studio の [出力] ウィンドウを監視して、発行の状態を確認します。Monitor the Output window in Visual Studio to see the publishing status. アプリが発行されると、アプリの URL がログに記録されます。After the app has been published, the URL for the app is logged:

    発行の出力

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

新しいアプリが発行されたら、新しいアプリの設定を追加します。After the new app has been published, add a new app setting. この設定は、キャッシュの接続情報を格納するために使われます。This setting is used to store the cache connection information.

アプリの設定を追加するにはTo add the app setting

  1. Azure portal の上部にある検索バーにアプリ名を入力し、作成した新しいアプリを検索します。Type the app name in the search bar at the top of the Azure portal to find the new app you created.

    アプリを検索する

  2. キャッシュへの接続に使用する 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

ブラウザーで、アプリの URL にアクセスします。In your browser, go to the URL for the app. URL は、Visual Studio 出力ウィンドウの発行操作の結果に表示されます。The URL appears in the results of the publishing operation in the Visual Studio output window. Azure portal の作成したアプリの [概要] ページにも表示されます。It's also provided in the Azure portal on the overview page of the app you created.

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

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

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

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

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

重要

リソース グループを削除すると、元に戻すことができません。Deleting a resource group is irreversible. リソース グループを削除すると、そのリソース グループ内のすべてのリソースは完全に削除されます。When you delete a resource group, 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.

リソース グループを削除するにはTo delete a resource group

  1. Azure portal にサインインし、 [リソース グループ] を選択します。Sign in to the Azure portal, and then select Resource groups.

  2. [名前でフィルター] ボックスにリソース グループの名前を入力します。In the Filter by name... box, 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 results list, select ..., and then select Delete resource group.

    Delete

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

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

次の手順Next steps

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