🕌

Azure Static Web Apps で作成したサイトにGoogleドメインの独自ドメインを設定する

2022/01/05に公開約2,200字

Azure Static Web Apps にデプロイした静的サイトにカスタムドメインを設定してみます。

Azure Static Web Apps を開くと、左側の「設定」メニューに「カスタムドメイン」というメニューがあります。

この「カスタムドメイン」をクリックして左上にある「追加」ボタンを押します。

すると「ドメインの入力」が出てくるので、Google ドメインで登録済みのドメイン名を入力します。

Google Domains の「マイドメイン」の「名前」列の値をコピペですね。

「次へ」をクリックします。

すると次に、「検証と構成」に進みます。

ここでは、

  • ドメイン名
  • ドメイン所有権の検証
  • ホスト名レコードタイプ
  • ドメインを所有していることを確認するコードを生成します

という表示が出てきます。

ホスト名レコードタイプは TXT か CNAME が選択できます。

CNAME の場合

  • 種類(CNAME)
  • ホスト(www またはサブドメイン)

TXT の場合

  • 種類(TXT)
  • ホスト(@またはサブドメイン)

が表示されます。

ここでは TXT を選択して、「コードの生成」ボタンをクリックします。
ドメインを所有していることを確認するコードを生成しています。

しばらくすると、種類、ホスト、値、状態の列があるテーブルに「値」が表示されます。

この「値」をコピーしましょう。

そして Google ドメインに設定します。

Google ドメインの「すべてのドメイン」から設定する先の「マイドメイン」を選択・クリックします。

左側のメニューに「DNS」が表示されるので、「DNS」をクリックします。

カスタムレコードの「タイプ」にTXTを指定します。

テキストボックスが 4 つ並んでいますので、以下の値を設定します。

  • ホスト名(空のまま)
  • タイプ(TXT を選択)
  • TTL(3600 のまま)
  • データ(Azure の TXT でコピーした値を貼り付ける)

Azure 側に戻ってカスタムドメイン一覧を見てみると、「状態」の列に「検証中」と表示され、ローディングがぐるぐると回っています。

何度かページをリロードすると、「状態」が「準備完了」になります。

Google ドメインに CNAME を指定する

Azure のカスタムドメインの右側、「ドキュメント」の列に「CNAME または ALIAS レコードを追加します」と表示されます。

Google ドメイン側で CNAME を設定しろ、ということです。

Google ドメインの「DNS」を開き、「カスタムレコードの管理」をクリックし、「新しいレコードを作成」をクリックします。

新しいレコードには以下のように設定します。

  • ホスト名 - wwwを指定
  • タイプ - CNAME を指定
  • TTL - 3600 を指定
  • データ - Azure Static Web Apps で自動生成されたドメイン名を指定(mango-beach-xxxxxxxx.net みたいな、初期から使える長いやつです)

Azure Static Web Apps で無料の証明書を使用してカスタム ドメインを設定する

Using an Azure static web app with a Google domain

Azure Static Web Apps 側に www.domain を指定する

Azure Static Web Apps の カスタムドメイン を「追加」します。

「ドメイン名」にはwww.[Googleで持っているドメイン名] を入力します。

「次へ」をクリックして、ホスト名レコードタイプを CNAME とすれば完了です。

その後、Azure のカスタムドメインの「状態」が「準備完了」になるのを待ちます。

「準備完了」になってから www.ドメイン名 をブラウザで開くと、Azure Static Web Apps にデプロイしたサイトが開けます。

規定のドメインを設定する

色んなドメインで同じページが開けてしまうのは問題なので、リダイレクトの設定をします。

静的 Web アプリ - カスタムドメインの真ん中上の行に「★ 既定値の設定」とありますので、最後の手順で追加した www.[ドメイン名]を選択した状態で「★ 既定値の設定」をクリックします。

すると、「名前」が www.[ドメイン名](既定値)となります。元の mango-beach-xxxx.azurestaticapps.net を開くと、www.[ドメイン名] にリダイレクトされるようになります。

GitHubで編集を提案

Discussion

ログインするとコメントできます