---
title: 特定のIPアドレス以外はメンテナンスページを表示したいです
description: KurocoFrontのip_restricted_maintenance機能を使用して、特定のIPアドレス以外のアクセスに対してメンテナンスページを表示する方法を説明します。
category: howto
---

import StructuredDataFaqs from '@site/src/components/StructuredDataFaqs';

<StructuredDataFaqs faqs={[
    { question: "特定のIPアドレス以外はメンテナンスページを表示したいです", answer: "KurocoFrontのip_restricted_maintenance機能をkuroco_front.jsonで設定することで、指定したIPアドレス以外のアクセスに対してメンテナンスページを表示できます。カスタムメンテナンスページのHTMLファイルも作成可能です。" }
]} />

KurocoFrontの`ip_restricted_maintenance`機能を使用して、特定のIPアドレス以外のアクセスに対してメンテナンスページを表示することができます。

## 設定概要

`ip_restricted_maintenance`設定では以下が可能です：
- 指定したIPアドレス以外の全てのアクセスにメンテナンスページを表示
- カスタムHTMLメンテナンスページの使用
- サブネットマスク記法による柔軟なIP範囲設定
- 複数のIPアドレスや範囲の設定

## 基本設定

### kuroco_front.json設定ファイル

`kuroco_front.json`設定ファイルを以下の内容で作成または更新します：

```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`
- **その他のフレームワーク**: ビルド出力のルートディレクトリ

:::tip
カスタムメンテナンスページを指定しない場合、許可されていないIPアドレスからのアクセスには標準的な「503 Service Unavailable」エラーが表示されます。
:::

### カスタムメンテナンスページ（HTML）

カスタムメンテナンスページの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](https://kurocoedge.com/ja/)のドキュメントを参照してください。

| 機能 | KurocoFront | KurocoEdge |
|------|-------------|------------|
| IPベース制限 | ✅ | ✅ |
| カスタムメンテナンスページ | ✅ | ✅ |
| スケジュール設定 | ❌ | ✅ |
| パス固有の制限 | ❌ | ✅ |

