5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2021-07-04

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

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

image.png

AWS Route53

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

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

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

image.png

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

image.png

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

image.png

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

image.png

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

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

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

image.png

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

image.png

Azure Static Web Apps

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

image.png

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

image.png

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

image.png

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

Azure DNS

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

image.png

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

image.png

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

Azure Static Web Apps

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

image.png

まとめ

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

5
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?