Azure Static Web Apps で外部カスタムドメインを設定する

2024年06月16日

はじめに

カスタムドメインの設定はどんなサイトやAPIを公開する際もほぼ必ず通る道にもかかわらず、毎回一番最初だけ作業をした後はほとんど触れないので手順や流れを忘れがちになるので、未来の同じ作業をする自分のためにメモ。
久し振りにAzure触るのだけど、昔と比べてだいぶ便利になっている気がする。またいつか未来の自分がこの設定するときはUIとかも変わっているのかな、と思いつつもとりあえず今のものを残しておく。
ドメインの取得は ~~悪名高い~~ お名前.comを利用しているので別のサービスを利用する場合は適宜読み替えて。

手順

DNSゾーンを作成する（Azureポータル）
ネームサーバーを登録する（お名前.com）
カスタムドメインの追加をする（Azureポータル）

DNSゾーンを作成する（Azureポータル）

『リソースの作成』から『DNSゾーン』を選んで作成する。
『Private DNS zone』と『Public（表記は無印）DNS zone』があるので、Publicのほうを選ぶ。

任意のリソースグループと名前を付けたら『確認および作成』でリソースを作成する。
ここの名前はあくまでAzure ポータル上の識別子だと思うので任意の名前でいいと思うんだけど、結局設定するドメイン名にしておくのが無難な気がする。

リソースができたらAzure ポータル側の作業はいったんおしまい。
リソースの画面を開いて『ネームサーバー1』～『ネームサーバー4』をクリップボードに控えておくか、画面を開きっぱなしにしておいて次の作業へ。

ネームサーバーを登録する（お名前.com）

以下はお名前.comを利用する場合。
別のサービスを利用する際は適宜いい感じに読み替えて。

管理画面から『ネームサーバー設定』→『ネームサーバーの設定』を選択する。

対象のドメインにチェックを入れて、画面下の『ネームサーバー情報を入力』とある欄に、Azure ポータルで表示されていた『ネームサーバー1』～『ネームサーバー4』を順番に入力して登録。

カスタムドメインの追加をする（Azureポータル）

再びAzure ポータルに戻って対象のリソースを開き、『カスタムドメイン』を選ぶ。
『他の DNS のカスタムドメイン』を選択して、設定したいカスタムドメインを入力して次へ。

TXTレコードを選んで『コードの生成』を選択して出てきたコードをクリップボードに控える。

DNSゾーンのリソースを開いて、『レコードセット』のメニューから追加を選択。
種類をTXTにして、さっきの控えたコードを設定したら保存。

しばらくしたらカスタムレコードの状態が『検証済』になるので、状態が変わったことを確認したら同様にCNAMEやALIAS、Aレコードなど必要なレコードをDNSに追加したら完成。（スクショ省略）

別解

ここまで手作業やってたけどAzureのDNSゾーンを使うのであれば、カスタムドメインの追加時に『Azure DNS のカスタムドメイン』のほうを選択すれば、対象のDNSゾーンリソースの選択・サブドメインの設定などを入力するだけでTXTレコードから、必要なCNAMEやALIAS、Aレコードを自動で追加してくれるので、人の作業ミスなどもなくレコード登録してくれるので楽ちん。
最初からそっちでやればよかった！

参考

そんな感じ