メインコンテンツへスキップ

Cloudflare Pagesで独自ドメインのサブドメインを設定する手順と注意点

·2174 文字·5 分

はじめに
#

Cloudflare Pagesは、非常に高速で柔軟なホスティングプラットフォームです。プロジェクトをデプロイするとデフォルトで *.pages.dev というサブドメインが割り当てられますが、本番運用やブランディングを考えると、自分が所有している独自ドメインのサブドメイン(例:sub.example.com)で公開したいケースが多いかと思います。

今回は、ドメイン自体の管理もCloudflare(Cloudflare Registrar)で行っているケースを例に、Pagesへのサブドメイン割り当て手順から、SSL証明書の自動発行、そして運用時の注意点までを詳しくまとめました。


サブドメイン運用のメリット
#

サブドメインとは、[任意の文字列].inakacloud.com のように、主となるドメイン(ルートドメイン)の配下に新しく作成するドメインのことです。

本ブログ(inakacloud.com)を運用する傍ら、「特定の趣味の紹介サイト」や「特定のテストマーケティング用サイト」など、メインサイトとは独立したコンテンツを別プロジェクトとして立ち上げたいときに非常に重宝します。

同一のCloudflareアカウントでドメインを管理している場合、DNSレコードの書き換えや検証作業がほぼ自動化されるため、数クリックで新しいWebサイトの器を切り出すことが可能です。


前提条件
#

作業をスムーズに進めるために、あらかじめ以下の準備が整っているか確認してください。

  1. Cloudflare Pagesでのプロジェクト作成 GitHubやGitLabなどのリポジトリと連携し、ビルドおよび *.pages.dev での初期デプロイが完了していること。
  2. ドメインの権限 対象の独自ドメインが、作業中と同じCloudflareアカウントの「DNS」で管理されていること(Cloudflare Registrarで取得していればそのまま進めます)。

サブドメイン設定の4ステップ
#

1. Cloudflare Pages プロジェクトから設定を開始
#

まず、Cloudflareのダッシュボードにログインし、対象のPagesプロジェクトのページを開きます。

  1. 上部タブメニューから 「カスタムドメイン」 を選択します。
  2. 「カスタムドメインを設定」 という青いボタンをクリックします。

2. サブドメインの入力
#

ドメイン名の入力欄が表示されます。

  • ここには、新しく作成したいサブドメインをフルネームで入力します。
    • 入力例: keyquest.inakacloud.com
  • 入力に間違いがないことを確認し、 「次へ」 をクリックします。

3. DNSレコードの自動更新(Cloudflare連携の強み)
#

通常、別会社のDNSサービスを使っている場合は、手動でCNAMEレコードをコピペする必要がありますが、Cloudflareで一元管理している場合はこのステップが自動化されます。

  1. 「ドメインをアクティブ化」 (または「レコードを更新」)をクリックします。
  2. Cloudflareのシステムが、あなたのDNS設定に以下の CNAME レコードを自動的に追加してくれます。
タイプ 名前 ターゲット プロキシ状態
CNAME keyquest [プロジェクト名].pages.dev 制限付き(プロキシ有効)

4. SSL/TLS証明書の反映を確認する
#

設定を保存すると、Cloudflareがバックグラウンドで自動的にそのサブドメイン用のSSL/TLS証明書(HTTPS通信のための証明書)を発行・配置します。

  • 画面上のステータスが 「アクティブ」 に変わればすべての設定が完了です。
  • 通常は数分〜十数分で反映されますが、稀にDNSの伝播や証明書の発行に時間がかかることがあります。
Cloudflareドメインへのサブドメイン有効化

※ダッシュボード上でステータスが「アクティブ」に変われば、新しいURLでのアクセスが可能になります。


設定時のハマりどころと注意点
#

① サイト側(静的サイトジェネレーターなど)のBaseURL設定
#

Pages側の設定が完了しても、サイト内のリンクが切れてしまうことがあります。これは、HugoやAstroなどの静的サイトジェネレーター側の設定ファイル(hugo.tomlなど)にある baseURL が古いままになっていることが原因です。 カスタムドメインをアクティブにした後は、必ずプロジェクト側の設定ファイルも新しいサブドメイン(https://keyquest.inakacloud.com/)に書き換えて再デプロイを行いましょう。

② HSTSやSSLモードの競合
#

ルートドメイン側で「常にHTTPSを使用」や「HSTS(HTTP Strict Transport Security)」を強力に有効化している場合、サブドメイン側でもそのルールが引き継がれます。CloudflareのSSL/TLS暗号化モードは、原則として「フル」または「フル(厳密)」に設定しておくことで、証明書エラーによるアクセス不可トラブルを防ぐことができます。


まとめと応用
#

Cloudflare内のエコシステムを利用すれば、ものの5分で安全なサブドメイン環境を構築できます。

なお、もし役割を終えたサブドメインの公開を停止(クリーンアップ)したい場合は、Pagesの「カスタムドメイン」タブから該当ドメインの右側にある メニューを開き、「ドメインを削除」 を選択すれば、連動していたDNSのCNAMEレコードも含めて安全に自動削除されます。

新しい特設サイトや実験的なプロジェクトを立ち上げる際は、この手軽なサブドメイン運用をぜひ活用してみてください。

nakk
著者
nakk
ITとガジェット。個人的な振り返りや技術メモを中心に投稿しています。どなたかに少しでも役立てば嬉しいです。