チュートリアル: Azure App Service Web アプリへの Azure CDN の追加Tutorial: Add Azure CDN to an Azure App Service web app

このチュートリアルでは、Azure App Service 内の Web アプリAzure Content Delivery Network (CDN) を追加する方法について説明します。This tutorial shows how to add Azure Content Delivery Network (CDN) to a web app in Azure App Service. Web Apps は、Web アプリケーション、REST API、およびモバイル バックエンドをホストするためのサービスです。Web apps is a service for hosting web applications, REST APIs, and mobile back ends.

以下に示したのは、これから扱うサンプルの静的 HTML サイトのホーム ページです。Here's the home page of the sample static HTML site that you'll work with:

サンプル アプリのホーム ページ

ここでは、次の内容について学習します。What you'll learn:

  • CDN エンドポイントを作成する。Create a CDN endpoint.
  • キャッシュされた資産を更新する。Refresh cached assets.
  • キャッシュされたバージョンをクエリ文字列で制御する。Use query strings to control cached versions.

前提条件Prerequisites

このチュートリアルを完了するには、以下が必要です。To complete this tutorial:

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

Web アプリの作成Create the web app

ここで扱う Web アプリは、静的 HTML のクイックスタートの「アプリの参照」の手順に従って作成します。To create the web app that you'll work with, follow the static HTML quickstart through the Browse to the app step.

Azure Portal にログインするLog in to the Azure portal

ブラウザーを開いて Azure Portal に移動します。Open a browser and navigate to the Azure portal.

動的サイト アクセラレーションの最適化Dynamic site acceleration optimization

動的サイト アクセラレータ (DSA) の CDN エンドポイントを最適化する場合は、CDN ポータルを使用して、エンドポイントのプロファイルを作成する必要があります。If you want to optimize your CDN endpoint for dynamic site acceleration (DSA), you should use the CDN portal to create your profile and endpoint. DSA 最適化を使用すると、動的コンテンツを含む Web ページのパフォーマンスがある程度まで向上します。With DSA optimization, the performance of web pages with dynamic content is measurably improved. CDN ポータルからの DSA の CDN エンドポイント最適化方法については、「動的ファイルの配信を高速化する CDN エンドポイントの構成」をご覧ください。For instructions about how to optimize a CDN endpoint for DSA from the CDN portal, see CDN endpoint configuration to accelerate delivery of dynamic files. または、新しいエンドポイントを最適化したくない場合は、次のセクションの手順に従って、Web アプリ ポータルを使用して作成できます。Otherwise, if you don't want to optimize your new endpoint, you can use the web app portal to create it by following the steps in the next section. Azure CDN from Verizon プロファイルでは、CDN エンドポイントの作成後にエンドポイントの最適化を変更することはできません。Note that for Azure CDN from Verizon profiles, you cannot change the optimization of a CDN endpoint after it has been created.

CDN プロファイルと CDN エンドポイントを作成するCreate a CDN profile and endpoint

左側のナビゲーションで [App Services] を選択し、静的 HTML のクイック スタートで作成したアプリを選択します。In the left navigation, select App Services, and then select the app that you created in the static HTML quickstart.

ポータルで App Service アプリを選択

[App Service] ページの [設定] セクションで、[ネットワーク] の [アプリに Azure CDN を構成する] を選択します。In the App Service page, in the Settings section, select Networking > Configure Azure CDN for your app.

ポータルで CDN を選択

[Azure Content Delivery Network] ページで、[新しいエンドポイント] の設定を以下の表に従って指定します。In the Azure Content Delivery Network page, provide the New endpoint settings as specified in the table.

ポータルでプロファイルとエンドポイントを作成

SettingSetting 推奨値Suggested value 説明Description
[CDN プロファイル]CDN profile myCDNProfilemyCDNProfile CDN プロファイルは、同じ価格レベルの CDN エンドポイントをまとめたものです。A CDN profile is a collection of CDN endpoints with the same pricing tier.
[価格レベル]Pricing tier Standard AkamaiStandard Akamai プロバイダーと使用可能な機能は、価格レベルによって規定されます。The pricing tier specifies the provider and available features. このチュートリアルでは Standard Akamai を使用します。This tutorial uses Standard Akamai.
[CDN エンドポイント名]CDN endpoint name azureedge.net ドメイン内で一意となる任意の名前Any name that is unique in the azureedge.net domain キャッシュされたリソースには、<エンドポイント名>.azureedge.net ドメインでアクセスします。You access your cached resources at the domain <endpointname>.azureedge.net.

CDN プロファイルを作成するには、[作成] を選択します。Select Create to create a CDN profile.

Azure によってプロファイルとエンドポイントが作成されます。Azure creates the profile and endpoint. [エンドポイント] の一覧に新しいエンドポイントが表示され、プロビジョニングされた時点で [実行中] 状態になります。The new endpoint appears in the Endpoints list, and when it's provisioned, the status is Running.

リストに表示された新しいエンドポイント

CDN エンドポイントをテストするTest the CDN endpoint

登録内容が反映されるまでに時間がかかるため、エンドポイントはすぐには使用できません。Because it takes time for the registration to propagate, the endpoint isn't immediately available for use:

  • Azure CDN Standard from Microsoft プロファイルの場合、通常、反映は 10 分以内で完了します。For Azure CDN Standard from Microsoft profiles, propagation usually completes in 10 minutes.
  • Azure CDN Standard from Akamai プロファイルの場合、通常、反映は 1 分以内で完了します。For Azure CDN Standard from Akamai profiles, propagation usually completes within one minute.
  • Azure CDN Standard from Verizon プロファイルおよび Azure CDN Premium from Verizon プロファイルの場合、通常、反映は 90 分以内で完了します。For Azure CDN Standard from Verizon and Azure CDN Premium from Verizon profiles, propagation usually completes within 90 minutes.

サンプル アプリには index.html ファイルのほか、静的な資産を格納する cssimgjs の各フォルダーが存在します。The sample app has an index.html file and css, img, and js folders that contain other static assets. CDN エンドポイントでは、これらすべてのファイルに対して同じコンテンツ パスが使用されます。The content paths for all of these files are the same at the CDN endpoint. たとえば次の 2 つの URL は、どちらも css フォルダー内の bootstrap.css ファイルにアクセスするものです。For example, both of the following URLs access the bootstrap.css file in the css folder:

http://<appname>.azurewebsites.net/css/bootstrap.css
http://<endpointname>.azureedge.net/css/bootstrap.css

ブラウザーで次の URL に移動します。Navigate a browser to the following URL:

http://<endpointname>.azureedge.net/index.html

CDN から配信されたサンプル アプリのホーム ページ

先ほど Azure Web アプリで実行したのと同じページが表示されます。You see the same page that you ran earlier in an Azure web app. Azure CDN は配信元の Web アプリの資産を取得し、それを CDN エンドポイントから配信しています。Azure CDN has retrieved the origin web app's assets and is serving them from the CDN endpoint

このページを確実に CDN にキャッシュするには、ページを最新の情報に更新します。To ensure that this page is cached in the CDN, refresh the page. 要求されたコンテンツを CDN でキャッシュするためには、同じ資産に対して 2 回の要求が必要になる場合もあります。Two requests for the same asset are sometimes required for the CDN to cache the requested content.

Azure CDN のプロファイルとエンドポイントの詳細については、「Azure CDN の概要」を参照してください。For more information about creating Azure CDN profiles and endpoints, see Getting started with Azure CDN.

CDN を消去するPurge the CDN

CDN はその配信元の Web アプリからのリソースを、Time to Live (TTL) の構成に基づいて定期的に更新します。The CDN periodically refreshes its resources from the origin web app based on the time-to-live (TTL) configuration. 既定の TTL は 7 日間です。The default TTL is seven days.

最新のコンテンツを Web アプリにデプロイするときなど、場合によっては、TTL の期限が切れる前に CDN を更新しなければならないことがあります。At times you might need to refresh the CDN before the TTL expiration; for example, when you deploy updated content to the web app. 更新をトリガーするには、CDN のリソースを手動で消去します。To trigger a refresh, manually purge the CDN resources.

このチュートリアル セクションでは、Web アプリに変更をデプロイし、CDN を消去してそのキャッシュの更新をトリガーします。In this section of the tutorial, you deploy a change to the web app and purge the CDN to trigger the CDN to refresh its cache.

Web アプリに変更をデプロイするDeploy a change to the web app

次の例のように、index.html ファイルを開いて H1 見出しに - V2 を追加します。Open the index.html file and add - V2 to the H1 heading, as shown in the following example:

<h1>Azure App Service - Sample Static HTML Site - V2</h1>

変更をコミットして Web アプリにデプロイします。Commit your change and deploy it to the web app.

git commit -am "version 2"
git push azure master

デプロイの完了後、ブラウザーで Web アプリの URL にアクセスして変更を表示します。Once deployment has completed, browse to the web app URL to see the change.

http://<appname>.azurewebsites.net/index.html

Web アプリのタイトルに V2 と表示される

ホーム ページの CDN エンドポイント URL にブラウザーでアクセスした場合、変更は表示されません。CDN にキャッシュされているバージョンの有効期限がまだ切れていないためです。If you browse to the CDN endpoint URL for the home page, you won't see the change because the cached version in the CDN hasn't expired yet.

http://<endpointname>.azureedge.net/index.html

CDN ではタイトルに V2 が表示されない

ポータルで CDN を消去するPurge the CDN in the portal

CDN にキャッシュされたバージョンの更新をトリガーするには、CDN を消去します。To trigger the CDN to update its cached version, purge the CDN.

ポータルの左側のナビゲーションで [リソース グループ] を選択し、Web アプリ用に作成したリソース グループ (myResourceGroup) を選択します。In the portal left navigation, select Resource groups, and then select the resource group that you created for your web app (myResourceGroup).

リソース グループの選択

リソースの一覧から自分の CDN エンドポイントを選択します。In the list of resources, select your CDN endpoint.

エンドポイントの選択

[エンドポイント] ページの上部にある [消去] を選択します。At the top of the Endpoint page, select Purge.

[消去] の選択

消去するコンテンツ パスを入力します。Enter the content paths you want to purge. 個々のファイルを消去するには、ファイルの完全パスを渡します。特定のフォルダーからすべてのコンテンツを消去し、最新の情報に更新するには、パス セグメントを渡します。You can pass a complete file path to purge an individual file, or a path segment to purge and refresh all content in a folder. index.html を変更したため、それがいずれかのパスに含まれていることを確認します。Because you changed index.html, ensure that is in one of the paths.

ページの下部にある [消去] を選択します。At the bottom of the page, select Purge.

ページの消去

CDN が更新されていることを確認するVerify that the CDN is updated

消去要求の処理が完了するまで待機します。これには通常、数分かかります。Wait until the purge request finishes processing, which is typically a couple of minutes. 現在の状態を確認するには、ページ上部のベル アイコンを選択します。To see the current status, select the bell icon at the top of the page.

消去の通知

ブラウザーで index.html の CDN エンドポイント URL にアクセスすると、ホーム ページのタイトルに追加した V2 が表示されます。これは、CDN キャッシュが最新の情報に更新されたことを示しています。When you browse to the CDN endpoint URL for index.html, you'll see the V2 that you added to the title on the home page, which indicates that the CDN cache has been refreshed.

http://<endpointname>.azureedge.net/index.html

CDN でタイトルに V2 が表示されている

詳細については、「Azure CDN エンドポイントの消去」を参照してください。For more information, see Purge an Azure CDN endpoint.

クエリ文字列を使用してコンテンツをバージョン管理するUse query strings to version content

Azure CDN では、次のキャッシュ動作を選択することができます。Azure CDN offers the following caching behavior options:

  • クエリ文字列を無視Ignore query strings
  • クエリ文字列に対するキャッシュをバイパスBypass caching for query strings
  • 一意の URL をすべてキャッシュCache every unique URL

1 つ目のオプションが既定値です。つまり、URL 内のクエリ文字列に関係なく、資産のバージョンは 1 つしかキャッシュされません。The first option is the default, which means there is only one cached version of an asset regardless of the query string in the URL.

このチュートリアル セクションでは、一意の URL をすべてキャッシュするようにキャッシュ動作を変更します。In this section of the tutorial, you change the caching behavior to cache every unique URL.

キャッシュ動作を変更するChange the cache behavior

Azure Portal の [CDN エンドポイント] ページで [キャッシュ] を選択します。In the Azure portal CDN Endpoint page, select Cache.

[クエリ文字列のキャッシュ動作] ボックスの一覧から [一意の URL をすべてキャッシュ] を選択します。Select Cache every unique URL from the Query string caching behavior drop-down list.

[保存] を選択します。Select Save.

クエリ文字列のキャッシュ動作の選択

一意の URL が個別にキャッシュされていることを確認するVerify that unique URLs are cached separately

ブラウザーで CDN エンドポイントにあるホーム ページにアクセスし、次のクエリ文字列を追加します。In a browser, navigate to the home page at the CDN endpoint, and include a query string:

http://<endpointname>.azureedge.net/index.html?q=1

Azure CDN から Web アプリの最新のコンテンツが返されます。見出しには V2 と表示されます。Azure CDN returns the current web app content, which includes V2 in the heading.

このページを確実に CDN にキャッシュするには、ページを最新の情報に更新します。To ensure that this page is cached in the CDN, refresh the page.

index.html を開き、V2V3 に変更してから、変更をデプロイします。Open index.html, change V2 to V3, then deploy the change.

git commit -am "version 3"
git push azure master

CDN エンドポイントの URL に新しいクエリ文字列 (q=2 など) を追加し、ブラウザーでアクセスします。In a browser, go to the CDN endpoint URL with a new query string, such as q=2. Azure CDN によって最新の index.html ファイルが取得され、V3 と表示されます。Azure CDN gets the current index.html file and displays V3. ただし、q=1 というクエリ文字列で CDN エンドポイントにアクセスした場合は、V2 と表示されます。However, if you navigate to the CDN endpoint with the q=1 query string, you see V2.

http://<endpointname>.azureedge.net/index.html?q=2

CDN でタイトルに V3 と表示される (クエリ文字列 2)

http://<endpointname>.azureedge.net/index.html?q=1

CDN でタイトルに V2 と表示される (クエリ文字列 1)

この出力は、それぞれのクエリ文字列が区別して扱われていることを示しています。This output shows that each query string is treated differently:

  • 以前は q=1 が使用されていたために、キャッシュされていたコンテンツ (V2) が返されています。q=1 was used before, so cached contents are returned (V2).
  • q=2 は新しいクエリ文字列であるため、最新の Web アプリ コンテンツ (V3) が取得されて返されています。q=2 is new, so the latest web app contents are retrieved and returned (V3).

詳細については、「クエリ文字列による Azure CDN キャッシュ動作の制御」を参照してください。For more information, see Control Azure CDN caching behavior with query strings.

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

前の手順では、リソース グループ内に Azure リソースを作成しました。In the preceding steps, you created Azure resources in a resource group. これらのリソースが将来必要になると想定していない場合、Cloud Shell で次のコマンドを実行して、リソース グループを削除します。If you don't expect to need these resources in the future, delete the resource group by running the following command in the Cloud Shell:

az group delete --name myResourceGroup

このコマンドの実行には、少し時間がかかる場合があります。This command may take a minute to run.

次の手順Next steps

ここで学習した内容は次のとおりです。What you learned:

  • CDN エンドポイントを作成する。Create a CDN endpoint.
  • キャッシュされた資産を更新する。Refresh cached assets.
  • キャッシュされたバージョンをクエリ文字列で制御する。Use query strings to control cached versions.

次の各記事に、CDN のパフォーマンスを最適化する方法が紹介されています。Learn how to optimize CDN performance in the following articles: