ムームードメインとCloudflareを利用した独自ドメイン設定手順
はじめに
本記事では、個人開発やポートフォリオサイトで独自ドメインを利用したい開発者に向け、ドメイン取得サービス「ムームードメイン」とCDNサービス「Cloudflare」を利用した独自ドメインの設定手順を解説していく
手順の概要は以下のように進めていく
- ムームードメインでのドメイン取得
- Cloudflareへのドメイン管理移管
- デプロイ先（Cloudflare Pages / Firebase Hosting）でのカスタムドメイン設定
本記事の内容に沿って作業を進めることで、自身のサイトを独自ドメインで公開することが可能となり非常に嬉しい！
1. ムームードメインでのドメイン取得
まず、ドメインを取得する
今回はムームードメインを利用した
筆者のニックネームであるuomiで検索したところ、取得可能なドメインの一覧と価格が表示された
今回は初めての独自ドメイン取得であったため、安価な.site（110円）を取得した
ドメインに関する詳細は、以下の公式ページなどを参照してみて
購入後、コントロールパネルのドメイン一覧を見てみると、取得したドメインが表示されていると思う
2. Cloudflareでのドメイン管理
次に、取得したドメインをCloudflareで管理するための設定を行う
移管設定の詳細は、以下の記事などを参考に進めた
なぜCloudflareを利用するのか？
ドメインを取得しただけではWebサイトを公開できず、ドメインとサーバーを紐付けるDNS（ドメイン・ネーム・システム）の設定が必要である
Cloudflareは、このDNS管理機能に加え、多くのメリットを提供する
- 無料のSSL証明書: 通信を暗号化するHTTPSを容易に導入できる
- CDNによる高速化: 世界中に分散したサーバーにサイトのキャッシュを配置し、ユーザーの所在地に関わらず高速な表示を実現する
- DDoS攻撃などのセキュリティ対策: 悪意のあるアクセスからサイトを保護する
これらの機能が無料で利用できるため、個人開発においてもCloudflareを導入する価値は大きい
Cloudflareにサインアップし、サイト（ドメイン）を追加すると、専用のネームサーバーが2つ割り当てられる
これは後の手順で利用するので表示したままにするか、どこかにコピペしておくといいかな
3. ムームードメインのネームサーバー変更
ネームサーバーとは？
ネームサーバーとは、ドメイン名（例: uomi.site）と、そのドメインに関連する情報（例: サイトが公開されているサーバーのIPアドレス）を管理する、インターネット上の「住所録」に相当するものである
ドメイン取得時点では、ネームサーバーはドメイン取得サービス（今回はムームードメイン）のものが設定されている
これをCloudflareのネームサーバーに変更することで、ドメインの管理権限をCloudflareに移管し、前述の各種機能を利用可能にする
ムームードメインのコントロールパネルから「ネームサーバ設定変更」画面を開き、「GMOペパボ以外のネームサーバを使用する」を選択し、Cloudflareから指定された2つのネームサーバーアドレスを設定する
4. DNS変更反映の確認
ネームサーバーの変更がインターネット全体に反映されるまでには、数分から最大で72時間程度かかる場合がある
変更が反映されたかどうかは、dnschecker.orgのようなツールで確認できる！自身のドメイン名を入力し、NSレコードがCloudflareのものに変更されていればOK！
5. Cloudflare Pagesへのカスタムドメイン設定
デプロイ先との紐付けを行なっていく
CloudflareのDNS設定画面でCNAMEレコードを追加し、ターゲットにCloudflare PagesのプロジェクトURL（例: xxxx.pages.dev）を指定する
その後、Cloudflare Pagesのプロジェクト設定画面から「カスタムドメイン」へ進み、設定したドメインを追加することで接続が完了する
なかなか変わらないことがあるが待とう！
6. Firebase Hostingへのカスタムドメイン設定
次にFirebase Hostingの場合である
こちらは注意点が一つ存在する
基本的な流れは同じく、CloudflareのDNSでCNAMEレコードを設定する
その際、プロキシ設定を必ず「DNSのみ」（グレーの雲アイコン）に設定する必要がある
プロキシが有効（オレンジの雲アイコン）な状態では、Firebaseがドメインの所有権を検証できず、NotFoundSiteエラーが発生する
参考: Cloudflare+Firebase Hostingで独自ドメインを使う
プロキシを無効化した後、Firebase Hostingのコンソールでカスタムドメインを追加する
これで正常に接続が確立されると思う
おわりに
本記事では、ムームードメインで独自ドメインを取得し、CloudflareでDNS設定を行い、最終的にCloudflare PagesやFirebase Hostingといったホスティングサービスに接続するまでの一連の流れを解説した
独自ドメインを取ってみて、ポートフォリオを書く機会に短いのでスラスラと書けるため非常にスマートだと思う
また、口頭でポートフォリオサイトのリンクを教えられるのは結構メリットだと感じた
あとはxxx.uomi.siteで統一できるので見栄えがいいということ...(見た目大事！)
個人開発・ポートフォリオ作成をして独自ドメインの設定をしてみたい人の手助けになれば幸いです