Cloudflareのみを利用して、メンテナンスページを作成してみます。
Cloudflareのプロプラン以上になります
Cloudflareの以下の機能を利用します
- Pages
- Snippets
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の詳細は以下の記事をご参考ください！