MENU
  1. ホーム
  2. ナレッジ
  3. 【Cloudflare】PagesとSnippetsを活用！特定IP以外をシャットアウトする「スマートなメンテナンス画面」の作り方

【Cloudflare】PagesとSnippetsを活用！特定IP以外をシャットアウトする「スマートなメンテナンス画面」の作り方

ナレッジ

Webサイトのシステムアップデートやデータ移行の際、欠かせないのが「メンテナンス画面（一時休止ページ）」の表示です。

一般的なサーバー構成の場合、Webサーバー（NginxやApache）のコンフィグを書き換えたり、.htaccessを調整したり、あるいはロードバランサー側で制御したりと、少々面倒な手順を踏むことが多くあります。

しかし、Cloudflare（プロプラン以上）を導入しているサイトであれば、サーバーに一切手を加えることなく、Cloudflare側だけでスマートに、かつアクセス制限（管理者IPのみ通過）をかけたメンテナンス画面を作成できます。

今回は、Cloudflare PagesとCloudflare Snippetsを組み合わせた、効率的なメンテナンス画面の構築手順をわかりやすく解説します。

目次

今回のアプローチ方法と使用する機能

今回は、以下の2つの機能を利用して構築します。

  1. Cloudflare Pages: メンテナンス画面となる「HTMLファイル」をホストします。これにより、重い画像を配置したり、デザイン性の高いHTMLファイルであってもCloudflareの高速なCDNから配信できます。
  2. Cloudflare Snippets: 「特定の管理者IPアドレス以外」のアクセスを検知し、PagesにアップロードしたHTMLを HTTPステータス 503（Service Unavailable） で応答させるためのスクリプト（プログラム）を動かします。

503エラーで返す理由

メンテナンス画面を通常の「200 OK」で返してしまうと、Googleなどの検索クローラーが「サイトの中身が変わった」と誤認し、SEO評価に悪影響を及ぼす可能性があります。一時的なメンテナンスであることをクローラーに正しく伝えるため、「503」ステータスで返すのがSEOにおける鉄則です。

導入手順

手順は以下の3ステップです。

  1. メンテナンス用のHTMLを用意する
  2. Cloudflare PagesにHTMLをデプロイする
  3. Cloudflare Snippetsにコードを設定して有効化する

Step 1. メンテナンス用のHTMLを用意する

まずは表示させたいメンテナンス用のHTMLファイルを作成します。 以下はレスポンシブ対応のシンプルなテンプレートです。この内容を index.html という名前で保存します。

HTML

<!DOCTYPE html>
<html lang=”ja”>
<head>
    <meta charset=”UTF-8″>
    <meta name=”viewport” content=”width=device-width, initial-scale=1″>
    <title>ただいまメンテナンス中です</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            background-color: #f7f7f7;
            font-family: “Helvetica Neue”, Helvetica, Arial, sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            text-align: center;
            color: #333;
        }
        .container {
            max-width: 500px;
            padding: 20px;
        }
        h1 {
            font-size: 2.2em;
            margin-bottom: 0.5em;
            color: #f38020;
        }
        p {
            font-size: 1.1em;
            line-height: 1.6;
            margin-bottom: 1em;
        }
    </style>
</head>
<body>
    <div class=”container”>
        <h1>ただいまメンテナンス中です</h1>
        <p>ご迷惑をおかけして申し訳ございません。<br>下記日時にて、サイトのメンテナンスを行っております。</p>
        <p>YYYY/MM/DD HH:MM 開始 YYYY/MM/DD HH:MM 終了予定</p>
        <p>しばらくしてから再度アクセスをお試しください。</p>
    </div>
</body>
</html>

注意点：ファイルの配置

Cloudflare Pagesにファイルを直接アップロードする際は、フォルダに入れた状態でアップロードする必要があります。 以下のように、任意のフォルダ（例: maintenance）を作成し、その中に index.html を配置してください。

Plaintext

maintenance/
└── index.html

Step 2. Cloudflare Pagesにデプロイする

  1. Cloudflareダッシュボードにログインし、左メニューから「Workers & Pages」を選択します。
  2. 「アプリケーションを作成する」 ＞ 「Upload your static files」 を選択します。
  3. プロジェクト名（例: my-maintenance-page）を入力します。
  4. 先ほど作成した静的ファイルが入った maintenance フォルダをドラッグ アンド ドロップします。
  5. アップロード完了後、「デプロイボタンをクリック」します。

デプロイが完了すると、[https://xxx.workers.dev/](https://xxx.workers.dev/) という一意のURL（仮ドメイン）が発行されます。 このURLにブラウザでアクセスし、メンテナンス画面が正しく表示されることを確認してください。（※このURLを次のStep 3で使用します）

Step 3. Cloudflare Snippetsの作成と設定

次に、本番環境へのアクセスをハンドリングするための「Snippets」を作成します。

※注意 Cloudflare Snippets機能は、Proプラン以上のゾーンでご利用いただけます。

  1. Cloudflareダッシュボードで, 対象のカスタムドメイン（本番ドメイン）の管理画面を開きます。
  2. 左メニューから 「ルール (Rules)」 ＞ 「Snippets」 を選択します。
  3. 「Snippetを作成する (Create Snippet)」 をクリックします。

スクリプトの記述

エディタが開きますので、以下のコードを貼り付けます。 （allowedIPs にはメンテナンス中もアクセスさせたい管理者や開発者のグローバルIPを、fetch(“[https://xxx.workers.dev/](https://xxx.workers.dev/)”) にはStep 2で作成したドメインのURLを記述してください）

JavaScript

// メンテナンス対象外（アクセスを許可する）にする管理者のIPアドレス
const allowedIPs = [
  “123.456.789.123”,  // 自社の固定IPなどに書き換えてください
  “987.654.321.012”   // 複数ある場合はカンマ区切りで追加可能
];

export default {
  async fetch(request) {
    const clientIP = request.headers.get(“cf-connecting-ip”);

    // 接続元IPが許可リストに含まれている場合は、通常処理（本番サーバーへ転送）を通す
    if (allowedIPs.includes(clientIP)) {
      return fetch(request);
    }

    // それ以外の一般アクセスには、Cloudflare Pagesのメンテナンス画面を「503」で返す
    const response = await fetch(“https://xxx.workers.dev/”); // Step2のURL
    const html = await response.text();

    return new Response(html, {
      status: 503,
      headers: {
        “Content-Type”: “text/html; charset=UTF-8”,
        “Cache-Control”: “no-store”, // ブラウザキャッシュを防ぐ
      },
    });
  },
};

ルールの適用（トリガー条件の設定）

スクリプトを入力したら、どのURL（カスタムドメイン）へのリクエストに対してこのSnippetsを適用するかルールを設定します。

ここで重要になるのが「ワイルドカード（*）」の使い方です。ワイルドカードを使うことで、「ここから先はどんな文字列が来てもすべて対象にする」という指定ができます。

  • ケース1：サイト全体をメンテナンスにしたい場合 ドメイン名（カスタムドメイン）のあとに /* をつけます。

例: [example.com/](https://example.com/)* トップページ（[example.com/](https://example.com/)）だけでなく、/about や /blog/123 など、サイト内のあらゆるページへのアクセスを漏れなくメンテナンス画面に誘導できます。

  • ケース2：特定のAPIやサブシステムだけをメンテナンスにしたい場合 特定のパスのあとに * を指定します。

例: [api.example.com/v1/](https://api.example.com/v1/)* メインのウェブサイトは稼働させたまま、アプリが通信するAPI機能（v1/*）だけを安全にメンテナンス状態（503）に切り替えることができます。

設定が完了したら、保存して有効化（Deploy）します。

動作確認

設定完了後、以下の挙動になっていれば成功です！

  • 許可リストに登録したIP（開発者環境）からアクセスした場合
    •  通常通り、本番サーバーに繋がり、調整中のWebサイトが表示される。
  • 許可リスト外のIP（スマホ回線など）からアクセスした場合
    • カスタムドメイン（example.com）のまま、Pagesで作ったメンテナンス画面が表示される。 
    •  デベロッパーツール（F12）のネットワークタブで確認した際、ステータスコードが 503 Service Unavailable になっている。

知っておきたい！「カスタムドメイン」と「ルーティング」の基本

ここで、今回の仕組みの裏側にある「ネットワーク的な話」を少しだけ整理しておきましょう。

Cloudflareでサイト（HTML）を作成・ホストすると、最初に [https://xxx.workers.dev/](https://xxx.workers.dev/) という「仮のドメイン」が自動で発行されます。

通常、作成した特設サイトやホームページなどを一般公開する際は、「カスタムドメイン（例: example.com）とルーティング（紐づけ）する」という設定を行います。「ユーザーが独自のカスタムドメインにアクセスしてきたら、システムへ直通で案内（ルーティング）してくださいね」という、道案内の設定です。

なぜ今回は、カスタムドメインのルーティング設定が「不要」なのか？

今回のメンテナンス設定では、ホスト側にはカスタムドメインをルーティング（紐づけ）していません。仮ドメイン（[https://xxx.workers.dev/](https://xxx.workers.dev/)）のままで完結しています。

なぜなら、ユーザーからのアクセスをキャッチして案内（ルーティング）するのはホスト側ではなく、手前で待ち構える「Snippets（スクリプト）」がその役割を代行してくれているからです。

  1. 一般ユーザーが、本番サイト（example.com）にアクセスする
  2. Snippetsが手前でアクセスをキャッチし、IPアドレスを判定する
  3. 一般ユーザーだった場合、Snippetsが裏側でこっそり仮URL（[https://xxx.workers.dev/](https://xxx.workers.dev/)）のHTMLを読み込みに行く（fetch）
  4. 読み込んできたHTMLを「はい、どうぞ」とユーザーへ返す（この際、ステータス503を付与）

このように、裏側でSnippetsが [https://xxx.workers.dev/](https://xxx.workers.dev/) に「データを取りに行ってくれている」だけなので、ホスト自体を本番のカスタムドメインに直接紐付ける必要がないのです。

まとめ：Cloudflareで完結させるメリット

従来のサーバー側でのメンテナンス制御と比較して、Cloudflare（Pages × Snippets）を利用する手法には以下のような大きなメリットがあります。

  • オリジンサーバーの負荷がゼロ：大量のアクセスがあってもCloudflareのエッジサーバー側で処理されるため、オリジンサーバーを完全にシャットダウン・再起動している最中でもメンテナンス画面を維持できます。
  • SEOに優しい（503応答）：一時的なメンテナンスであることを検索エンジンに正確に伝え、検索順位の低下を防ぎます。
  • コードがスッキリ綺麗に保てる：デザインされた長文のHTMLコードをSnippetsの中に無理やり埋め込む必要がなく、HTMLはPages側でスマートに管理・編集できます。

急なメンテナンスや計画停止の際に非常に役立つテクニックですので、Proプラン以上をご利用の企業様はぜひ活用してみてください！

当社では、Cloudflareの導入・移行支援から、プランのご相談、今回のような高度なルール設定（Snippets/Workers）の構築代行まで幅広くサポートしております。お気軽にお問い合わせください。

Web表示スピード改善・セキュリティ対策のCloudflare

導入のご相談だけでなく、運用フェーズでのサポートも承ります。
DDoS攻撃や悪質なBot（ボット）からのアクセスを防ぎたい方、WAF機能やプランの詳細を知りたい方、
国内エンジニアによる安心の運用サポートをご希望の方も、ぜひお気軽にお問い合わせください。

さらに詳しい情報を見る
資料をダウンロード（PDF） 無料の診断や導入トライアルご希望など
お問い合わせはこちら
ナレッジ

関連記事

目次