Firebase Hosting でドメインを変更する

やることは、

Firebase Hosting で公開しているサイトを

既に公開しているドメインとは別のドメインで新たに公開する

という作業です。（お名前.com 　 → 　 Cloudflare Register というようなドメイン移管の話ではありません）

注意

変更作業のみにフォーカスしています。

変更による各種影響や対応についてはあまり触れませんので、ご了承ください。

準備

新しく追加するドメインを取得します。

具体的な手順は省略します。

Firebase で TXT レコードをコピーする

Firebase Hosting にて「カスタムドメインを追加」を押下します。

追加するドメインを入力し、「次へ」を押下します。

TXT レコードが表示されるので、コピーボタンでコピーします。

所有権確認

TXT レコード設定

DNS の設定を行います。

お名前.com で取得したのでお名前.com で設定していきます。

お名前.com にログインし、DNS 設定/転送設定のページを開きます。

お名前.com|DNS 設定

するとドメインの一覧が表示されます。

変更先のドメインを選択し、「次へ」を押下します。

DNS 追加オプションのお申込みではないのでご注意！

次の画面が表示されたら、「DNS レコード設定を利用する」という項目を探し、「利用する」を押下します。

レコードを入力する箇所に TXT レコードを入力し、「追加」を押下します。

追加という項目欄に追加されたことを確認し、ページ下部の「確認画面へ進む」を押下します。

内容を確認し、「確認画面へ進む」を押下します。

クソデカローディングアニメーションを眺めてしばらくまちます。（キャプチャ撮り忘れました。）

完了の表示と更新期限日が出たら OK です。

更新忘れるところだったぜ！サンキューな。

Firebase にて所有権を証明する

TXT レコードを設定したら、Firebase に戻り、「所有権を証明」を押下します。

反映までしばらくかかるようで、すぐに実施してもこのようなエラーとなります。

私の場合は、30 分では表示が変わらなかったのですが、2 時間以内には表示が出なくなりました。

エラーだとこのような表示になり、先に進めません。

A レコード設定

所有権の証明が完了し、先に進めることができた場合、 A レコードに設定する IP が表示されます。

この値をコピーし、再びお名前.com に戻ります。

お名前.com で A レコード設定

TXT レコードを設定したときの画面から、今度は A レコードを選択して入力します。

そして同じように追加>更新と手順を進めます。

Firebase で接続状況の確認

A レコードの設定が済んだ直後はこのように”保留中”となります。

しばらくすると”接続されています”に変わると思います。

既存ドメインの対応

古いドメインの A レコードが残っている状態で、リダイレクトの設定をしていると、古いドメインの URL でも新しいドメインに飛ばすことができます。

ただ、キャッシュによるものだと思いますが、リダイレクトされない場合がありました。

（スーパーリロードするとリダイレクトされました。）

他にも以下のような問題がありました。

・Android PWA で何度更新しても再起動しても内容が更新されない。

・Safari PWA の場合、常に別ビューで表示されているような状態になる。（PWA から別タブで開いたときの表示）

どちらにしても古いドメインの更新が切れたら使えなくなるので、早いうちに移行してもらって古い A レコードを削除するという対応になると思います。

【参考】Safari PWA の表示比較　※追記 2023/07/12

iOS Safari にて、旧ドメインの PWA でリダイレクトされるとこのような表示になります。


通常の場合はこうなっています。


お名前の UI が酷くて操作わからんという場合はここらへん参照するとわかると思います。