Amplifyで構築したマルチテナントアプリに独自取得したドメイン（2階層のサブドメイン）を設定する

やりたいこと

Amplifyで作成しているサイトで、{企業名}.{stg/prd}.example.comのように、2階層のサブドメインを設定したい、というのがやりたいことです。

背景

現在構築中のマルチテナントアプリケーションで出てきた要件です。
企業ごとに異なるサブドメインを用意して、アクセスされたURLのサブドメインから企業を判断し、バックエンドに渡したかったです。

例えばBacklogもhttps://{企業名}.backlog.comのようなURLになっているので、同じような仕組みになっているのではないかと推測します。
今回は、企業名だけでなく、環境名（stg/prd）などの情報もドメインの中に含めたかったので、2階層のサブドメインの設定が必要でした。

やったこと

お名前ドットコムで取得したドメインのネームサーバの管理をRoute53に移す

ここは、お名前ドットコムでドメインを取得している場合のみ必要です。
以下のクラスメソッドさんの記事の通り設定しました。

https://dev.classmethod.jp/articles/route53-domain-onamae/

Amplifyでドメインの設定を行う

Amplifyの画面にいくと、サイドメニューに「ドメイン管理」という項目があるので、これを選択し、次に「ドメインを追加」をクリックします。

以下画面で先程設定したドメインが選択肢として出てくるので、選択して「ドメインを設定」をクリックします。

すると、以下のようにサブドメインを入力できるエリアが出現するので、2階層のサブドメインは設定できないんだろうなーと思いつつ、ダメ元でcompany-a.stgと入力して「保存」を押してみます。

すると、案の定バリデーションに引っかかりました。

対策として、次のステップでサブドメイン用のホストゾーンを作成することにします（こうすることで、stg.example.comのホストゾーンが作成され、amplifyのドメイン設定では2階層のサブドメインを設定しなくてよくなります、ただ、ベストプラクティスなのかは不明なので良い方法があれば教えてください）。

サブドメイン用のホストゾーンを作成する

ということで、サブドメイン用のホストゾーンを作成します。以下の公式ドキュメントの通り設定しました。

https://aws.amazon.com/jp/premiumsupport/knowledge-center/create-subdomain-route-53/

Amplifyでドメインの設定を行う（再度）

これで、再度Amplifyの画面にいってドメインの設定を行います。追加したサブドメインのホストゾーンを選ぶと、今度は企業名（以下の例だとcompany-a）だけ入力すればOKなので、バリデーションには引っ掛からず設定が可能になります。

設定完了

以上で設定は完了です。
ちなみに、Route53の該当のホストゾーンをチェックすると、先程設定したcompany-a.stg.example.comがCNAMEとして設定され、CloudFrontと関連づけられていることが確認できます。