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.5em;
      margin-bottom: 0.5em;
    }

    p {
      font-size: 1.2em;
      margin-bottom: 1em;
    }

    .logo {
      max-width: 150px;
      margin-bottom: 1.5em;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>ただいまメンテナンス中です</h1>
    <p>ご迷惑をおかけして申し訳ございません。<br>現在、サイトのメンテナンスを行っております。</p>
    <p>しばらくしてから再度アクセスをお試しください。</p>
  </div>
</body>
</html>

CloudflareのPagesにHTMLファイルをアップロード

maintenance  
└── index.html

HTMLをアップロードする際はフォルダに入れる必要があります。

アップロード完了後はサイトをデプロイします。

Snippetsの作成

スクリプトの追加

// メンテナンスにしないIP
const allowedIPs = [
  "123.456.789.123"
];

export default {
  async fetch(request) {
    const clientIP = request.headers.get("cf-connecting-ip");
    console.log(clientIP)

    if (allowedIPs.includes(clientIP)) {
      // 管理者のIPなので通常処理へ
      return fetch(request);
    }

    // それ以外はメンテナンスページ（Cloudflare Pages）を503で返す
    const response = await fetch("https://xxx.pages.dev/"); // 作成したpagesのURL
    const html = await response.text();

    return new Response(html, {
      status: 503,
      headers: {
        "Content-Type": "text/html; charset=UTF-8",
        "Cache-Control": "no-store",
      },
    });
  },
};

作成したSnippetsを有効にすると、メンテナンスページになります。
ただ、Snippetsのスクリプトで定義したIPはメンテナンスにならず、通常のページへと遷移ができます。

メンテナンスのHTMLはSnippets内のスクリプトに記述しても良かったのですが、
ソースが長くなるので今回はPagesに配置しました。

Snippetsの詳細は以下の記事をご参考ください！