📚 この記事でわかること

Cloudflareで購入した独自ドメインをFirebase Hostingに接続する方法
Firebaseのカスタムドメイン設定で発生する 「Too many redirects」 エラーの原因
Cloudflareの オレンジ雲（プロキシON） と グレー雲（DNSのみ） の違いと正しい使い方

✍️ はじめに

React で作ったアプリを Firebase Hosting に公開しようとしたとき、
「せっかくだから独自ドメインも使いたい！」と思い立って Cloudflare でドメインを購入しました。

しかし、いざ設定を始めてみると、「Too many redirects」 エラーが出たり、
Firebase の SSL 証明書がなかなか発行されなかったりと、初心者にはなかなか手強い問題が連発。

この記事は、そんなハマりポイントを一つずつ乗り越えた自分の備忘録としてまとめたものです。
これから同じように Firebase Hosting × Cloudflare で独自ドメインを使いたい人 の参考になれば幸いです。

🌐 第1章：独自ドメインの購入方法（Cloudflare）

✅ 手順1：Cloudflare にログイン

まだアカウントを持っていない場合は、Cloudflare 公式サイトからアカウントを作成します。

✅ 手順2：ダッシュボードから「ドメインの登録」を選択

✅ 手順3：希望のドメイン名を検索

希望するドメイン名を入力し、利用可能か確認します。
価格は年単位で表示されるので、予算に合うものを選びます。

✅ 手順4：購入手続きを完了

確認ボタンを押すと、支払い手続き画面へ移動できます。
購入に必要なカード情報などを入力することで購入できます。

🔧 第2章：Cloudflare 側での DNS 設定

独自ドメインを購入したら、次は Firebase Hosting に紐付けるための DNS 設定 を行います。
ここで正しく設定しないと、SSL証明書の発行やサイト公開がうまくいかなくなるため、慎重に進めましょう。

✅ 手順1：Cloudflare ダッシュボードから「DNSの設定」を開く

購入したドメインを選択し、左ナビから、DNS > レコード　を選択。以下のような設定画面が表示されます。

✅ 手順2：Firebaseでカスタムドメイン設定に必要な項目を確認

該当プロジェクトにアクセスし、左ナビのHostingを選択し、画面右下の「カスタムドメインを追加」をクリック

先ほど購入したドメインを入力

DNSに設定すべき項目が表示されます

✅ 手順3：必要なレコードを追加

必要なレコードを追加し、しばらく待てば、独自ドメインを反映させることができます。

レコードタイプ	名前	値	TTL	プロキシ
A	@	---.--.---.---	自動	DNS のみ
TXT	@	hosting-site=...	自動	DNS のみ

Firebase がドメインの所有権を確認し、SSL 証明書の作成プロセスに入る
ここで Firebase が「次の TXT レコードを追加してください」と指示してきます
正しく設定できていれば、SSL 証明書の作成が進行し、成功します

レコードタイプ	名前	値	TTL	プロキシ
TXT	_acme-challenge	Firebase 指定の値	自動	DNS のみ

✅ なぜ「DNS のみ」にする必要があるのか？

Cloudflare では、各レコードに対して「オレンジ雲（プロキシON）」か「グレー雲（DNSのみ）」を選択できます。

🙅

🙆

💡 オレンジ雲（プロキシON）の場合

オレンジ雲をONにしていると、Firebase が実施する独自ドメイン検証の際、以下の問題が発生します：

Hosting による ACME チャレンジで HTTP GET リクエストが 1 回以上失敗しました。
104.21.112.1: Too many redirects
104.21.16.1: Too many redirects

🤔 なぜオレンジ雲（プロキシON）だと「Too many redirects」エラーになるのか？by.ChatGPT

Firebase が独自ドメインを設定する際、SSL 証明書の発行のために ACME チャレンジ という仕組みを利用します。
このプロセスでは、Firebase が次の2つの検証を行います：

DNS TXT レコードの検証
HTTP リクエストでの認証確認（例：http://yourdomain.com/.well-known/acme-challenge/...）

🌐 オレンジ雲（プロキシON）だと何が起きる？

オレンジ雲を有効にしていると、Cloudflare が HTTP リクエストの入り口に立つ ことになります。
これによって以下のような問題が発生します：

Cloudflare がリクエストを受け取る → 本来オリジンサーバー（Firebase）に届ける前に リダイレクトやキャッシュ制御 を行う
Firebase の認証サーバーは、期待したレスポンスを得られず「もう一度試そう」と再試行
このリトライが繰り返され、結果的に「Too many redirects（リダイレクトが多すぎます）」となる

📖 実際の通信イメージ

Firebase（証明書発行）
↓ リクエスト送信
Cloudflare（プロキシON）
↳ 書き換え・キャッシュ・リダイレクト
↳ Firebase に届かない or 想定外のレスポンス
Firebase「認証失敗 → リトライ」
（以下ループして終了…）

オレンジ雲は「セキュリティ保護」「CDN最適化」のための機能ですが、
このケースでは逆に Firebase の認証を阻害してしまう原因 となります。
SSL 証明書が発行されるまで、プロキシは OFF（グレー雲）するのがいいと思います。

✅ 第3章：動作確認

すべての設定が完了したら、最後に独自ドメインが正しく機能しているかを確認します。
特に HTTPS化（SSL証明書の適用） と 正しいページ遷移 が行われることが重要です。

📌 確認項目リスト

https://yourdomain.com にアクセスして、鍵マーク（🔒）が表示されているか
アドレスバーに「保護された通信」や「接続は保護されています」と表示されるか
リダイレクトが正しく設定されているか（意図しない web.app への転送がないか）
各ページへのリンク遷移が問題なく行えるか
スマホや別ネットワーク（モバイル回線など）でも問題なく表示されるか

SSL証明書の発行直後は、DNSの反映に時間がかかる場合があります。
すぐに反映されない場合は、最大で24時間ほど待つことも考慮してください。

🎉 すべての確認が完了したら、独自ドメインでの運用準備は完了です！

📢 おわりに

この記事は、独自ドメインの設定に初めて挑戦した初心者が、
試行錯誤しながらまとめたものです。

もし間違いやもっと良い方法があれば、ぜひご指摘いただけると嬉しいです。
また、この記事は ChatGPT と相談しながら進めたため、
人間視点での「よりスマートな方法」や「こうした方が良い」というアドバイスがあれば大歓迎です！

📲 ご意見・フィードバックはこちらから

Twitter: @h1rai_s
GitHub: H1rai

最後まで読んでいただき、ありがとうございました！