.htaccessでサイトをメンテナンスモード表示にする

5743 ワード
メンテナンス .htaccess 初心者 .htaccess テキストリンク

メンテナンス時は何も考えずベーシック認証かけたりしてます？メンテナンス時だったらメンテナンス表示にしましょう。

画面作成

まず、メンテナンス表示の画面を作ります。

<!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 {margin-top:50px;text-align:center;}
        h1 {font-size:1.5rem;}
        div.alert {
                max-width:800px;font-weight:bold;
                background-color: #D02D26;
                color:#fff;margin:30px auto;padding:1rem;
        }
    </style>
</head>
<body>
    <img src="/503.jpg">
    <h1>ただいまメンテナンス中です。</h1>
    <div class="alert">
        メンテナンス日時<br>
        9月21日 12:00 - 13:00
    </div>
    <p>
        ただいまホームページをご利用できません。<br>
        メンテナンス終了までしばらくお待ちください。
    </p>
    <p>
        <b>お急ぎの場合はこちら</b><br>
        Tel : 03-xxxx-xxxx<br>
        email : [email protected]
    </p>
    <p>
        ※作業の状況により終了時刻が延びる場合がございます。あらかじめ了承をお願いします。
    </p>
</body>
</html>

ファイル名を503.htmlとして(※なんでもいい)、内容はこんな感じ。

上記のサンプルは
https://nukumori-icon.com/tag/%E3%83%A1%E3%83%B3%E3%83%86%E3%83%8A%E3%83%B3%E3%82%B9/
上記サイトの画像を使わせていただきました。

.htaccess

htmlファイルの用意ができたら、次は.htaccessを編集。

ErrorDocument 503 /503.html
RewriteEngine On
RewriteCond %{REQUEST_URI} !/503.html
RewriteCond %{REQUEST_FILENAME} !^(.*)\.(jpg|png|css)$
RewriteCond %{REMOTE_ADDR} !xxx.xxx.xxx.xxx
RewriteRule ^.*$ - [R=503,L]

ステータスコード503を返すことで、メンテナンス中にたまたまGoogleのクローラーが来ても拾わせずに帰ってもらうことができます。

%{REMOTE_ADDR} で自分のIPアドレスを指定します。こうすることで、作業担当者だけは普通にサイトにアクセスできます。たぶんこれが分からなくてなんとなくベーシック認証にしちゃうんじゃないでしょうか？

あと、503.htmlやjpgファイルを制限対象から外している点もポイント。こうしないと503ページ自体が思ったように表示されません。

CPIの場合

※アクセス集中を表す 503 エラー（Service Temporarily Unavailable）につきましては、サーバー側で制御しているため、お客さまにて変更いただけません。ご了承ください。

とのことなので503は使えません。302リダイレクトなどで対応する必要があります。

Googleは「503を使うべき」と言ってますが・・

WordPressの場合

プラグインを使えば簡単。

最後に

https://www.google.com/search?q=Retry-After+503+.htaccess
数日間に渡ってメンテナンス状態にする場合は検索エンジン対策が必要です。

https://qiita.com/search?q=503+.htaccess
もっと高度なことをやりたいならキーワードはこちら。時刻で制御する書き方などもあります。