チュートリアル: Azure Static Web Apps 用の CDN を構成する

前提条件

• Time to Live (TTL) が 48 時間未満に設定された静的 Web アプリ用に構成されたカスタム ドメイン。
• Azure Static Web Apps を使用してデプロイされ、Standard ホスティング プランを使用するアプリケーション。

Static Web Apps リソースでエンタープライズレベルのエッジを有効にする

az extension add -n enterprise-edge

az staticwebapp enterprise-edge enable -n my-static-webapp -g my-resource-group

前提条件

• アクティブなサブスクリプションが含まれる Azure アカウント。 無料でアカウントを作成する
• Azure Static Web Apps サイト。 最初の静的 Web アプリを構築する
• Azure Static Web Apps Standard および Azure Front Door Standard/Premium プラン。 詳細については、Static Web Apps の料金のページを参照してください。
• グローバル アプリケーションのページ読み込みの高速化、セキュリティの強化、信頼性の最適化を実現するために、エンタープライズ グレードのエッジを使用することを検討してください。

Azure Front Door を作成する

1. Azure portal にサインインします。

2. ホーム ページまたは Azure メニューから[+ リソースの作成] を選択します。 Front Door プロファイルと CDN プロファイルを検索し、[作成]>[Front Door プロファイルと CDN プロファイル] を選択します。

3. [比較オファリング] ページで [クイック作成] を選択してから、[続行して Front Door を作成] を選択します。

4. [Front Door プロファイルの作成] ページで、次の設定を入力するか、選択します。

   設定	値
   サブスクリプション	Azure サブスクリプションを選択します。
   リソース グループ	リソース グループ名を入力します。 この名前は、多くの場合、静的 Web アプリで使用されるグループ名と同じです。
   リソース グループの場所	新しいリソース グループを作成する場合は、最も近い場所を入力します。
   名前	「my-static-web-app-front-door」と入力します。
   レベル	標準を選択します。
   エンドポイント名	Front Door ホストの一意の名前を入力します。
   発生元の種類	[Static Web App](静的 Web アプリ) を選択します。
   配信元のホスト名	ドロップダウンから静的 Web アプリのホスト名を選択します。
   キャッシュ	[キャッシュを有効にする] チェックボックスをオンにします。
   クエリ文字列のキャッシュ動作	[クエリ文字列を使用する] を選択します
   圧縮	[圧縮を有効にする] を選択します
   WAF ポリシー	この機能を有効にする場合は、[新規作成] を選択するか、ドロップダウンから既存の Web アプリケーション ファイアウォール ポリシーを選択します。

   Note

   Azure Front Door プロファイルを作成するときは、Front Door を作成したものと同じサブスクリプションから配信元を選択する必要があります。

5. [確認と作成] を選択し、次に [作成] を選択します。 作成プロセスが完了するまでに数分かかることがあります。

6. デプロイが完了したら、[リソースに移動] を選択します。

7. 条件を追加します。

認証ワークフローのキャッシュを無効にする

次の設定を追加して、Front Door のキャッシュ ポリシーで認証および承認関連のページのキャッシュを無効にします。

条件の追加

1. Front Door の [設定] で [ルール セット] を選択します。

2. [追加] を選択します。

3. [ルール セット名] テキスト ボックスに、「セキュリティ」と入力します。

4. [ルール名] テキスト ボックスに、[NoCacheAuthRequests] と入力します。

5. [条件の追加]を選択します。

6. [要求パス] を選択します。

7. [演算子] ドロップダウン、[次で始まる] の順に選択します。

8. [値] テキストボックスの上の [編集]リンクを選択します。

9. テキスト ボックスに「/.auth」と入力し、[更新] を選択します。

10. [文字列変換] ドロップダウンではオプションを選択しません。

アクションを追加します

1. [アクションの追加] ドロップダウンを選択します。

2. [ルート構成のオーバーライド] を選択します。

3. [キャッシュ] ドロップダウンで、[無効] を選択します。

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

ルールをエンドポイントに関連付ける

ルールが作成されたので、そのルールを Front Door エンドポイントに適用します。

1. Front Door で [ルール セット] を選択し、[関連付けなし] リンクを選択します。

   

2. キャッシュ規則を適用するエンドポイント名を選択し、[次へ] を選択します。

3. [関連付け] を選択します。

   

Front Door の ID をコピーする

次の手順を使用して、Front Door インスタンスの一意識別子をコピーします。

1. Front Door で、左側のナビゲーションの [概要] リンクを選択します。

2. "Front Door ID" というラベルの付いた値をコピーし、後で使用するためにファイルに貼り付けます。

   

静的 Web アプリの構成を更新する

Front Door との統合を完了するには、アプリケーション構成ファイルを更新して、次の機能を実行する必要があります。

• サイトへのトラフィックを Front Door 経由のみに制限する
• サイトへのトラフィックを Front Door インスタンスからのみに制限する
• サイトにアクセスできるドメインを定義する
• セキュリティで保護されたルートのキャッシュを無効にする

サイトの staticwebapp.config.json ファイルを開き、次の変更を行います。

1. 構成ファイルに次のセクションを追加して、Front Door のみを使用するようにトラフィックを制限します。

   "networking": {
     "allowedIpRanges": ["AzureFrontDoor.Backend"]
   }
   

2. サイトにアクセスできる Azure Front Door のインスタンスとドメインを定義するには、forwardingGateway セクションを追加します。

   "forwardingGateway": {
     "requiredHeaders": {
       "X-Azure-FDID" : "<YOUR-FRONT-DOOR-ID>"
     },
     "allowedForwardedHosts": [
       "my-sitename.azurefd.net"
     ]
   }
   

   最初に、Front Door インスタンスからのトラフィックのみを許可するようにアプリを構成します。 すべてのバックエンド要求で、Front Door で自動的に Front Door インスタンス ID を含む X-Azure-FDID ヘッダーが追加されます。 このヘッダーを必要とするように静的 Web アプリを構成することで、トラフィックを Front Door インスタンスのみに制限します。 構成ファイル の forwardingGateway セクションで、requiredHeaders セクションを追加し、X-Azure-FDID ヘッダーを定義します。 <YOUR-FRONT-DOOR-ID> を、前に準備しておいた Front Door ID に置き換えます。

   次に、Azure Front Door ホスト名 (Azure Static Web Apps ホスト名ではなく) を allowedForwardedHosts 配列に追加します。 Front Door インスタンスにカスタム ドメインが構成されている場合は、それらもこの一覧に含めます。

   この例では、my-sitename.azurefd.net をサイトの Azure Front Door ホスト名に置き換えます。

3. アプリ内のセキュリティで保護されたすべてのルートについて、ルート ヘッダーの定義に "Cache-Control": "no-store" を追加して、Azure Front Door のキャッシュを無効にします。

   {
       ...
       "routes": [
           {
               "route": "/members",
               "allowedRoles": ["authenticated", "members"],
               "headers": {
                   "Cache-Control": "no-store"
               }
           }
       ]
       ...
   }
   

この構成では、生成された *.azurestaticapps.net ホスト名を介してサイトを使用できなくなりますが、Front Door インスタンスで構成されたホスト名を介してのみ使用できます。

考慮事項

• カスタム ドメイン: これで、サイトが Front Door で管理されているため、Azure Static Web Apps のカスタム ドメイン機能が使用されなくなります。 Azure Front Door にはカスタム ドメインを追加するための別のプロセスがあります。 「Front Door にカスタム ドメインを追加する」を参照してください。 カスタム ドメインを Front Door に追加する場合は、静的 Web アプリ構成ファイルを allowedForwardedHosts リストに含めるように更新する必要があります。

• トラフィック統計情報: 既定では、Azure Front Door で、トラフィックの統計情報に影響する可能性がある正常性プローブが構成されます。 正常性プローブの既定値を編集することもできます。

• 旧バージョンの提供: 静的 Web アプリ内の既存のファイルに更新プログラムをデプロイする場合、Azure Front Door では、有効期限が切れるまで、以前のバージョンのファイルが引き続き提供される場合があります。 最新のファイルが確実に提供されるようにするには、影響を受けるパスの Azure Front Door のキャッシュを消去してください。