特定のIPアドレス以外はメンテナンスページを表示したいです
KurocoFrontのip_restricted_maintenance機能を使用して、特定のIPアドレス以外のアクセスに対してメンテナンスページを表示することができます。
設定概要
ip_restricted_maintenance設定では以下が可能です:
- 指定したIPアドレス以外の全てのアクセスにメンテナンスページを表示
- カスタムHTMLメンテナンスページの使用
- サブネットマスク記法による柔軟なIP範囲設定
- 複数のIPアドレスや範囲の設定
基本設定
kuroco_front.json設定ファイル
kuroco_front.json設定ファイルを以下の内容で作成または更新します:
{
    "ip_restricted_maintenance": [
        "111.111.111.111/32",
        "222.222.222.222/32",
        "192.168.1.0/24"
    ],
    "error_page": {
        "status_ip_503": "/maintenance.html"
    }
}
フレームワーク別ファイル配置場所:
- Nuxt 3: /public/kuroco_front.json
- Next.js: /public/kuroco_front.json
- その他のフレームワーク: ビルド出力のルートディレクトリ
ヒント
カスタムメンテナンスページを指定しない場合、許可されていないIPアドレスからのアクセスには標準的な「503 Service Unavailable」エラーが表示されます。
カスタムメンテナンスページ(HTML)
カスタムメンテナンスページのHTMLファイルを以下の内容で作成します:
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>メンテナンス中</title>
    <style>
        body {
            font-family: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Noto Sans JP', sans-serif;
            text-align: center;
            padding: 50px;
            background-color: #f5f5f5;
            margin: 0;
        }
        .maintenance-container {
            max-width: 600px;
            margin: 0 auto;
            background: white;
            padding: 40px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1 {
            color: #e74c3c;
            margin-bottom: 20px;
        }
        p {
            color: #666;
            line-height: 1.8;
            margin-bottom: 15px;
        }
        .contact {
            margin-top: 30px;
            padding-top: 20px;
            border-top: 1px solid #eee;
            font-size: 14px;
            color: #999;
        }
    </style>
</head>
<body>
    <div class="maintenance-container">
        <h1>🔧 メンテナンス中</h1>
        <p>現在、サービス向上のため定期メンテナンスを実施しております。</p>
        <p>ご不便をおかけして申し訳ございません。</p>
        <p>メンテナンス完了まで今しばらくお待ちください。</p>
        <div class="contact">
            <p>緊急のお問い合わせ: support@example.com</p>
        </div>
    </div>
</body>
</html>
フレームワーク別ファイル配置場所:
- Nuxt 3: /public/maintenance.html
- Next.js: /public/maintenance.html
IPアドレスの形式
| 形式 | 説明 | 例 | 
|---|---|---|
| 単一IP | 特定のIPアドレス | "192.168.1.100/32" | 
| サブネット | CIDR記法によるIP範囲 | "192.168.1.0/24" | 
| 複数IP | IPアドレス/範囲の配列 | ["10.0.0.1/32", "192.168.0.0/16"] | 
参考:KurocoEdgeとの比較
KurocoFrontでは基本的なメンテナンスシナリオに対応できますが、KurocoEdgeを利用すると、スケジュール設定されたメンテナンス時間の指定やパス単位でのアクセス制限など、より高度な設定が可能です。
詳しくはKurocoEdgeのドキュメントを参照してください。
| 機能 | KurocoFront | KurocoEdge | 
|---|---|---|
| IPベース制限 | ✅ | ✅ | 
| カスタムメンテナンスページ | ✅ | ✅ | 
| スケジュール設定 | ❌ | ✅ | 
| パス固有の制限 | ❌ | ✅ | 
サポート
お探しのページは見つかりましたか?解決しない場合は、問い合わせフォームからお問い合わせいただくか、Slackコミュニティにご参加ください。