ラボ 13:Azure Web アプリを作成して構成する

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

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

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

Instructions

開始する前に

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

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

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

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

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

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

  • Microsoft Edge

課題シナリオ

このラボでは、GitHub と統合する Azure Web アプリをデプロイして構成します。 Web アプリは、社内の従業員のみがアクセスできる単一ページ Web アプリの単純な実装になります。 この Web サイトは、会社戦略や部門の販売目標に関連するコンテンツをホストします。

Azure portal を使用して Web アプリを作成し、それを GitHub リポジトリに接続します。 これを行うには、無料の GitHub アカウントが必要です。これは、このラボの一部として提供されるサンプル Web サイトコンテンツのアップロードに使用します。 Web アプリが稼働したら、コンテンツに変更を加え、CI/CD 手法を使用して GitHub コンテンツが Web アプリに同期されるのを確認します。

これは従業員専用の Web アプリであるため、Azure AD でユーザーを作成し、ユーザー認証を使用して Web アプリのセキュリティを実装することで、Web アプリへのアクセスをセキュリティで保護する必要があります。

アーキテクチャの図

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

演習 1:Azure App Service Web アプリを作成する

タスク 1:GitHub アカウントを作成し、サンプル Web アプリ コードをリポジトリにアップロードする

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

  2. ブラウザー ウィンドウで GitHub Web サイト (https://github.com/) を参照し、アカウントがまだない場合は新しく作成します。

  3. ログインしたら、メイン ページの [新規作成] ボタンをクリックして新しいリポジトリを作成します。

  4. リポジトリに名前と説明を付け、パブリックとプライベートのどちらにするかを選びます。

  5. [README ファイルの追加] セクションで、[README ファイルの追加] を選びます。

  6. [リポジトリの作成] を選択してリポジトリを作成します。

  7. GitHub のリポジトリ ページで、[ファイルの追加] を選び、ドロップダウン リストから [ファイルのアップロード] を選びます。

  8. エクスプローラー ウィンドウを開き、Allfiles (F): \Allfiles\Labs\13\Starter\webapp-sam-lab13 に移動し、すべてのファイルを選び、ドラッグ アンド ドロップ機能を使用して GitHub リポジトリに追加します。

  9. 行った変更を説明するコミット メッセージを追加します (例:”サンプル Web アプリ コードの初回コミット”)。

  10. [変更点のコミット] を選んで、サンプル Web アプリ コードをリポジトリにアップロードします。

タスク 2:Azure portal で Web アプリを作成し、それを GitHub アカウントに接続する

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

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

  3. Azure portal のナビゲーション ペインで、左側のメニューの [リソースの作成] ボタンを選びます。

  4. 検索バーに「Web アプリ」と入力し、オプションの一覧から [Web アプリ] を選びます。

  5. [Web アプリ] ブレードで、[作成] を選びます。

  6. [Web アプリの作成] ブレードで、[基本] タブを選び、次のアクションを実行します。

    設定 アクション
    [サブスクリプション] ドロップダウン リスト 既定値のままにします
    リソース グループ [新規作成] を選び、「wProject-Sam-RG」と入力して、[OK] を選びます
    名前  webapp-sam[yourname] を入力します
    発行 [コード] を選択します
    ランタイム スタック [.NET 8 (LTS)] を選びます
    オペレーティング システム [Windows] を選択します
    リージョン [米国東部] リージョンを選択します
    Windows プラン (米国東部) [新規作成] を選び、[名前] フィールドに「ManagedPlan」と入力して、[OK] を選びます
    料金プラン [Standard S1] を選択します

  7. [監視] タブを選び、[Application Insights を有効にする] セクションで、[はい] を選びます。 次に、 Review + create を選択します。

  8. ここまでの手順で選択したオプションを見直してから、[作成] を選びます。

    注: Web アプリが作成されるまで待ってから、このラボを続行してください。

  9. [概要] ブレードで、[リソースに移動] ボタンを選択して、新しく作成された Web アプリに移動します。

タスク 3:GitHub から Web アプリをデプロイする

  1. Azure portal を開き、前のタスクで作成した Web アプリに移動します。

  2. [設定] セクションで、左側のメニューから [構成] を選びます。

  3. [構成] ブレードで、[全般的な設定] を選びます。

  4. [全般的な設定] タブの [Basic Auth Publishing Credentials](基本認証発行資格情報) で [オン] を選び、[保存] を選んでから、[続行] を選びます。

    注:構成が保存されるまで 1 分待ちます。

  5. [デプロイ] セクションで、左側のメニューから [デプロイ センター] を選びます。

  6. [設定] タブで、ドロップダウン リストから [ソース] を選び、[GitHub] を選びます。

  7. [GitHub] セクションで下にスクロールし、[承認] ボタンを選んで、Azure が GitHub アカウントにアクセスできるようにします。

  8. GitHub アクセスを正常に承認したら、次のアクションを実行してから、[保存] を選びます。

    設定 アクション
    [組織] ドロップダウン リスト GitHub 組織を選びます
    [リポジトリ] ドロップダウン リスト タスク 1 で作成したリポジトリを選択します
    [ブランチ] ドロップダウン リスト タスク 1 で作成したブランチを選択します

    注:構成が保存されるまで 1 分待ちます。

  9. 前のタスクで作成した GitHub リポジトリを開き、上部のメニューから [アクション] を選びます。

  10. [アクション] タブの [すべてのワークフロー] で、[Add or update the Azure App Service build and deployment workflow config](Azure App Service のビルドとデプロイのワークフロー構成を追加または更新する) を選んで、ビルドとデプロイのプロセスを表示します。

  11. ビルドとデプロイが正常に完了したら、Azure portal を開き、[App Service] に移動します。

  12. [App Service] ブレードで、[概要] を選び、次に [参照] を選びます。

  13. Web アプリのさまざまな関数と機能を確認してテストし、意図したとおりに動作することを確認します。

    注:Web アプリのブラウザー ウィンドウは開いたままにしておきます。後で必要になります。

タスク 4:GitHub でコードを変更し、変更が Web アプリに反映されることを確認する

  1. Web アプリのコードを含む GitHub リポジトリを開きます。

  2. Pages フォルダーで Index.cshtml ファイルを選び、コード プレビューで、ファイルを編集するための鉛筆アイコンを選択します。

  3.  Index.cshtml ファイルのコード エディター タブで、既存のファイルの 9 行めのコードを削除します。

     <h1>My Gallery</h1>

  4. 次のコードを追加します。

     <h1>Portfolio Gallery</h1>
 <P>This is a simple .NET web project.</P>

  5. [変更点のコミット] を選び、[コミット メッセージ] と [Extended description](拡張説明) を記述し、 Index.cshtml ファイルに対する [変更点のコミット] を選びます。

    注:変更が Web アプリに反映されるまで待ちます。 これは、デプロイ プロセスに応じて数分から 1 時間かかる場合があります。

  1. Web アプリのブラウザー ウィンドウを開き、ブラウザー ウィンドウを最新の情報に更新して変更を確認します。

  2. 変更内容が表示されることを確認します。

  1. 変更の影響を受ける機能をテストして、すべてが期待どおりに動作することを確認します。

  2. 変更が Web アプリに反映されない場合は、必要に応じてデプロイ ログを調べてトラブルシューティングを行います。

  1. 変更がまだ表示されない場合は、トレーナーにお問い合わせください。

    注:変更をリポジトリにコミットして Web アプリにデプロイする前に、必ずテストしてください。 さらに、GitHub でコードを操作するときは、バージョン管理とコラボレーションのベスト プラクティスに従うことが重要です。

確認

この演習は、Azure portal で Web アプリを作成し、それを GitHub リポジトリに接続することに関するものです。

演習 2:Web アプリの自動スケーリングを有効にする

タスク 1:カスタム スケーリングを有効にする

  1. Azure portal を開いて [App Service] に移動し、前の演習で作成した Web アプリを選びます。

  2. [Web アプリ] ブレードで、[設定] セクションから [スケールアウト (App Service プラン)] を選びます。

  3. [スケールアウト (App Service プラン)] ページの [Scale out method](スケールアウト方法) で、[ルール ベース] を選びます。

  4. ページの下部にあるアラート メッセージ “Rule based scaling will be ignored if Automatic scaling is enabled”(自動スケーリングが有効になっている場合、ルール ベースのスケーリングは無視されます) の右横の、** [Manage rules based scaling](ルール ベースのスケーリングの管理) リンクを選びます。

  5. [自動スケーリング設定] ページで、次の情報を入力して [保存] を選びます。

    設定 情報
    構成 [カスタム自動スケーリング] を選択します
    スケール モード [メトリックに基づいてスケーリングする] を選択します
    ルール [ルールの追加] リンクを選び、[スケール ルール] ブレードで、すべての設定の既定値を保持し、[追加] を選びます
    [インスタンスの制限] セクションの [最小値] テキスト ボックス 「1」と入力します
    [インスタンスの制限] セクションの [最大値] テキスト ボックス 「4」と入力します
    [インスタンスの制限] セクションの [既定値] テキスト ボックス 「2」と入力します

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

タスク 2:CPU 使用率に基づいてインスタンス数を増やすスケールアウト オプションを構成する

  1. [自動スケーリング設定] ページで、下にスクロールし、[+ ルールの追加] を選びます。

  2. [スケール ルール] ページで、次のアクションを実行してから、[追加] を選び、次に [保存] を選びます。

    設定 アクション
    [メトリック名] ドロップダウン リスト [CPU の割合] を選びます
    [演算子] ドロップダウン リスト [次の値より大きい] を選びます
    [スケール操作をトリガーするメトリックのしきい値] テキスト ボックス 「60」と入力します
    [期間 (分)] テキスト ボックス 「5」と入力します
    [操作] ドロップダウン リスト [カウントを増やす量] を選びます
    [クール ダウン (分)] テキスト ボックス 「5」と入力します
    [インスタンス数] テキスト ボックス 「1」と入力します

  3. 設定した CPU しきい値に到達するトラフィックを生成して、ルールをテストします。

  4. 自動スケーリング グループが想定どおりにスケールアウトすることを確認します。

    注:同様の手順に従って、CPU 使用率に基づいてインスタンス数を減らすスケールイン オプションを構成できます

タスク 3:CPU 使用率に基づいてインスタンス数を減らすスケールイン オプションを構成する

  1. [自動スケーリング設定] ページで、下にスクロールし、[+ ルールの追加] を選びます。

  2. [スケール ルール] ページで、次のアクションを実行し、[追加] を選び、次に [保存] を選びます。

    設定 アクション
    [メトリック名] ドロップダウン リスト [CPU の割合] を選びます
    [演算子] ドロップダウン リスト [未満] を選びます
    [スケール操作をトリガーするメトリックのしきい値] テキスト ボックス 「40」と入力します
    [期間 (分)] テキスト ボックス 「5」と入力します
    [操作] ドロップダウン リスト [カウントを減らす量] を選びます
    [クール ダウン (分)] テキスト ボックス 「3」と入力します
    [インスタンス数] テキスト ボックス 「1」と入力します

  3. 設定した CPU しきい値に到達するトラフィックを生成して、ルールをテストします。

  4. 自動スケーリング グループが想定どおりにスケールインすることを確認します。

    注:同様の手順に従って、メモリ使用量や HTTP キューの長さなどの他のメトリックに基づくスケールアウト オプションを構成できます。

タスク 4:Azure ロード テストを作成する

  1. Azure portal で、[Search resources, services, and docs](リソース、サービス、ドキュメントの検索) テキスト ボックスを使用して、Azure Load Testing を検索し、結果の一覧で [Azure Load Testing] を選びます。

  2.  [Azure Load Testing] ブレードで、[+ 作成] を選びます。

  3. [Create a load testing resource](ロード テスト リソースの作成) ブレードで、次のアクションを実行してから、[確認 + 作成] を選択します。

    設定 アクション
    [サブスクリプション] リスト 既定値を保持します
    [リソース グループ] ドロップダウン リスト 一覧の WebProject-Sam-RG を選びます
    [名前] テキスト ボックス loadtest-sam[yourname] を入力します
    [リージョン] ドロップダウン リスト Web アプリをテストする Azure リージョンを選びます

  4. [作成] を選んで、Azure ロード テストを作成します。

    注:Azure ロード テストが作成されるのを待ってから、このラボを続行します。

  5. [概要] ブレードで、[リソースに移動] ボタンを選択して、新しく作成された Azure ロード テストのブレードに移動します。

タスク 5:Web アプリのパフォーマンス メトリックを迅速にテストして分析する

  1. 新しく作成された [Azure Load Testing] ブレードの [テスト] セクションで、[テスト] を選びます。

  2. [+ 作成] を選び、ドロップダウン リストから [URL ベースのテストの作成] を選びます。

  3. [URL ベースのテストの作成]  ブレードで次のアクションを実行し、[テストの実行] を選びます。

    設定 アクション
    [テスト URL] テキスト ボックス “このラボで作成した Web アプリの URL” を入力します**
    [負荷の指定] セクション 一覧の [Virtual users](仮想ユーザー) を選びます
    [Number of virtual users](仮想ユーザーの数) テキスト ボックス 「100」と入力します
    [テスト期間 (分)] テキスト ボックス 「3」と入力します
    [ランプアップ時間 (分)] テキスト ボックス 「0」と入力します

    注:Azure ロード テストが完了するまで約 3 分待ちます。

  4. ロード テストが完了したら、パフォーマンス メトリックを分析し、パフォーマンスのボトルネックを特定します。

  5. [ロード テストの結果] を選び、Web アプリの [統計] と [Client-side metrics](クライアント側のメトリック) を確認します。

  6. [Engine health](エンジンの正常性) を選び、Web アプリの [Load engine health metrics](負荷エンジンの正常性メトリック) を確認します。

  7. ロード テスト結果をダウンロードするには、[ダウンロード] を選び、ドロップダウン リストから [結果] を選びます。

このタスクでは、Azure Load Testing Web アプリを作成し、ターゲット Web アプリケーションに対してロード テストを実行しました。 設定を構成し、パフォーマンス メトリックを監視し、結果を分析してパフォーマンスのボトルネックを特定しました。

確認

この演習では、CPU 使用率に基づいてルールを構成することで、Web アプリのカスタム スケーリングを有効にする方法について学習しました。 Azure Load Testing を使用してロード テストも実行し、パフォーマンス メトリックを分析してパフォーマンスのボトルネックを特定および対処しました。 この演習は、スケーラビリティを最適化し、Web アプリケーションの最適なパフォーマンスを確保するための実際の体験を提供しました。

演習 3:ユーザー認証と認可を構成する

タスク 1:Web アプリの認証を構成する

  1. Azure portal を開き、認証用に構成する Web アプリに移動します。

  2. [設定] セクションで、左側のメニューから [認証] を選びます。

  3. [認証] ペインで、[ID プロバイダーの追加] を選びます。

  4. [ID プロバイダーの追加] ページで、次のアクションを実行してから、[追加] を選びます。

    設定 アクション
    [ID プロバイダー] ドロップダウン リスト [Microsoft] を選びます
    [テナントの種類] セクション [従業員] を選びます
    [アプリ登録の種類] セクション [アプリの登録を新規作成する] を選びます
    [名前] テキスト ボックス “Web アプリの名前” を入力します**
    [サポートされているアカウントの種類] セクション [現在のテナント - 単一テナント] を選びます
    [アクセスの制限] セクション [認証が必要] を選びます
    [認証されていない要求] セクション [HTTP 302 Found redirect: recommended for Websites](HTTP 302 Found リダイレクト:Web サイトに推奨) を選びます

  5. 認証プロバイダーを構成したら、Web アプリケーションに固有の認証設定を構成できます。 これには、アプリケーションへのアクセスを許可されるユーザーやグループ、ユーザーの認証方法 (サインイン ページやポップアップ ウィンドウなど)、整備する必要があるアクセス制御の種類などが含まれます。

  6. Web アプリのブラウザー ウィンドウを開き、ブラウザー ウィンドウを最新の情報に更新します。 Microsoft 認証プロバイダー経由でログインするように求めるメッセージが表示されます。それを完了すると、通常どおりアプリケーションにアクセスできるはずです。

これで完了です。 これらの手順で、Azure Web アプリケーションの認証を設定し、許可されているユーザーのみがアクセス可能になるようにできるはずです。

タスク 2:サインイン ログのアクティビティを表示する

  1. Azure portal を開き、Microsoft Entra ID に移動します。

  2. [Microsoft Entra ID] ページで、左側のメニューから [エンタープライズ アプリケーション] を選びます。

  3. **[エンタープライズ アプリケーション すべてのアプリケーション]** ページで、ご自分の Web アプリを検索して選択します。

  4. [アクティビティ] セクションで、左側のメニューから [サインイン ログ] を選びます。

  5. ユーザーの名前、アクセスしたアプリケーション、サインインの日時などの特定の条件に基づいてサインイン ログをフィルター処理できます。

  6. さらに分析やレポートを行うために、サインイン ログを CSV ファイルにエクスポートすることもできます。

    注:最近のサインイン ログが表示されるまで数分待ちます。

これで完了です。 これらの手順で、Azure Web サービスのサインイン ログを構成し、アプリケーションがセキュリティで保護され、組織のポリシーに準拠していることを確認できるはずです。

確認

この演習は、Web アプリのユーザー認証とサインイン ログの構成に関するものです。

演習 4:Web アプリのための Application Insights

タスク 1:Application Insights を使用してアプリケーションのパフォーマンスを表示する

  1. Azure portal を開いて [App Service] に移動し、前の演習で作成した Web アプリを選びます。

  2. [Web アプリ] ブレードの [設定] セクションで、[Application Insights] を選びます。

  3. [Application Insights データの表示] を選択します。

  4. 応答時間、サーバーの応答時間、ページ ビューなどのアプリケーションのいくつかのパフォーマンス メトリックを含むダッシュボードが表示されます。

  5. 特定のメトリックに関する詳細情報を表示するには、それを選択して対応するグラフを開きます。

  6. ここから、グラフの時間の範囲と細分性を調整して、関心のあるデータを表示できます。

  7. [フィルター] オプションを使用して、特定の条件に基づいてデータを絞り込むこともできます。

  8. パフォーマンスの問題に気づいた場合は、[調査] オプションを使用してデータをドリルダウンし、問題の根本原因を特定できます。

  9. さらに、[アラート] 機能を使用して特定のパフォーマンス メトリックに対するアラートを設定し、許容される範囲を超えた場合に通知を受け取ることができます。

お疲れさまでした。Application Insights でアプリケーションのパフォーマンスを表示することに成功しました。 ここで、タスク 3 のカスタム テレメトリの構成に進むことができます。

タスク 2:Log Analytics で Web パフォーマンス メトリックのクエリを実行する

  1. [Application Insights] ブレードの [監視] セクションの下で、[ログ] を選びます。

  2. これにより、Application Insights リソースの Log Analytics ワークスペースが開きます。

  3. クエリ エディターで、次のクエリを入力して Web パフォーマンス メトリックを取得します。

requests  
| where timestamp > ago(24h)  
| summarize count() by bin(timestamp, 1h), resultCode

  1. このクエリは、過去 24 時間の 1 時間ごとの要求数と HTTP 状態コードを取得します。 必要に応じて、クエリの時間の範囲と細分性を変更できます。

  2. [実行] を選択して、クエリを実行します。 結果は、クエリ エディターの下の表に表示されます。

  3. クエリ エディターの [グラフ] ボタンをクリックして、クエリ結果を視覚化することもできます。 これにより、データをより視覚的な形式で表示するグラフが開きます。

  4. 今後使用するためにクエリを保存する場合は、[保存] ボタンを選び、クエリに名前と説明を付けます。

お疲れさまでした。Log Analytics で Web パフォーマンス メトリックのクエリを実行することに成功しました。 ここで、タスク 4 のカスタム テレメトリの作成に進むことができます。

タスク 3:Azure Web アプリでアプリケーション マップを表示する

  1. [Application Insights] ブレードの [調査] セクションで、[アプリケーション マップ] を選びます。

  2. [アプリケーション マップ] ブレードで、[アプリケーション マップ] ページの中央にある円を選択します。

  3. アプリケーション マップから、全体的な正常性、パフォーマンス、さまざまなコンポーネント間の依存関係などのアプリケーションのさまざまな側面を調べることができます。

  4. マップ内で特定のコンポーネントをクリックしてドリルダウンし、個々の依存関係とパフォーマンス メトリックを分析できます。

これで完了です。 Application Insights を設定し、Azure Web アプリのアプリケーション マップにアクセスすることに成功しました。

タスク 4:Web アプリのための Application Insights で可用性機能を設定する

  1. [Application Insights] ブレードの [調査] セクションで、[可用性] を選びます。

  2. [可用性] ブレードで、[標準テストの追加] を選択して新しい可用性テストを作成します。

  3. [標準テストの作成] ページで、次のアクションを実行してから、[作成] を選びます。

    設定 アクション
    [テスト名] テキスト ボックス standardTest と入力します
    [URL] テキスト ボックス “Web アプリの URL” を入力します**
    [テスト間隔] ドロップダウン リスト [5 分] を選びます
    [テストの場所] ドロップダウン リスト “テストの実行元の場所” を選びます**

  4. これで、指定された間隔に従って可用性テストが実行され、Application Insights リソースの [可用性] セクションで結果を監視できます。

    注:テスト結果が表示されるまで 5 から 10 分待ちます。

  5. [可用性] セクションから、テスト結果の表示、アラートの設定、Web アプリの可用性とパフォーマンスの分析を行うことができます。

これで完了です。 Azure の Web アプリのために、Application Insights の可用性機能を設定することに成功しました。

確認

この演習は、Azure で Application Insights サービスを有効にして利用することによる、Web アプリの問題の監視および診断に関するものです。

エクササイズ 5:Web アプリのキャッシュを有効にする

タスク 1:CDN プロファイルを作成する

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

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

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

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

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

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

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

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

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

  8. [概要] ブレードで、[リソースに移動] ボタンを選択して、新しく作成された CDN プロファイルのブレードに移動します。

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

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

    設定 アクション
    [名前] テキスト ボックス cdn-web-sam[yourname] を入力します
    [配信元の種類] ドロップダウン リスト [Web アプリ] を選択します
    [配信元のホスト名] ドロップダウン リスト このラボで前に作成した、Web アプリの webapp-sam [yourname].azurewebsites.net オプションを選びます
    [配信元のパス] テキスト ボックス 既定値のままにします
    [配信元のホスト ヘッダー] テキスト ボックス 既定値のままにします
    [プロトコル] セクションと [配信元のポート] セクション 既定値のままにします
    [最適化の対象] ドロップダウン リスト [一般的な Web 配信] を選択します

お疲れさまでした。CDN プロファイルと CDN エンドポイントの作成に成功しました。

タスク 2:Web アプリ エンドポイントでキャッシュを有効にする

  1.  [Front Door と CDN プロファイル]  ブレードで、先ほど作成した cdn-web-sam[yourname]** エンドポイントを選びます。

  2.  [CDN エンドポイント] ブレードの [設定] セクションで、[キャッシュ規則] を選択します。

  3. [キャッシュ規則]  ブレードで次のアクションを実行します。

    設定 アクション
    [クエリ文字列のキャッシュ動作] ドロップダウン リスト [Cache every unique URL](一意の URL をすべてキャッシュ) を選びます

  4. [保存] ボタンを選択します。

お疲れさまでした。Web アプリ エンドポイントでキャッシュを有効にすることに成功しました。 これで、CDN によって指定されたファイルまたはパスがキャッシュされ、Web アプリのパフォーマンスとスケーラビリティが向上します。

確認

この演習は、Azure CDN を使用した Web アプリのキャッシュの有効化に関するものです。 タスクを完了すると、CDN プロバイダーの登録、CDN プロファイルの作成、およびキャッシュ規則の構成に関する実用的な経験が得られます。