御成門プログラマーの技術日記

Microsoft AzureやAngularなどの技術情報を発信します

AzureWebAppsとAzureActiveDirectoryに独自ドメインを追加する

WebAppsやAzureActiveDirectoryのURLは初期状態下記のドメインで固定です。

  • 〇〇.onmicrosoft.com
  • https://△△.azurewebsites.net/

ただ、自分で独自のドメインを使用したいときもありますよね。
そういうときはドメイン名の設定を行いましょう。

今回行うこと

  • ドメインを購入する
  • AzureActiveDirectoryにカスタムドメインを追加する
  • WebAppsのURLにドメイン名を追加する

ドメインを購入する

まずドメインを購入する必要があったのですが、
Azure経由で購入すればAzureの請求にドメインの代金も含まれるので管理しやすいと思い、
Azureポータル上にあるWebAppsのドメイン購入を使用してドメインを購入しました。

「App Service」→「カスタムドメイン」→「App Service ドメイン」→「ドメインの購入」 f:id:tt-suzukiit:20190109182030p:plain

ドメインの購入画面は下記のような画面が表示されますので画面の指示に従って入力してください。
既定のホスト名の割り当てはどちらもチェックを入れます。 f:id:tt-suzukiit:20190110185153p:plain

OKを入力するとドメインの購入処理が始まります。
ドメインの購入が完了したら、リソースに「App Service ドメイン」と「DNSゾーン」が作成されていると思います。

AzureActiveDirectoryにカスタムドメインを追加する

次にAzureActiveDirectoryにカスタムドメインを追加していきましょう
基本的には下記ページを参照に進めていけると思います。
ドキュメントと違う部分のみ記述していきます。 docs.microsoft.com

「ドメイン レジストラーに DNS 情報を追加する」の部分はAzure DNSを使用する。

今回ドメインはAzureから購入したため、ドメイン レジストラーではなく、Azure DNSを使って情報を追加していきます
docs.microsoft.com さきほどドメイン購入完了時に作成された「DNSゾーン」のリソースを選択します。
「+レコードセット」のボタンをクリックしてDNSレコードを追加しましょう。 f:id:tt-suzukiit:20190109184851p:plain
追加するレコードの値は下記の通り設定します。

項目
名前 @
種類 TXT
TTL 60
TTLの単位
設定する値の取得先はドキュメントの「ドメイン レジストラーに DNS 情報を追加する」の部分参照

以上でDNSレコード設定の追加は完了です。
Azureで扱っているDNSレコードについて詳しく知りたいかたは下記ページをご参照ください。

onarimonstudio.hatenablog.com

また、「カスタム ドメイン名を検証する」の部分は検証する前から利用可能になっていたので飛ばしました。

AzureActiveDirectoryのドメイン追加が完了

これにて設定完了です。
AzureActiveDirectoryのカスタムドメインプレートで今回追加したドメインをプライマリに設定しておきましょう。
AADのトップ画面などにドメイン名が反映されるのは少し時間がかかるかもしれません。

確認のため、ユーザー追加で今回のドメイン名を使ったユーザーを追加できるようになったことを確認しておきましょ。

WebAppsに独自ドメインを設定する

ホスト名を追加する

Webapp→カスタムドメイン→ホスト名の追加を選択します。
f:id:tt-suzukiit:20190110185113j:plain ホスト名に追加するルートドメイン名を入力します。
そうすると、下記の画面のようにドメインの所有権の部分でエラーが出ると思います。
f:id:tt-suzukiit:20190110180734p:plain
エラー画面の指示通りにDNSレコードを追加しましょう。

DNSレコードを追加する

Azure DNSでDNSレコードを追加します。
先ほども使用したDNSゾーンを選択します。

Aレコードを追加します。「+レコードセット」を選択

項目
名前 @
種類 A
TTL 60
TTLの単位
ドメインの所有権の部分で発生したエラーで指示された値

TXTレコードも追加しますが、TXTレコードは先ほど同じ種類のレコードを作成済みですので
既存の名前@、種類がTXTの既存のレコードを選択しましょう。

項目
名前 @
種類 TXT
TTL 60
TTLの単位
ドメインの所有権の部分で発生したエラーで指示された値

ホスト名を追加画面に戻りホスト名を追加する

先ほど下記のようにエラーが出ていたと思いますが、
DNSレコードを追加したことでエラーがなくなり、
「ホスト名の追加」ボタンを選択できるようになっているので選択します。 f:id:tt-suzukiit:20190110180734p:plain

選択すると、下記の画像のようにドメインが追加されます。
画像は違いますが「SSLバインディング」の部分はまだ未接続の状態になっていると思います。
f:id:tt-suzukiit:20190110183028p:plain

これで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証明書をバインドする方法については別記事で紹介しようと思います。

参照ページ

docs.microsoft.com

docs.microsoft.com

docs.microsoft.com