1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

この記事誰得? 私しか得しないニッチな技術で記事投稿!
Qiita Engineer Festa20242024年7月17日まで開催中!

AmplifyのHostingでカスタムドメインを設定しようとしたら苦労した話

Last updated at Posted at 2024-07-03

AmplifyのHostingでカスタムドメインを設定しようとしたらハマりました。

2024年12月5日追記

その後も何度かAmplifyでHostingさせていて、段々とコツを掴んできました。
手順に従ってDNSレコードを設定しますがその際にポイントになることをまとめました。

  • Amplifyから指示があるまでレコードを追加しないこと。「〇〇のレコードがない」というエラーが出て初めて該当レコードを追加すること
  • 作業をやり直すことがありキャッシュされることを防ぐためにTTLは短め(可能であれば60秒以下)にすること
  • 慣れてくると作業をどんどん進めがちですが、ゆっくり、落ち着いて作業を行うこと。思ったよりAmplifyはゆっくりしている
  • うまく行かないなら全部消して、必ず消して、そこからやり直すこと。証明書の検証などはやり直しても同じ値が設定されるだろからとしてレコードを残しておくとエラーになる

はじめに

AmplifyのHostingにカスタムドメインを追加する際、ドメインの検証(所有権の確認)が行われます。
Route53で取得したもの、もしくはネームサーバをRoute53に指定しているものであればDNSレコードを自動的に生成してAWSの内部で検証作業を完了させてくれるのですが、今回は外部のDNSサーバを使っていました。

そうするとカスタムドメインを設定した後、検証のために2つのレコードを設定する必要があります。

image.png

一つは証明書(ACM)用のレコードで、 acm-validations.aws. で終わるドメイン向きのもの、もう一つは実際にHostingを行う上で必要な、ドメイン自身をAmplifyの内部の CloudFront に向けるものになります。

この検証なのですが、実際にどのようなレコードを設定するかについてはカスタムドメインを追加すし、しばらくすると分かります。
その内容にしたがってDNSレコードを設定するとAWSがレコードを確認し、正しい値が指定されていれば追加が完了…となるはずなのですが、出来ませんでした。

検証が完了しない場合、画面に「再検証」のボタンが現れます。普通に考えると指定された内容に従ってDNSを変更し、「再検証」を押せば検証されるかと思われますが、内部的にはカスタムドメインを再度指定し直したような挙動になっており、CloudFrontのアドレス(ホスト名)が変わります。

そのため、更に新しいものになっているため検証に失敗して… というループになってしまいます。

  1. カスタムドメインの追加
  2. (AWS) DNSレコードの決定
  3. (AWS) 検証中…
  4. (自分) DNSレコードの設定
  5. (AWS) 検証の失敗
  6. (自分) 再検証(以下ループ)

そうするといくら設定してもいたちごっこのように変わってしまい、カスタムドメインの追加が完了しませんでした。

しばらく困っていたのですが、通信ログを見ると最初の検証中の間にも通信をしているようで、その間になんとか変更できないか、と考えました。

解決策

まずはドメインのTTLを最小値(60)に設定しました。こうすることで可能な限り早く反映されます。

その後、DNSの検証中が進んでいる間にできるだけ早く内容を変更しました。
そうすることで再検証が出る前に検証が完了し、うまく追加することができました。

その他

この後、Amplifyでもう一度同じような現象に遭遇しました。

Screenshot 2024-11-13 at 12.58.36.png

カスタムドメインを追加しようとした際に下記のようなエラーメッセージになっています。

One or more aliases specified for the distribution includes an incorrectly configured DNS record that points to another CloudFront distribution. You must update the DNS record to correct the problem. For more information, see https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/CNAMEs.html#alternate-domain-names-restrictions (Service: AmazonCloudFront; Status Code: 409; Error Code: CNAMEAlreadyExists; Request ID: ; Proxy: null)

結論として原因は「DNSレコードを表示」から表示されるCNAMEを早く追加してしまっていたことが原因のようでした。
Amplifyが、ドメインが正しく接続されていることの検証は

  • 該当ドメインがどこのCloudFrontにも接続されていない
  • 該当ドメインが指定のCloudFrontに向けてCNAMEを正しく設定している

という二段階で行われるようで、早めに設定してしまうと最初の段階でエラーが出てしまうようです。たしかにエラーメッセージにそう書かれているのですが、正しく設定したつもりでいたためハマってしまいました。
解決方法は一度CNAMEのレコードエントリを削除し、しばらく待ってから追加し直すとうまくいきました。

1
2
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?