WebAppsやAzureActiveDirectoryのURLは初期状態下記のドメインで固定です。
〇〇.onmicrosoft.comhttps://△△.azurewebsites.net/
ただ、自分で独自のドメインを使用したいときもありますよね。
そういうときはドメイン名の設定を行いましょう。
- 今回行うこと
- ドメインを購入する
- AzureActiveDirectoryにカスタムドメインを追加する
- WebAppsに独自ドメインを設定する
- 完成！！ ブラウザで表示できるか試してみよう
- 参照ページ
今回行うこと
- ドメインを購入する
- AzureActiveDirectoryにカスタムドメインを追加する
- WebAppsのURLにドメイン名を追加する
ドメインを購入する
まずドメインを購入する必要があったのですが、
Azure経由で購入すればAzureの請求にドメインの代金も含まれるので管理しやすいと思い、
Azureポータル上にあるWebAppsのドメイン購入を使用してドメインを購入しました。
「App Service」→「カスタムドメイン」→「App Service ドメイン」→「ドメインの購入」
ドメインの購入画面は下記のような画面が表示されますので画面の指示に従って入力してください。
既定のホスト名の割り当てはどちらもチェックを入れます。
OKを入力するとドメインの購入処理が始まります。
ドメインの購入が完了したら、リソースに「App Service ドメイン」と「DNSゾーン」が作成されていると思います。
AzureActiveDirectoryにカスタムドメインを追加する
次にAzureActiveDirectoryにカスタムドメインを追加していきましょう
基本的には下記ページを参照に進めていけると思います。
ドキュメントと違う部分のみ記述していきます。
docs.microsoft.com
「ドメイン レジストラーに DNS 情報を追加する」の部分はAzure DNSを使用する。
今回ドメインはAzureから購入したため、ドメイン レジストラーではなく、Azure DNSを使って情報を追加していきます。
docs.microsoft.com
さきほどドメイン購入完了時に作成された「DNSゾーン」のリソースを選択します。
「+レコードセット」のボタンをクリックしてDNSレコードを追加しましょう。
追加するレコードの値は下記の通り設定します。
| 項目 | 値 |
|---|---|
| 名前 | @ |
| 種類 | TXT |
| TTL | 60 |
| TTLの単位 | 分 |
| 値 | 設定する値の取得先はドキュメントの「ドメイン レジストラーに DNS 情報を追加する」の部分参照 |
以上でDNSレコード設定の追加は完了です。
Azureで扱っているDNSレコードについて詳しく知りたいかたは下記ページをご参照ください。
また、「カスタム ドメイン名を検証する」の部分は検証する前から利用可能になっていたので飛ばしました。
AzureActiveDirectoryのドメイン追加が完了
これにて設定完了です。
AzureActiveDirectoryのカスタムドメインプレートで今回追加したドメインをプライマリに設定しておきましょう。
AADのトップ画面などにドメイン名が反映されるのは少し時間がかかるかもしれません。
確認のため、ユーザー追加で今回のドメイン名を使ったユーザーを追加できるようになったことを確認しておきましょ。
WebAppsに独自ドメインを設定する
ホスト名を追加する
Webapp→カスタムドメイン→ホスト名の追加を選択します。
ホスト名に追加するルートドメイン名を入力します。
そうすると、下記の画面のようにドメインの所有権の部分でエラーが出ると思います。
エラー画面の指示通りにDNSレコードを追加しましょう。
DNSレコードを追加する
Azure DNSでDNSレコードを追加します。
先ほども使用したDNSゾーンを選択します。
Aレコードを追加します。「+レコードセット」を選択
| 項目 | 値 |
|---|---|
| 名前 | @ |
| 種類 | A |
| TTL | 60 |
| TTLの単位 | 分 |
| 値 | ドメインの所有権の部分で発生したエラーで指示された値 |
TXTレコードも追加しますが、TXTレコードは先ほど同じ種類のレコードを作成済みですので
既存の名前@、種類がTXTの既存のレコードを選択しましょう。
| 項目 | 値 |
|---|---|
| 名前 | @ |
| 種類 | TXT |
| TTL | 60 |
| TTLの単位 | 分 |
| 値 | ドメインの所有権の部分で発生したエラーで指示された値 |
ホスト名を追加画面に戻りホスト名を追加する
先ほど下記のようにエラーが出ていたと思いますが、
DNSレコードを追加したことでエラーがなくなり、
「ホスト名の追加」ボタンを選択できるようになっているので選択します。
選択すると、下記の画像のようにドメインが追加されます。
画像は違いますが「SSLバインディング」の部分はまだ未接続の状態になっていると思います。
これでWebAppsのアプリに対して独自のドメインでアクセスできるようになります。
【WebAppsの認証を入れている人のみ】応答URLに今回追加したドメインのURLを追加します
WebAppsにAD認証を入れている人は応答URLに今回追加したドメインのURLを追加しないとエラーになります。
下記2点のURLを追加しましょう。
https://<追加したドメイン名>https://<追加したドメイン名>/.auth/login/aad/callback
API Apps を使用している人はCORSの設定も追加するのを忘れないようにしましょう。
完成！！ ブラウザで表示できるか試してみよう
ブラウザのURLバーに追加したドメインを入力してみましょう。
WebAppsのアプリにアクセスできたら成功です。
※現段階ではSSL証明書の設定を行っていないため、ブラウザで警告が表示されると思います。
WebAppsで独自ドメインを使用する場合、SSL証明書の設定を自分で行う必要がある
WebAppsにSSL証明書をバインドする方法については別記事で紹介しようと思います。
