AzureでStatic Web Apps前にCDN(Front Door)をかます
nakashi94独自ドメインでStatic Web Appsにアクセスするまでは下記の通り
nakashi94Front Doorとは
nakashi94目標構成
nakashi94前回作業していた下記の環境を引き継ぐので、Static Web Appsに割り当てられているカスタムドメインを削除する必要がある。
nakashi94Static Web Appsに割り当てていたカスタムドメインを解除した。
少なくとも15分は解除したドメイン名を使用できない。
ドメイン名はnytest-piyo.xyz
nakashi94Front Doorのエンドポイントにカスタムドメインを割り当てる必要がある。
DNSゾーン(nytest-piyo.xyz)にFront DoorのエンドポイントをAレコードとして追加する。
nakashi94上記直接DNSゾーンにレコードを手動で登録したけど、Front Doorにドメインの項目があるからここから登録を試みる
nakashi94Static Web AppsのドメインはAzure側でドメイン検証が行われているため、Front Doorに登録するStatic Web Appsのデフォルトドメインに対する証明書の種類はBring Your Own Certificate ではなく AFDマネージドを選択する。
nakashi94検証中のドメインに対してDNSにレコードを追加するボタンを押下する必要がある。
この時のTTLは10秒に選択する
nakashi94_dnsauthのTXTレコードがDNSゾーンに追加されている。
しかし、ドメインは検証中になっている。
とりあえず少し待ってみる。
nakashi94ドメイン検証、承認済みになった。
nakashi94エンドポイントの関連付けは後ほど、このタイミングではルートが作成されていないので、ルートを作成する。ルートの作成時に配信元グループと配信元を作成する。
完了したら、作成したドメインにエンドポイントとルートを関連付ける。
nakashi94ルート、配信元グループ、配信元を作成したら、丁寧にFrontDoorのエンドポイントを示すAレコードを追加するように促された。
nakashi94https://nytest-piyo.xyz/generalでStatic Web Appsにデプロイしているアプリにアクセスできた。
※FrontDoorの設定はすぐ消す
nakashi94wafの関連付けがFront Doorのデフォルトエンドポイントに対して行われていたため、こちらの関連付けを削除してnytest-piyo.xyzに紐付けを行う。
nakashi94Azure Front Door を使用したエンド ツー エンド TLS
nakashi94Front Doorに登録したカスタムドメインは自動で証明書管理されている。
nakashi94手順（前提としてドメインは取得済み）
- 取得したドメイン名でDNSゾーンを作成する。
- Static Web Appsを作成する。
- Front Doorを作成する。
- Front Doorに 1 で作成したDNSゾーンをドメインとして追加する。
- Static Web Appsへのデフォルトドメインへ流す配信元グループと配信元を作成する。
- 5 で作成した配信元グループを関連づけたルートを作成する。エンドポイントは任意のFront Doorのエンドポイント。
- 1 で作成したDNSゾーンに取得したドメインが、FrontDoorの任意のエンドポイント指し示すIPアドレスに名前解決ができるようにAレコードを登録する。
- フロントドアのWAFポリシーを作成したドメインに紐づける。
ざっくりこんな感じ