ラボ 12: Azure Content Delivery Network を使用した Web アプリケーションの強化

Microsoft Azure ユーザー インターフェイス

Microsoft クラウド ツールの動的な性質を考慮すると、このトレーニング コンテンツの開発の後に発生する Azure UI の変更に気付くかもしれません。 その結果、ラボの指示とラボの手順が正しく整合しなくなる可能性があります。

Microsoft は、コミュニティから必要な変更の通知があったときに、このトレーニング コースを更新します。 ただし、クラウドの更新は頻繁に発生するため、このトレーニング コンテンツの更新の前に UI の変更に気付く可能性があります。 これが発生した場合は、その変更に適応し、ラボでは必要に応じてそれらに対応してください。

Instructions

開始する前に

ラボ環境にサインインする

次の資格情報を使用して Windows 11 仮想マシン (VM) にサインインします。

  • ユーザー名: Admin
  • パスワード: Pa55w.rd

注: 仮想ラボ環境に接続するための手順は、インストラクターから提供されます。

インストールされているアプリケーションを確認する

Windows 11 デスクトップでタスク バーを探します。 タスク バーには、このラボで使用するアプリケーションのアイコンが含まれています。

  • Microsoft Edge

課題シナリオ

このラボでは、Azure Content Delivery Network 機能を実装して、顧客の場所に基づいてキャッシュ ソリューションを提供します。 ラボでは、待機時間の問題によって最も影響を受ける画像およびビデオ ファイルのストレージ アカウントを構成します。 Azure Content Delivery Network を使用してキャッシュ ソリューションを実装し、これらの画像およびビデオ ファイルの待機時間を短縮できるようにします。

アーキテクチャの図

Azure Content Delivery Network を使用して web アプリケーションを強化するユーザーを表すアーキテクチャの図

演習 1: Azure リソースを作成する

タスク 1: Azure portal を開く

  1. タスク バーで、Microsoft Edge アイコンを選択します。

  2. 開いたブラウザー ウィンドウで、Azure portal (https://portal.azure.com) に移動してから、このラボで使用するアカウントでサインインします。

    注:初めて Azure portal にサインインする場合は、このポータルのツアーが表示されます。 [はじめに] を選択してツアーをスキップし、ポータルの使用を開始します。

タスク 2: ストレージ アカウントを作成する

  1. Azure portal で、 [リソース、サービス、ドキュメントの検索] テキスト ボックスを使用して「ストレージ アカウント」を検索し、結果のリストで [ストレージ アカウント] を選択します。

  2. [ストレージ アカウント] ブレードで [+ 作成] を選択します。

  3. [ストレージ アカウントを作成する] ブレードの [基本] タブで、次のアクションを実行し、[次へ: 詳細 >] を選択します。

    設定 アクション
    [サブスクリプション] ドロップダウン リスト 既定値のままにします
    [リソース グループ] セクション [新規作成] を選択し、「MarketingContent」と入力し、 [OK] を選択します。
    [ストレージ アカウント名] テキスト ボックス 「contenthost [ご自分の名前] 」と入力します
    [リージョン] ドロップダウン リスト [(米国) 米国東部] を選択します
    [パフォーマンス] セクション [Standard] オプションを選択します
    [冗長性] ドロップダウン リスト [ローカル冗長ストレージ (LRS)] を選択します

    次のスクリーンショットには、 [ストレージ アカウントを作成する] ブレードで構成された設定が表示されています。

    [ストレージ アカウントを作成する] ブレードで構成された設定を表示したスクリーンショット

  4. [詳細] タブで、[個々のコンテナーでの匿名アクセスの有効化を許可する] が有効になっていることを確認します。 有効になっていない場合は、チェック ボックスをオンにします。

  5. [確認] タブで、前の手順で選択したオプションを確認します。

  6. [作成] を選択して、指定した構成を使用してストレージ アカウントを作成します。

    注: 作成タスクが完了するまで待ってから、このラボを続行してください。

タスク 3: Azure App Service を使用して Web アプリを作成する

  1. Azure portal のナビゲーション ウィンドウで [リソースの作成] を選択します。

  2. [リソースの作成] ブレードで、[サービスとマーケットプレースの検索] テキスト ボックスに「Web アプリ」と入力し、Enter キーを押します。

  3. 検索結果ブレードで、”Web アプリ” という結果を選択し、 [作成] を選択します。

  4. [Web アプリの作成] ブレードの [基本] タブで、次のアクションを実行してから、 [次へ: Docker] を選択します。

    設定 アクション
    [サブスクリプション] ドロップダウン リスト 既定値のままにします
    [リソース グループ] ドロップダウン リスト リストで [MarketingContent] を選択します。
    [名前] テキスト ボックス 「landingpage [ご自分の名前] 」と入力します。
    [公開] セクション 「コンテナー」を選択します。
    [オペレーティング システム] セクション [Linux] を選択します
    [リージョン] ドロップダウン リスト [米国東部] を選択します。
    [Linux プラン (米国東部)] セクション [新規作成] を選択します。 [名前] テキスト ボックスに「MarketingPlan」と入力し、 [OK] を選択します
    [価格プラン] セクション 既定値のままにします

    次のスクリーンショットは、 [Web アプリの作成] ブレードで構成されている設定を示しています。

    [Web アプリの作成] ブレードで構成された設定を示すスクリーンショット

  5. [コンテナー] タブで、次のアクションを実行し、[確認と作成] を選択します。

    設定 アクション
    サイドカーのサポート (プレビュー) [無効] を選択します
    イメージのソース [Docker Hub またはその他のレジストリ] を選択します。
    [オプション] [単一コンテナー] を選択します。
    [アクセスの種類] ドロップダウン リスト [Public] を選択します
    レジストリ サーバー URL 「https://index.docker.io」と入力します
    [イメージとタグ] テキスト ボックス 「microsoftlearning/edx-html-landing-page:latest」と入力します。

    次のスクリーンショットは、[コンテナー] タブで構成されている設定を示しています。

    [Web アプリの作成] の [Docker] タブで構成されている設定を表示したスクリーンショット

  6. [確認と作成] タブで、前の手順で選択したオプションを確認します。

  7. [作成] を選択して、指定した構成を使用して Web アプリを作成します。

    注: 作成タスクが完了するまで待ってから、このラボを続行してください。

  8. [デプロイ] ブレードで、[リソースに移動] を選択します。

  9. [App Service の概要] ブレードの [要点] で、 [既定のドメイン] リンクの値を記録します。 この値は、ラボの後半で使用します。

確認

この演習では、このラボで後ほど使用する Azure Storage アカウントと Azure Web アプリを作成しました。

演習 2: Content Delivery Network とエンドポイントを構成する

タスク 1: Azure Cloud Shell を開く

  1. Azure portal で [Cloud Shell] アイコン Cloud Shell アイコン を選択して Cloud Shell を開きます。 Cloud Shell が既定で PowerShell セッションに設定されている場合は、[Cloud Shell] メニューの [Bash に切り替える] を選択し、[確認] を選択します。

    注: Cloud Shell は、大なり記号 (>) とアンダースコア文字 (_) で表されます。

    Cloud Shell を初めて起動した場合は、リソースを作成するための一連のプロンプトが表示されます。 次の表に示すアクションを実行します。

    プロンプト アクション
    ページで、 [Bash] を選択します。
    はじめに [ストレージ アカウントのマウント] を選択し、ドロップダウンから自分の [ストレージ アカウント サブスクリプション] を選択し、最後に [適用] を選択します。
    ストレージ アカウントのマウント [ストレージ アカウントを自動的に作成する] を選択し、[次へ] を選択します。

  2. Azure portal の Cloud Shell コマンド プロンプトで、次のコマンドを実行して、Azure コマンド ライン インターフェイス (Azure CLI) ツールのバージョンを取得します。

     az --version

タスク 2: Microsoft.CDN プロバイダーを登録する

  1. Azure portal の Cloud Shell コマンド プロンプトで、次の操作を実行します。

    a. 次のコマンドを入力して、Microsoft.CDN が登録されたかどうかを確認します。 手順 2 に進みます。 Microsoft.CDN が既に登録されている場合:

     az provider show --namespace Microsoft.CDN --query "registrationState"

    b. Microsoft.CDN が登録されていない場合。 次のコマンドを入力し、Enter キーを押して、現在のサブスクリプションに Microsoft.CDN 名前空間を登録します。

     az provider register --namespace Microsoft.CDN

  2. Azure portal の [Cloud Shell] ウィンドウを閉じます。

タスク 3: Content Delivery Network プロファイルを作成する

  1. Azure portal のナビゲーション ウィンドウで [リソースの作成] を選択します。

  2. [リソースの作成] ブレードの [サービスとマーケットプレースの検索] テキスト ボックスに「CDN」と入力し、Enter キーを押します。

  3. [マーケットプレース] 検索結果ブレードで、 [Front Door と CDN プロファイル] という結果を選択し、 [作成] を選択します。

  4. [オファリングの比較] ページで、 [その他のオファリングの探索] を選択し、 [Azure CDN Standard from Microsoft (クラシック)] を選んでから、 [続行] を選択します。

  5. [CDN プロファイル] ブレードの [基本] タブで、次のアクションを実行してから、 [確認と作成] を選択します。

    設定 アクション
    [サブスクリプション] ドロップダウン リスト 既定値のままにします
    [リソース グループ] ドロップダウン リスト リストで [MarketingContent] を選択します。
    [名前] テキスト ボックス 「contentdeliverynetwork」と入力します
    [領域] テキスト ボックス 既定値の [グローバル] のままにします
    [価格レベル] ドロップダウン リスト 既定値の [Microsoft CDN (クラシック)] のままにします
    [新しい CDN エンドポイントを作成する] チェック ボックス オフ

    次のスクリーンショットは、 [CDN プロファイル] ブレードで構成されている設定を示しています。

    [CDN プロファイルの作成] ブレードで構成された設定を表示したスクリーンショット。

  6. [確認と作成] タブで、前の手順で選択したオプションを確認します。

  7. [作成] を選択して、指定した構成を使用して CDN プロファイルを作成します。

    注: Azure が CDN プロファイルの作成を完了するまで待ってから、ラボを続行してください。 プロファイルが作成されると通知が届きます。

タスク 4: ストレージ コンテナーを構成する

  1. Azure portal のナビゲーション ウィンドウで [リソース グループ] を選択します。

  2. [リソース グループ] ブレードで、このラボで前に作成した ManagedContent リソース グループを選択します。

  3. [MarketingContent] ブレードで、このラボで前に作成した contenthost [yourname] ストレージ アカウントを選択します。

  4. [ストレージ アカウント] ブレードで、 [データ ストレージ] セクションの [コンテナー] リンクを選択します。

  5. [コンテナー] セクションで、 [+ コンテナー] を選択します。

  6. [新しいコンテナー] ポップアップ ウィンドウで、次のアクションを実行し、 [作成] を選択します。

    設定 アクション
    [名前] テキスト ボックス 「media」と入力します
    [パブリック アクセス レベル] ドロップダウン リスト [BLOB (BLOB 専用の匿名読み取りアクセス)] を選択します。

  7. [コンテナー] セクションで、もう一度、 [+ コンテナー] を選択します。

  8. [新しいコンテナー] ポップアップ ウィンドウで、次のアクションを実行し、 [作成] を選択します。

    設定 アクション
    [名前] テキスト ボックス 「video」と入力します
    [パブリック アクセス レベル] ドロップダウン リスト [BLOB (BLOB 専用の匿名読み取りアクセス)] を選択します。

  9. 更新されたコンテナーの一覧で、media コンテナーと video コンテナーが両方とも表示されていることを確認します。

タスク 5: Content Delivery Network エンドポイントを作成する

  1. Azure portal のナビゲーション ウィンドウで [リソース グループ] リンクを選択します。

  2. [リソース グループ] ブレードで、このラボで前に作成した ManagedContent リソース グループを選択します。

  3. [MarketingContent] ブレードで、このラボで前に作成した contentdeliverynetwork CDN プロファイルを選択します。

  4. [CDN プロファイル] ブレードで [+ エンドポイント] を選択します。

  5. [エンドポイントの追加] ポップアップ ダイアログ ボックスで、次の操作を実行し、 [追加] を選択します。

    設定 アクション
    [名前] テキスト ボックス 「cdnmedia_<ご自分の名前>_」と入力します
    [配信元の種類] ドロップダウン リスト [ストレージ] を選びます
    [配信元のホスト名] ドロップダウン リスト このラボで前に作成したストレージ アカウントの [contenthost [ご自分の名前] .blob.core.windows.net] オプションを選択します
    [配信元のパス] テキスト ボックス 「/media」と入力します
    [配信元のホスト ヘッダー] テキスト ボックス 既定値のままにします
    [プロトコル] セクションと [配信元のポート] セクション 既定値のままにします
    [最適化の対象] ドロップダウン リスト [一般的な Web 配信] を選択します

    次のスクリーンショットには、 [エンドポイントの追加] ダイアログ ボックスで構成された設定が表示されています。

    次のスクリーンショットには、[エンドポイントの追加] ダイアログ ボックスで構成された設定が表示されています。

  6. [CDN プロファイル] ブレードで、もう一度、 [+ エンドポイント] を選択します。

  7. [エンドポイントの追加] ポップアップ ダイアログ ボックスで、次の操作を実行し、 [追加] を選択します。

    設定 アクション
    [名前] テキスト ボックス 「cdnvideo_<ご自分の名前>_」と入力します
    [配信元の種類] ドロップダウン リスト [ストレージ] を選びます
    [配信元のホスト名] ドロップダウン リスト このラボで前に作成したストレージ アカウントの [contenthost [ご自分の名前] .blob.core.windows.net] オプションを選択します
    [配信元のパス] テキスト ボックス 「/video」と入力します
    [配信元のホスト ヘッダー] テキスト ボックス 既定値のままにします
    [プロトコル] セクションと [配信元のポート] セクション 既定値のままにします
    [最適化の対象] ドロップダウン リスト [一般的な Web 配信] を選択します

    次のスクリーンショットには、 [エンドポイントの追加] ダイアログ ボックスで構成された設定が表示されています。

    次のスクリーンショットには、[エンドポイントの追加] ダイアログ ボックスで構成された設定が表示されています。

  8. [CDN プロファイル] ブレードで、もう一度、 [+ エンドポイント] を選択します。

  9. [エンドポイントの追加] ポップアップ ダイアログ ボックスで、次の操作を実行し、 [追加] を選択します。

    設定 アクション
    [名前] テキスト ボックス 「cdnweb_<ご自分の名前>_」と入力します
    [配信元の種類] ドロップダウン リスト [Web アプリ] を選択します
    [配信元のホスト名] ドロップダウン リスト このラボで前に作成した、Web アプリの [landingpage [ご自分の名前] .azurewebsites.net] オプションを選択します。
    [配信元のパス] テキスト ボックス 既定値のままにします
    [配信元のホスト ヘッダー] テキスト ボックス 既定値のままにします
    [プロトコル] セクションと [配信元のポート] セクション 既定値のままにします
    [最適化の対象] ドロップダウン リスト [一般的な Web 配信] を選択します

    次のスクリーンショットには、 [エンドポイントの追加] ダイアログ ボックスで構成された設定が表示されています。

    次のスクリーンショットには、[エンドポイントの追加] ダイアログ ボックスで構成された設定が表示されています。

確認

この演習では、Content Delivery Network (CDN) のリソース プロバイダーを登録し、次に、プロバイダーを使用して CDN プロファイルとエンドポイント リソースの両方を作成しました。

演習 3: 静的 Web コンテンツをアップロードし、構成する

タスク 1: ランディング ページを確認する

  1. Azure portal のナビゲーション ウィンドウで [リソース グループ] を選択します。

  2. [リソース グループ] ブレードで、このラボで前に作成した ManagedContent リソース グループを選択します。

  3. [ManagedContent] ブレードで、このラボで前に作成した landingpage [yourname] Web アプリを選択します。

  4. [App Service] ブレードで [参照] を選択します。 新しいブラウザー タブが開き、現在の Web サイトが返されます。 画面に表示されるエラー メッセージを確認します。 マルチメディア コンテンツを参照するために指定された設定を構成するまで、Web サイトは機能しません。

  5. 現在、開いているブラウザー ウィンドウに戻ります。ここには、Azure portal が表示されています。

タスク 2: Storage BLOB をアップロードする

  1. Azure portal のナビゲーション ウィンドウで [リソース グループ] を選択します。

  2. [リソース グループ] ブレードで、このラボで前に作成した ManagedContent リソース グループを選択します。

  3. [MarketingContent] ブレードで、このラボで前に作成した contenthost [yourname] ストレージ アカウントを選択します。

  4. [ストレージ アカウント] ブレードで、 [データ ストレージ] セクションの [コンテナー] リンクを選択します。

  5. [コンテナー] セクションで media コンテナーを選択し、 [アップロード] を選択します。

  6. [BLOB のアップロード] ポップアップ ウィンドウで、次のアクションを実行します。

    a. [ファイル] セクションで、 [ファイルの参照] を選択するか、ドラッグ アンド ドロップ機能を使用します。

    b. エクスプローラー ウィンドウで Allfiles (F):\Allfiles\Labs\12\Starter に移動し、以下のファイルを選択してから、 [開く] を選択します。

    • campus.jpg

    • conference.jpg

    • poster.jpg

    c. [ファイルが既に存在する場合は上書きする] が選択されていることを確認し、 [アップロード] を選択します。

    注: BLOB がアップロードされるまで待ってから、このラボを続行してください。

  7. [コンテナー] ブレードで、 [設定] セクションの [プロパティ] を選択します。

  8. [URL] テキスト ボックスの値を記録します。 この値は、ラボの後半で使用します。

  9. [コンテナー] ブレードを閉じます。

  10. [コンテナー] ブレードで video コンテナーを選択し、 [アップロード] を選択します。

  11. [BLOB のアップロード] ポップアップ ウィンドウで、次のアクションを実行します。

    a. [ファイル] セクションで、 [ファイルの参照] を選択するか、ドラッグ アンド ドロップ機能を使用します。

    b. エクスプローラー ウィンドウで Allfiles (F):\Allfiles\Labs\12\Starter に移動し、welcome.mp4 ファイルを選択してから、 [開く] を選択します。

    c. [ファイルが既に存在する場合は上書きする] が選択されていることを確認し、 [アップロード] を選択します。

    注: BLOB がアップロードされるまで待ってから、このラボを続行してください。

  12. [コンテナー] ブレードで、 [設定] セクションの [プロパティ] を選択します。

  13. [URL] テキスト ボックスの値を記録します。 この値は、ラボの後半で使用します。

タスク 3: Web アプリの設定を構成する

  1. Azure portal のナビゲーション ウィンドウで [リソース グループ] を選択します。

  2. [リソース グループ] ブレードで、このラボで前に作成した ManagedContent リソース グループを選択します。

  3. [ManagedContent] ブレードで、このラボで前に作成した landingpage [yourname] Web アプリを選択します。

  4. [App Service] ブレードの [設定] セクションで、[環境変数] リンクを選択します。

  5. [アプリ設定] タブで [+ 追加] を選択します。 [アプリケーション設定の追加/編集] ポップアップ ダイアログに次の情報を入力します。

    設定 アクション
    [名前] テキスト ボックス 「CDNMediaEndpoint」と入力します
    [値] テキスト ボックス このラボで前に記録した、contenthost [ご自分の名前] ストレージ アカウントの media コンテナーの URI 値を入力します。
    [デプロイ スロットの設定] チェック ボックス 既定値のままにします

  6. [適用] を選択してポップアップ ダイアログを閉じ、[アプリ設定] セクションに戻ります。

  7. [アプリ設定] タブで [+ 追加] を選択します。 [アプリケーション設定の追加/編集] ポップアップ ダイアログに次の情報を入力します。

    設定 アクション
    [名前] テキスト ボックス 「CDNVideoEndpoint」と入力します。
    [値] テキスト ボックス このラボで前に記録した、contenthost [ご自分の名前] ストレージ アカウントの video コンテナーの URI 値を入力します
    [デプロイ スロットの設定] チェック ボックス 既定値のままにします

  8. [適用] を選択してポップアップ ダイアログを閉じ、[アプリ設定] セクションに戻ります。

  9. [アプリ設定] セクションの下部にある [適用] を選択します。

    注: アプリ設定を更新すると、アプリが再起動される可能性があるという警告が表示される場合があります。 確認 を選択します。 アプリケーション設定が保存されるまで待ってから、このラボを続行してください。

タスク 4: 修正されたランディング ページを検証する

  1. Azure portal のナビゲーション ウィンドウで [リソース グループ] を選択します。

  2. [リソース グループ] ブレードで、このラボで前に作成した ManagedContent リソース グループを選択します。

  3. [ManagedContent] ブレードで、このラボで前に作成した landingpage [yourname] Web アプリを選択します。

  4. [App Service] ブレードで [再起動] を選択し、 [はい] を選択して、アプリの再起動プロセスを確定します。

    注: 再起動の動作が完了するまで待ってから、このラボを続行してください。 動作が完了すると、通知が表示されます。

  5. [App Service] ブレードで [参照] を選択します。 新しいブラウザー ウィンドウまたはタブが開き、現在の Web サイトに戻ります。 更新された Web サイトで、さまざまな種類のマルチメディア コンテンツが表示されていることを確認します。

  6. 現在、開いているブラウザー ウィンドウに戻ります。ここには、Azure portal が表示されています。

確認

この演習では、マルチメディア コンテンツを BLOB としてストレージ コンテナーにアップロードした後、Web アプリを更新してストレージ BLOB を直接指すようにしました。

演習 4: Content Delivery Network エンドポイントを使用する

タスク 1: エンドポイントの Uniform Resource Identifier (URI) を取得する

  1. Azure portal のナビゲーション ウィンドウで [リソース グループ] リンクを選択します。

  2. [リソース グループ] ブレードで、このラボで前に作成した ManagedContent リソース グループを選択します。

  3. [MarketingContent] ブレードで、このラボで前に作成した contentdeliverynetwork CDN プロファイルを選択します。

  4. [CDN プロファイル] ブレードで cdnmedia [yourname] エンドポイントを選択します。

  5. [エンドポイント] ブレードで [エンドポイントのホスト名] リンクの値をコピーします。 この値は、ラボの後半で使用します。

  6. [エンドポイント] ブレードを閉じます。

  7. [CDN プロファイル] ブレードで cdnvideo [yourname] エンドポイントを選択します。

  8. [エンドポイント] ブレードで [エンドポイントのホスト名] リンクの値をコピーします。 この値は、ラボの後半で使用します。

  9. [エンドポイント] ブレードを閉じます。

タスク 2: マルチメディア コンテンツをテストする

  1. ラボで前にコピーした cdnmedia [yourname] エンドポイントの [エンドポイントのホスト名] の URL を、 /campus.jpg の相対パスと組み合わせて、campus.jpg リソースの URL を構築します。

    注: たとえば、 [エンドポイントのホスト名] の URL が https://cdnmediastudent.azureedge.net/ である場合は、新しく構築される URL が https://cdnmediastudent.azureedge.net/campus.jpg になります。

  2. ラボで前にコピーした cdnmedia [yourname] エンドポイントの [エンドポイントのホスト名] の URL を、 /conference.jpg の相対パスと組み合わせて、conference.jpg リソースの URL を構築します。

    注: たとえば、 [エンドポイントのホスト名] の URL が https://cdnmediastudent.azureedge.net/ である場合は、新しく構築される URL が https://cdnmediastudent.azureedge.net/conference.jpg になります。

  3. ラボで前にコピーした cdnmedia [yourname] エンドポイントの [エンドポイントのホスト名] の URL を、 /poster.jpg の相対パスと組み合わせて、poster.jpg リソースの URL を構築します。

    注: たとえば、 [エンドポイントのホスト名] の URL が https://cdnmediastudent.azureedge.net/ である場合は、新しく構築される URL が https://cdnmediastudent.azureedge.net/poster.jpg になります。

  4. ラボで前にコピーした cdnvideo [yourname] エンドポイントの [エンドポイントのホスト名] の URL を、 /welcome.mp4 の相対パスと組み合わせて、welcome.mp4 リソースの URL を構築します。

    注: たとえば、 [エンドポイントのホスト名] の URL が https://cdnvideostudent.azureedge.net/ である場合は、新しく構築される URL が https://cdnvideostudent.azureedge.net/welcome.mp4 になります。

  5. タスク バーで、Microsoft Edge アイコンのショートカット メニューをアクティブにしてから、 [新しいウィンドウ] を選択します。

  6. 新しいブラウザー ウィンドウで、campus.jpg メディア リソース用に作成した URL を参照し、リソースが正常に検出されたことを確認します。

    注: コンテンツがまだ使用できない場合は、CDN エンドポイントが、まだ初期化中です。 この初期化プロセスには、5 ～ 15 分かかることがあります。

  7. conference.jpg メディア リソース用に作成した URL を参照し、リソースが正常に検出されたことを確認します。

  8. poster.jpg メディア リソース用に作成した URL を参照し、リソースが正常に検出されたことを確認します。

  9. welcome.mp4 ビデオ リソース用に作成した URL を参照し、リソースが正常に検出されたことを確認します。

  10. このタスクで作成したブラウザー ウィンドウを閉じます。

タスク 3: Web アプリの設定を更新する

  1. Azure portal のナビゲーション ウィンドウで [リソース グループ] を選択します。

  2. [リソース グループ] ブレードで、このラボで前に作成した ManagedContent リソース グループを選択します。

  3. [ManagedContent] ブレードで、このラボで前に作成した landingpage [yourname] Web アプリを選択します。

  4. [App Service] ブレードの [設定] セクションで、[環境変数] リンクを選択します。

  5. [アプリケーション設定] タブで、既存のアプリケーション設定 [CDNMediaEndpoint] を選択します。

  6. [アプリケーション設定の追加/編集] ポップアップ ダイアログボックスで、このラボで前にコピーした cdnmedia[自分の名前] エンドポイントの [エンドポイントのホスト名] の URL を入力して [値] ボックスを更新し、[適用] を選択します。__

  7. 既存の CDNVideoEndpoint アプリケーション設定を選択します。

  8. [アプリケーション設定の追加/編集] ポップアップ ダイアログボックスで、このラボで前にコピーした cdnvideo[自分の名前] エンドポイントの [エンドポイントのホスト名] の URL を入力して [値] ボックスを更新し、[適用] を選択します。__

  9. [アプリ設定] セクションの下部にある [適用] を選択します。

    注: アプリ設定を更新すると、アプリが再起動される可能性があるという警告が表示される場合があります。 確認 を選択します。 アプリケーション設定が保存されるまで待ってから、このラボを続行してください。

  10. [構成] セクションで [概要] を選択します。

  11. [概要] セクションで [再起動] を選択し、 [はい] を選択して、アプリの再起動プロセスを確定します。

    注: 再起動の動作が完了するまで待ってから、このラボを続行してください。 動作が完了すると、通知が表示されます。

タスク 4: Web コンテンツをテストする

  1. Azure portal のナビゲーション ウィンドウで [リソース グループ] リンクを選択します。

  2. [リソース グループ] ブレードで、このラボで前に作成した ManagedContent リソース グループを選択します。

  3. [MarketingContent] ブレードで、このラボで前に作成した contentdeliverynetwork CDN プロファイルを選択します。

  4. [CDN プロファイル] ブレードで cdnweb [yourname] エンドポイントを選択します。

  5. [エンドポイント] ブレードで [エンドポイントのホスト名] リンクの値をコピーします。

  6. タスク バーで、Microsoft Edge アイコンのショートカット メニューをアクティブにしてから、 [新しいウィンドウ] を選択します。

  7. 新しいブラウザー ウィンドウで、cdnweb [yourname] エンドポイントの [エンドポイントのホスト名] の URL を参照します。

  8. Content Delivery Network を使用して提供される、Web サイトとマルチメディアのコンテンツを確認します。

確認

この演習では、Content Delivery Network を使用してマルチメディア コンテンツと Web アプリケーション自体が提供されるように Web アプリを更新しました。