はじめに
私ごとではありますが最近、超簡易的なデジタル名刺を作成しました。そこでは、「CloudFront+S3」という王道の組み合わせに、Route 53経由でのカスタムドメインを設定しています。
ですが今回、GitHubと連携させた自動デプロイなどを試してみたいと思い、AWS Amplifyに移行しようと考えました。ここでふと、「CloudFrontに割り当てたカスタムドメインをAmplifyに割り当てようとするとどうなるのか？」と気になってしまいました。
せっかくの機会なので、実際に検証してみたいと思います。
CloudFrontとAWS Amplifyとは？
CloudFrontはいわゆるCDN（Contents Delievry Network）サービスと呼ばれるもので、世界中に設置されているエッジロケーションからコンテンツを迅速に配信するサービスです。
一方、Amplifyはウェブアプリケーションやモバイルアプリケーションを簡単にデプロイ・ホスティングできるフルマネージド型サービスとなります。インフラ周りに精通していなくとも、GUIのみで簡単にコンテンツを提供することができます。
いざ、実践！
ちょっと見づらくて申し訳ないですが、CloudFrontのディストリビューションにカスタムドメインが設定されていることを確認します。
（"代替ドメイン名"の項目に設定したドメイン名が記載されています）
カスタムドメインを用いたURLを指定すると、実際にアクセスできることを確認しました。
次にAmplify側で設定を行っていきます。Amplify環境の構築が完了すると……
自動的に払い出されたURLを用いてアクセスすることができました。
では、実際にカスタムドメインを設定してみましょう。「カスタムドメインの追加」という項目をクリックすると、ドメインを追加できるページが表示されます。ここに、CloudFrontに割り当てているカスタムドメインを選択しました。
サブドメインやSSL証明書の設定については、とりあえずデフォルトのままにしておきます。
これで準備が整ったので、いざドメインの追加を試みようとすると……
はい、カスタムドメインの設定に失敗しました。
原因が書かれている灰色の英文を以下に抜き出してみました。
One or more of the CNAMEs you provided are already associated with a different resource. (SDK Attempt Count: 1)
ざっくり翻訳すると、「君が指定したCNAMEは既に他のリソースと関連付けられてるでー」と書いてあります。
ここで代替ドメインの制約について調べてみたところ、以下の公式ドキュメントを見つけました。
このドキュメントを覗いてみると、ちょうど今回のような事例についての説明が載っていました。
今回は全く同じドメイン名を割り当てようとしたために失敗したようですね。
ところでこのドキュメント、実はCloudFrontについてのものだということに気づきましたでしょうか？実はAmplifyによるホスティングではCloudFrontを内部的に利用しているようでして、そのために上記の制約に引っかかってしまうようです。
（https://aws.amazon.com/jp/amplify/hosting/ より引用）
さて、Amplifyに既存のカスタムドメインを設定するにはまず、CloudFrontのディストリビューションからカスタムドメイン設定を削除する必要があります。やり方は簡単、CloudFrontディストリビューションの編集画面から削除ボタンを押すだけです。
（画像には映ってないですが、独自証明書の設定も一応解除しました）
変更を保存すると、程なくして代替ドメインが外れたことを確認できました。
この状態でカスタムドメインを用いたURLに再度アクセスしようとすると、失敗してしまいます。
この状態でAmplifyの画面に戻り、再度カスタムドメインの設定を行います。やや時間はかかりますが、無事にカスタムドメインが割り当てられました。
これで先ほどのURLにアクセスしてみると……
デジタル名刺が無事に表示されました！
終わりに
今回はCloudFrontに既に割り当て済みのカスタムドメインをAmplifyに設定しようとしたらどうなるかを検証してみました。検索すればすぐ答えまでたどり着けはしますが、実際に手を動かしてみることでいろいろと勉強になる部分も多かったです。AWSはまだまだ奥が深いですね！
今後、カスタムドメインを移行される際には、本記事がお役に立てれば幸いです！