Azure Static Web Apps Custom Domain 設定 (AWSのRoute53で取得したドメインとAzure DNS使用)

Azure Static Web App は、 Microsoft Azure 上で提供される静的サイトのホスティングサービスです。
AWSのRoute53で取得したドメインをAzure DNSで引けるように設定してAzure Static Web AppsでCustom Domainで使われるようにドメイン設定について手順をまとめてみます。

- ネームサーバはAzure DNSで引けるように設定する。
- AWSのRoute53でドメインのネームサーバを変更する。
- Azure Static Web AppsでCustom Domainを設定する。

# Azure DNS

Azure側でDNSゾーンを作成します。
名前は下記のようにルートドメインからAzure DNSで引けるように設定します。

例) example.com
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/2c8a7314-55b9-4c4a-0fc1-ac7fdf1e4ecc.png)

作成後に概要のどころでDNSゾーンのネームサーバーが現れますので、メモしてください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/a41f4517-3d15-9aca-8424-89a88e2af498.png)

# AWS Route53

購入してあるドメインに対してネームサーバを変更します。

Azureでは決まっているどころで制限があるドメインしか購入できないため、Route53でドメインを管理していることを仮定します。

Route53のRegistered domainsメニューから該当ドメインをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/b76e17d2-4e55-ec5a-47a0-175b3458f548.png)

詳細情報が現れたら Add or edit name servers をクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/ac0e1270-b0e7-55a1-a717-9451f851deae.png)

ドメインのネームサーバを先ほどAzureで作成したDNSゾーンのネームサーバのものに変更します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/70e51dfd-eae4-5e1c-82e1-5bbe02e8f105.png)

変更後にはRoute53からメールが届きます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/7e9a5fe1-7d51-4e54-0df8-c3403d574977.png)

ネームサーバーが変更されたとき、上位レジストリーのルートネームサーバーへの反映は、ドメインの種類によって異なりますが15分から72時間程度で反映されると思います。そしてルートネームサーバーへの変更が完了した後も、キャッシュの関係上、しばらくの間、古い情報が返されることがあります。

nslookupで変更を確認します。
(Linux, MacOS, Windowsで同じコマンドで確認できます)

```bash
$ nslookup -type=NS example.com
$ nslookup -type=SOA example.com
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/9fb3feae-5bc3-4fb2-85ba-435cabf78b3e.png)

確認ができたらネームサーバ変更は完了となります。
もし、Route53でドメインを購入した場合は、DNS Managementで該当ドメインが管理されているはずなので削除してください。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/f5504680-317a-1b4a-324b-bd7d39b29245.png)

# Azure Static Web Apps

Custom domainを設定するには左メニューからSettings > Custom domainsをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/c9dfcf3f-57e8-820a-9bd4-a055072d9a9d.png)

AddメニュをクリックしてDomain nameに変更したドメインを作成します。ルートドメインで入力します。サーブドメインを入力しても構いませんが、ルートドメインより簡単なのでここではルートドメインで説明します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/308c580c-0bb6-20cf-2c95-2747cf4cdb9f.png)

レコードタイプを「TXT」にデフォルトままにしてGenerate codeボタンをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/45afeaf5-57b1-a659-e39e-8fe2c29a3be0.png)

Value値が現れたら一旦Azure Static Web Apps側で設定は完了となります。StatusはValidatingとなりますが、Azure DNSで設定が加われば認識されて設定が完了されます。

# Azure DNS

Record Setメニュをクリックします。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/2d7a083d-279e-cf75-53b6-0269ac5b3454.png)

Nameを@と入力し、
TypeをTXTを選択して
Valueを先ほど生成した値を入力してレコードを追加します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/946d7687-4fa8-9065-d998-872e72f740e9.png)

ここまで事実設定作業を完了となります。残りは最終確認のみです。

# Azure Static Web Apps

しばらくすると、下記のようにStatusがReadyと変更されたら変更作業を終了となり、Custom DomainでAzure Static Web Appsで作成したウェブサイトにアクセスできるようになります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/287622/44dae645-1d32-a10a-da6f-f2a6007c836f.png)

# まとめ

サーブドメインをAzure Static Web AppsでCustom Domainに使うことはあまり問題なくできますが、ルートドメインはドメイン管理サイトからALIASをサポートしておかないと設定できないので、Azure DNSゾーンで設定してみました。
Azure Static Web Appsは私がものすごく欲しかったサービスなので今後も良いデーマーで投稿して技術共有して参りたいと思います。