Freigeben über

Azure WebSites で CDN を 有効にする

  • Artikel

このポストは、9 月 18 日に投稿された Enabling a CDN Endpoint in Azure Websites の翻訳です。

Azure Content Delivery Network (CDN) は、オーディオや画像などの静的なファイルを高速かつ信頼性の高い方法で世界中の顧客に配信できるサービスです。世界に広がるサーバー ネットワークを使用し、各ユーザーから最も近い適切なノードからコンテンツを配信します (現在使用しているノードの場所の最新リストはこちらから確認できます)。これによりスピードと可用性が飛躍的に向上し、ユーザー エクスペリエンスが大きく改善します。これまで CDN は WebSites で使用する画像やスクリプトの配信に使用されてきましたが、このたび Azure WebSites が CDN と直接統合できるようになりました。このブログ記事では、まず基本的な WebSites のセットアップ方法と CDN サポートの統合、次に開発者ツールを使用した CDN の動作の確認方法を説明します。

Azure のポータルで WebSites を作成する

  • Azure 管理ポータルにログインします。
  • ダッシュボードの左下隅にある [ +New] アイコンをクリックします。
  • [COMPUTE]、[WEB SITE]、[QUICK CREATE] の順に選択します。
  • [URL] ボックスに WebSites の一意の名前を入力します。
  • [CREATE WEB SITE] ボタンをクリックします。

これで新しい WebSites が作成され、ポータルの [WEB SITES] タブに表示されるようになりました。

CDN を作成する

WebSites のセットアップが完了したので、次は関連する CDN を作成します。

  • 再度 [ +New] アイコンをクリックします。
  • [APP SERVICES]、[CDN]、[QUICK CREATE] の順にクリックします。
  • ドロップダウン リストから WebSites に関連付いたサブスクリプションを選択します。
  • 元のドメインのドロップダウンをクリックします。
  • その下に WebSites カテゴリと関連付けられたサイトの URL が表示されます。
  • ご自分のサイトを選択して [CREATE] をクリックします。

CDN が作成され、ポータルの [CDN] タブに表示されます。

メモ: 元のサイトの URL が右の方に表示され、関連付けられた CDN の URL がその左に表示されます。

リンクをクリックして CDN にアクセスしてみましょう。

Web ページが存在しないというメッセージが表示されます。しかし、このような画面が表示されても問題ありません。CDN ネットワークが確立するには最大 60 分かかるため、オンラインになるまでは「400 (要求が正しくありません)」や「404 (見つかりません)」といったステータス コードが表示されることがあります。

CDN が正常に作成されたかどうかは CDN が利用可能になったら確認できますので、気にせずこのままチュートリアルを先に進めましょう。

メモ: 通常はこのように CDN に直接アクセスすることはなく、Web ページの情報から参照するだけですが、URL のリンクから直接アクセスすることにより、この URL が既にオンラインになっているかどうかを簡単に確認できます。

WebSites のコンテンツを更新し CDN から取得する

ここでは、WebSites でホストする単純な Web ページが必要です。独自のコンテンツを Azure WebSites にデプロイする方法についてはここでは扱いませんが、こちらで紹介しているものの中からデプロイ方法をお選びいただけます。

参考までにファイル構造とソースのサンプルを次に示しますので、必要に応じてご覧ください。

ファイル構造

 root-site-folder
  | index.html
  | Images
      | panda.jpg

index.html

 <!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Hello Panda</title>
    </head>
    <body>
        <h1>Hello Panda</h1>

        <p>Web Server Hosted Image:</p>
        <img src="Images/panda.jpg" alt="panda pic goes here" height=400 width=266>

        <p>CDN Hosted Image:</p>
<!--画像ソースを CDN アドレスに関連付けられた同じファイルの場所のものと置き換える-->
        <img src="https://az664986.vo.msecnd.net/Images/panda.jpg" alt="panda pic goes here" height=400 width=266>
    </body>

</html>

この基本的な Web ページは同じ画像を 2 回読み込みますが、1 回目は Web サーバーから直接、2 回目は CDN から読み込みます。

CDN 上にキャッシュされているコンテンツにアクセスするには、Azure のポータルで確認できる CDN の URL を使用します。アドレスは、ポータルの [CDN] タブの URL 列の下に次のように表示されています。

 https://<CDNNamespace>.vo.msecnd.net/

また、CDN から静的コンテンツへのアクセス パターンにご注意ください。CDN は WebSites に関連付けられて自動的に構成されているため、ファイル構造が同じです。そのため、Web サーバーではなく、CDN から静的コンテンツにアクセスしたいときには、次のように WebSites にひも付いた URL を、ソースのタグにあるよく似た CDN の URL に置き換えるだけです。

WebSites の URL:

 <img src="path/to/file">

CDN の URL:

 <img src="https:// < 自分の CDN の URL> /path/to/file">

これで WebSites を発行します。

何も問題がなければ、両方の画像が読み込まれ、次のように表示されます。

なお、次のように表示される場合もあります。

この場合は、CDN がまだオンラインになっていないことが考えられます。オンラインになるまで待ち、ページを更新してください。

結果を確認する

開発者ツールを使用してネットワーク アクティビティを監視すると、この 2 つの画像の読み込み時間の違いを確認できます。このチュートリアルでは Internet Explorer を使用しますが、他の主なブラウザーを使用しても手順は同じです。

  • Internet Explorer を開きます。
  • ご自分の WebSites の URL に移動します。
  • [F12] キーを押して開発者ツールを開きます。
  • [Network] タブをクリックします。
  • [Record] ボタンを [Capture Network Traffic] に切り替えます。
  • ページを更新します。

サーバーがホストしている画像と、CDN がホストしている画像の読み込み時間の違いが次のように表示されます。

メモ: ここに表示された数値は、Web サーバーの場所、エンドユーザーの場所、および一般的なサーバー負荷により大きく左右されます。

まとめ

ここでは CDN エンドポイントのセットアップ方法および CDN を Azure WebSites に統合する方法について説明しました。また、基本的なブラウザー ツールを使用してその効率性を測る方法も説明しました。CDN のカスタマイズ方法および CDN の活用方法の詳細についてはこちらを参照してください。