🚀 はじめに：この記事でできること

Cloudflare は「Webサイトを高速化し、セキュリティを強化し、安定して公開する」ための強力なサービスです。世界中に分散したサーバー網を活用し、あなたのサイトをユーザーに近い場所から安全に届けてくれます。

この記事を読むと、次のことができるようになります。

  • Cloudflare の基本的な仕組みと役割が理解できる
  • GitHub Pages や自作アプリに Cloudflare を導入できる
  • DNS 設定や CDN の基礎がわかる
  • 初心者がつまずきやすいポイントを事前に回避できる

この記事の対象読者は次のような方です。

  • Web 公開に興味がある
  • GitHub Pages や Hugo でブログを運用したい
  • Python・Linux・アプリ開発に興味がある
  • セキュリティや高速化を簡単に実現したい

専門用語はできるだけ噛み砕いて説明しますが、「独自ドメイン」「DNS」「GitHub Pages」といった用語は最低限登場します。わからない用語があれば、その都度立ち止まって確認しながら読み進めてください。

🧭 前提：必要な環境と想定する読者

Cloudflare を使い始める前に、最低限そろえておきたい前提条件を整理します。

必要なもの

  • 独自ドメイン（例：example.com）
  • Cloudflare アカウント
  • 公開したい Web サイトの URL（GitHub Pages や自前サーバーなど）

想定する読者レベル

  • ブラウザでの Web サービス登録・設定ができる
  • DNS やドメインの概念はなんとなく聞いたことがある
  • コマンドラインは最低限触ったことがある程度でもOK

補足
独自ドメインをまだ持っていない場合は、先にドメイン取得サービスでドメインを取得しておく必要があります。

💡 概要：Cloudflareの役割とメリット

Cloudflareとは何か？

Cloudflare は、世界中に分散したサーバー網（CDN）を使って、あなたの Web サイトを高速・安全に届けるサービスです。ユーザーとあなたのサーバーの間に入り、通信を最適化・保護してくれます。

主な役割は次の3つです。

  • CDN（高速化）：世界中のユーザーに近いサーバーからコンテンツを配信する
  • DNS（ドメイン管理）：高速で安定した DNS サーバーとして機能する
  • セキュリティ：DDoS 対策・Bot 対策・WAF などで攻撃から守る

何が便利なのか？

Cloudflare を導入すると、次のようなメリットがあります。

  • Web サイトの読み込み速度が向上する
  • 無料プランでも強力なセキュリティ機能を利用できる
  • GitHub Pages や Vercel などのホスティングサービスと相性が良い
  • DNS が高速で信頼性が高い
  • 設定が GUI ベースでわかりやすい

どんな場面で使えるのか？

Cloudflare は、次のような場面で特に効果を発揮します。

  • GitHub Pages の独自ドメイン設定
  • Hugo ブログの高速化
  • API や Web アプリの保護
  • 海外ユーザー向けの配信最適化
  • サーバーの IP アドレスを隠したい場合

📱 Cloudflareをステップで学ぶ

ここからは、Cloudflare を実際に使い始めるための手順を、ステップ形式で解説します。各ステップでは「操作 → 目的 → 結果 → 注意・補足」の順で整理します。

⚙️ Step 1：Cloudflareアカウント作成とドメイン登録

操作：Cloudflareアカウントを作成する

  1. ブラウザで https://dash.cloudflare.com にアクセスする
  2. メールアドレスとパスワードを入力してアカウントを作成する
  3. ログイン後、「Add a Site」から自分のドメイン（例：example.com）を追加する

目的：Cloudflareでドメインを管理できる状態にする

Cloudflare にドメインを登録することで、そのドメインの DNS 設定やセキュリティ設定を Cloudflare 上から一元管理できるようになります。

結果：Cloudflare上にドメインが追加される

ドメインを追加すると、Cloudflare が既存の DNS レコードをスキャンし、現在の設定を取り込んでくれます。その後、Cloudflare から「ネームサーバーを Cloudflare 指定のものに変更してください」という案内が表示されます。

注意・補足：ネームサーバー変更の反映時間

Cloudflare にドメインを追加すると、ドメイン管理サービス側でネームサーバーの変更が必要になります。

注意
ネームサーバー変更の反映には、数分〜最大 24 時間程度かかることがあります。変更直後はサイトが不安定になることもあるため、余裕のある時間帯に作業するのがおすすめです。

🛠 Step 2：DNSレコードとプロキシ設定

ここでは、GitHub Pages を例に、Cloudflare 上で DNS レコードを設定する流れを確認します。

操作：DNSレコードを追加する（GitHub Pagesの例）

Cloudflare ダッシュボードで対象ドメインを選択し、「DNS」タブを開きます。

CNAMEレコードの追加（wwwサブドメイン）

  1. 「Add record」をクリックする
  2. Type に CNAME を選択する
  3. Name に www を入力する
  4. Target に username.github.io（あなたの GitHub Pages のホスト名）を入力する
  5. プロキシ設定（オレンジ/グレー）を選択する

Aレコードの追加（必要な場合のみ）

GitHub Pages の仕様や構成によっては、apex ドメイン（example.com）向けに A レコードを設定することがあります。このときは、GitHub Pages の公式ドキュメントに記載されている IP アドレスを参照してください。

目的：独自ドメインをGitHub Pagesに向ける

DNS レコードを設定することで、www.example.com や example.com へのアクセスを GitHub Pages に向けることができます。Cloudflare はその途中でキャッシュやセキュリティを提供します。

結果：独自ドメインでGitHub Pagesにアクセスできるようになる

DNS の反映が完了すると、ブラウザで https://www.example.com にアクセスしたときに、GitHub Pages 上のサイトが表示されるようになります。

注意・補足：プロキシ設定（オレンジ/グレー）の意味

Cloudflare の DNS レコードには、プロキシ設定（オレンジ/グレーの雲アイコン）があります。

  • オレンジ：Cloudflare 経由（高速化・セキュリティ ON）
  • グレー：Cloudflare を経由しない（DNS のみ）

初心者向けの目安
一般的な Web サイトやブログであれば、基本的にオレンジ（Cloudflare 経由）で問題ありません。
ただし、API や Webhook など、一部のサービスではグレー（DNS のみ）を推奨する場合があります。利用するサービスの公式ドキュメントも併せて確認してください。

🔧 Step 3：SSL/TLSとキャッシュの基本設定

Cloudflare を導入したら、SSL/TLS とキャッシュの設定も確認しておきましょう。

操作：SSL/TLSモードを設定する

  1. Cloudflare ダッシュボードで対象ドメインを選択する
  2. 左メニューから「SSL/TLS」を開く
  3. SSL/TLS モードを選択する（例：Full など）

GitHub Pages や多くのホスティングサービスでは、サーバー側も HTTPS に対応しているため、Full モードが推奨されることが多いです。

目的：HTTPS通信を安全に終端する

SSL/TLS モードを適切に設定することで、ユーザーと Cloudflare 間、Cloudflare とオリジンサーバー間の通信を安全に保つことができます。

結果：ブラウザからHTTPSで安全にアクセスできる

設定が正しく行われていれば、ブラウザのアドレスバーに鍵アイコンが表示され、https:// でサイトにアクセスできるようになります。

注意・補足：設定ミスによるリダイレクトループ

注意
サーバー側の HTTPS 設定と Cloudflare の SSL/TLS モードが噛み合っていないと、「Too many redirects」などのエラーが発生することがあります。
GitHub Pages のような一般的なホスティングサービスを利用する場合は、公式ドキュメントに記載された推奨設定を確認したうえで、Cloudflare 側のモードを選択してください。

操作：キャッシュをクリアする（Purge Cache）

サイトを更新したのに変更が反映されない場合は、Cloudflare のキャッシュが原因のことがあります。

  1. Cloudflare ダッシュボードで対象ドメインを選択する
  2. 左メニューから「Caching」を開く
  3. 「Purge Cache」→「Purge Everything」を実行する

目的：古いキャッシュを削除して最新のコンテンツを配信する

キャッシュをクリアすることで、Cloudflare がオリジンサーバーから最新のコンテンツを取得し直すようになります。

結果：サイトの更新内容が即座に反映される

キャッシュクリア後にブラウザをリロードすると、最新のコンテンツが表示されるようになります。

注意・補足：キャッシュクリアの影響範囲

補足
「Purge Everything」は全世界のキャッシュを一括で削除するため、アクセスが多いサイトでは一時的にオリジンサーバーへの負荷が増えることがあります。個人ブログや小規模サイトであれば、基本的には問題ありません。

🧪 Step 4：Cloudflare WorkersとCLI（wrangler）の利用例

ここでは、Cloudflare Workers を使いたい場合の CLI ツール「wrangler」の基本的な流れを紹介します。

操作：wranglerをインストールしてWorkersをデプロイする

wranglerのインストール

npm install -g wrangler

Cloudflareアカウントにログイン

wrangler login

新しいWorkerプロジェクトの作成

wrangler init my-worker

Workerのデプロイ

wrangler deploy

目的：サーバーレス環境で軽量なAPIや処理を実行する

Cloudflare Workers を使うと、サーバーを自前で用意せずに、エッジロケーションで JavaScript ベースの処理を実行できます。wrangler はそのための公式 CLI ツールです。

結果：Cloudflare上にWorkerがデプロイされる

wrangler deploy が成功すると、Cloudflare 上に Worker がデプロイされ、指定された URL で動作を確認できるようになります。

注意・補足：wranglerのバージョンと設定ファイル

注意
wrangler のバージョンによって、設定ファイルの形式（wrangler.toml など）やコマンドオプションが変わることがあります。利用時は必ず Cloudflare 公式ドキュメントで最新の使い方を確認してください。

⚠️ つまずきポイントと補足

Cloudflare を初めて使うときに、特につまずきやすいポイントを整理します。

DNS反映には時間がかかる
ネームサーバー変更や DNS レコードの更新は、すぐに反映されないことがあります。最大 24 時間程度のタイムラグを見込んでおきましょう。

SSL設定を間違えるとサイトが見えなくなる
サーバー側の HTTPS 設定と Cloudflare の SSL/TLS モードが合っていないと、リダイレクトループや証明書エラーが発生します。必ず利用中のホスティングサービスの推奨設定を確認してください。

キャッシュが強力すぎて更新が反映されないことがある
サイトを更新しても古い内容が表示される場合は、Cloudflare のキャッシュが原因のことがあります。「Purge Cache」を活用しましょう。

www と apex ドメインの設定が混乱しやすい
www.example.com と example.com のどちらを正規 URL にするかを決め、DNS レコードとリダイレクト設定を整理しておくとトラブルを減らせます。

✅ チェックリスト

Cloudflare 導入時に、次の項目をチェックしておくと安心です。

  • DNS レコード（A / CNAME）の向き先が正しいか確認した
  • ネームサーバー変更後の反映時間（最大 24 時間）を考慮している
  • SSL/TLS モードが利用中のホスティングサービスの推奨設定と一致している
  • サイト更新後にキャッシュが原因で反映されない場合の対処（Purge Cache）を把握している
  • www と apex ドメインのどちらを正規 URL にするか決めている
  • プロキシ（オレンジ/グレー）の意味を理解し、用途に応じて使い分けている

📚 参考リンク（公式中心）

Cloudflare や関連サービスの最新情報・詳細仕様は、必ず公式ドキュメントで確認するようにしましょう。

🔧 拡張案：次にやると良いこと

Cloudflare の基本導入ができたら、次のような拡張にも挑戦できます。

  • Cloudflare Workers でサーバーレス API を作る
  • Cloudflare Pages で静的サイトをホスティングする
  • Zero Trust 機能で社内向けシステムのセキュリティを強化する
  • Hugo + Cloudflare Pages の構成で高速なブログ環境を構築する
  • キャッシュルールや Page Rules を細かく設定してさらに高速化する

🎯 まとめ

  • Cloudflare は 高速化・セキュリティ・安定性 を無料プランから提供してくれる強力なサービスです。
  • GitHub Pages や Hugo などの静的サイトホスティングと相性が良く、初心者でも GUI ベースで扱いやすいのが特徴です。
  • 導入時は、DNS 設定・SSL/TLS 設定・キャッシュの挙動を理解しておくことが安定運用の鍵になります。
  • 本記事のステップに沿って設定すれば、Cloudflare の基本導入とトラブル回避のポイントを一通り押さえられます。

Cloudflare を使いこなすことで、あなたの Web サイトは一気にプロ品質に近づきます。次は Workers や Pages に挑戦して、さらにレベルアップしていきましょう。