Amazon Cognito Hosted UIのCognitoドメインをカスタムドメインに変更してみた

#Amazon Cognito
#AWS
平井裕二
2024.08.27
 はじめにAmazon Cognito Hosted UIのCognitoドメインをカスタムドメインに変更する方法をご紹介します。
カスタムドメインに変更することで、ログイン画面のURLを自社ブランドに合わせたものにできます。
以前、ALB + EC2の構成にCognitoのHosted UIで認証する構築方法をご紹介しました。今回は、そのログイン画面のドメインをCognitoのデフォルトドメインからカスタムドメインに変更する手順を説明します。


Cognito ドメイン
https://dev.classmethod.jp/articles/alb-ec2-cognito-hosted-ui-2023/
 前提条件Amazon Route 53 パブリックホストゾーンで以下の設定が完了していること
ホスト名example.comを作成済み
レコード名example.comに対して、AレコードでALBのDNS名を値として設定済み
レコード名auth.example.comを、Hosted UIのログイン画面用カスタムドメインとして使用予定

バージニアリージョンで、ドメイン名example.com（*.example.comを含む）のACM証明書が発行済みであること
AWSドキュメントでは、カスタムドメイン名のサブドメインとしてauthの使用が推奨されています。
サブドメインとして [auth] を使用することをお勧めします。たとえば、「auth.example.com」を使用します。
親ドメインには、カスタムドメインではなく、A レコードが設定されている必要があるため、example.comをカスタムドメイン名にすることはできません。
その親ドメインには、DNS に有効な A レコードが必要です。このレコードには任意の値を割り当てることができます。親は、ドメインのルート、またはドメイン階層の 1 つ上の子ドメインです。例えば、カスタムドメインが auth.xyz.example.com の場合、Amazon Cognito は xyz.example.com を IP アドレスに解決できる必要があります。お客様のインフラストラクチャへの偶発的な影響を防ぐため、Amazon Cognito は、最上位ドメイン (TLD) のカスタムドメインへの使用をサポートしていません。
https://docs.aws.amazon.com/ja_jp/cognito/latest/developerguide/cognito-user-pools-add-custom-domain.html
 カスタムドメイン作成Cognito ユーザープールの設定画面で、[ドメイン]の[アクション]から[カスタムドメインを作成]を選択します。
カスタムドメインとしてhttps://auth.example.comを入力し、バージニアリージョンで事前に作成したACM証明書を選択します。その後、[作成]ボタンをクリックしてカスタムドメインを作成します。
前提条件でも説明しましたが、親ドメインexample.comはカスタムドメインに設定できません。エラーとなります。
message: Custom domain is not a valid subdomain: Was not able to resolve the root domain, please ensure an A record exists for the root domain.
また、example.comにAレコードが存在しない場合もエラーになります。example.comを設定していない場合、AWSのドキュメントに従って、以下のようなAレコードを作成する必要があります。

example.com. 60 IN A 198.51.100.1引用元:AWSドキュメント
message: Custom domain is not a valid subdomain: Was not able to resolve the root domain, please ensure an A record exists for the root domain.
カスタムドメインを作成すると、自動でCloudFrontのDNS名が発行されます。コピーしておきます。
Route 53で新しいレコードを作成します。レコード名をauth.example.com、レコードタイプをCNAMEとし、値には先ほどコピーしたCloudFrontのDNS名を入力します。
 試してみる設定が完了したら、ブラウザでhttps://example.com/にアクセスしてみましょう。
正しく設定されていれば、カスタムドメインであるhttps://auth.example.com/login?client_id=xxxx&redirect_uri=xxxxのログイン画面に自動的にリダイレクトされます。
 最後に本記事では、Amazon Cognito Hosted UIのCognitoドメインをカスタムドメインに変更する手順を詳しく解説しました。
今回はRoute53 パブリックホストゾーンを利用しましたが、他のDNSサーバーを使用しても同様の設定が可能です。ただし、具体的な手順はDNSサーバーによって異なる場合があるので、ご注意ください。