📒

Azure で FrontDoor と StaticWebApp をカスタムドメイン設定する

に公開
DNS
Azure Static Web Apps
frontdoor
tech

カスタムドメインの設定でハマったので検証した際の最短手順を残します。

前提

  • 2024年10月頃の記録です。現在は改善されているかもしれません。
  • StaticWebApp（以降SWA）と FrontDoor(以降FD) という構成です。

結論から言うと、FDにCNAMEを先に設定するパターンを進めてしまい、つまづきました。
逆だったかもしれねェ…の落とし穴を踏んだと思われます。

先にFDにCNAME設定を行うと、FDからSWAを同一コンテンツとして設定できずに詰みます。
site.hoge.com にCNAMEは1つしか登録できないですので。

先にSWAにカスタムドメインを設定するとうまくいきました。

0. 外部レジストラ(今回はNameCheap)でAPEXドメイン(nemuchi.xyz)を取得する

1. Azure FrontDoor と SWA　を作成する


※FDは通常、グローバル一択。リソース名がjapaneast云々となっていますがお許しを

2. SWAをdeployしておく(確認用)

3. NameCheapで www をSWAのFQDNに対して CNAME登録


dig で見てみます

dig www.nemuchi.xyz
; <<>> DiG 9.10.6 <<>> www.nemuchi.xyz
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 40780
;; flags: qr rd ra; QUERY: 1, ANSWER: 5, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 512
;; QUESTION SECTION:
;www.nemuchi.xyz.		IN	A

;; ANSWER SECTION:
www.nemuchi.xyz.	1357	IN	CNAME	blue-stone-00200d200.5.azurestaticapps.net.
blue-stone-00200d200.5.azurestaticapps.net. 158	IN CNAME azurestaticapps5.trafficmanager.net.

CNAME設定の確認ができました。

この時点で www.APEXドメイン(www.nemuchi.xyz) にアクセスすると、AppServiceの404とHTTPS通信のNGが出ます。

それでは、正当なリソースであることをSWA側に設定していきましょう。

6. SWAでカスタムドメインを設定する

カスタムドメイン＞追加＞他のDNSのドメイン　を選ぶ

<4>で登録したレコードに合うよう入力

1~2分で検証済み状態になる

すると今度は404ではなくコンテンツが見えました。HTTPS通信も大丈夫。

カスタムドメインがSWAと無事に紐づいたので、次はこのカスタムドメイン(with検証済み)をFDに移譲していきます。

7.カスタムドメインをFDに移譲設定する

ルートや配信元グループは設定済です

Azureの事前検証済ドメインを選ぶのがポイント。
ここで、SWAのカスタムドメインを選ぶことができるので事実上移譲できるみたいですね。

逆の仕組み(SWAからFDのカスタムドメイン設定の導線)は用意されてない気配なので、現状この順でないとスムーズにいきませんでした（2024年10月時点）
また、terraform でこの紐づけパラメータは見つかりませんでした。
DNSを外部プロバイダーでなく、Azureで登録していれば出来そうです。

8.ルートを追加して動作確認

www.APEXドメイン(www.nemuchi.xyz) にアクセスします。
無事にSWAコンテンツです。

この時点で、FDのエンドポイントはどうでしょうか？
404です。期待通りになりました。

以上、カスタムドメイン設定にまつわる最短手順の記録でした。

Appendix

あまりユースケースはない気がしますが、FDのURLでも404にならず見れるようにしたい場合は、SWAの設定を適用する必要があります。
SWAのrootに以下を置き、デプロイします

{
  "networking": {
    "allowedIpRanges": ["AzureFrontDoor.Backend"]
  },
  "forwardingGateway": {
    "requiredHeaders": {
      "X-Azure-FDID": "FD＞概要＞基本＞フロントドアID"
    },
    "allowedForwardedHosts": [
      "helloworld-prod-japaneast-front-door-hve9cuh6agenhrej.z03.azurefd.net",
      "www.nemuchi.xyz"
    ]
  }
}

試しに手元からデプロイしたログは以下の通りです

swa deploy --env production ./dist --deployment-token YOUR_SUPER_LONG_DEPLOYMENT_KEY_FROM_SWA_RESOURCE

Welcome to Azure Static Web Apps CLI (2.0.1)

Deploying front-end files from folder:
  /Users/helloworld/dist

Deploying to environment: production

Found configuration file:
  /Users/helloworld/staticwebapp.config.json

Deploying project to Azure Static Web Apps...
✔ Project deployed to https://blue-stone-00200d200.5.azurestaticapps.net 🚀

Discussion