.htaccessを使ってサイトをメンテナンス画面にする #Apache

.htaccessとhtmlファイルでサイトをメンテナンスモードにする。
プログラム等でメンテナンスモードが用意されてない時や即席でユーザーのアクセスを遮断したい時に使える。

htaccessでリダイレクトする

ErrorDocument 503 /mente.html

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{REQUEST_URI} !=/mente.html
  RewriteRule ^.*$ - [R=503,L]
</IfModule>

この.htaccessをドキュメントルートに置くと /mente.html以外のアクセスはすべて/mente.htmlにリダイレクトされる。正確にはmente.htmlへのアクセス以外は503エラーとなり、503エラーの内容を/mente.htmlにしている。

特定のIPのみ閲覧可能としたい場合は以下のように。

ErrorDocument 503 /mente.html

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteCond %{REQUEST_URI} !=/mente.html
  RewriteCond %{REMOTE_ADDR} !=xxx.xxx.xxx.xxx
  RewriteRule ^.*$ - [R=503,L]
</IfModule>

メンテナンス画面の装飾（data URI scheme）

メンテナンス中である事を告知できればよいので、派手なデザインは必要ないけど、それでも多少の装飾は欲しい所。
でも画像を使いたい場合、上記の.htaccessでmente.html以外のファイルへのアクセスは503リダイレクトされてしまうので、ループになってしまう。
そのためbase64エンコードしてdata URI schemeとしてhtml内に記述してしまう。
「base64 画像　変換」とかでググって、変換サービスを利用してもいいけどシェルから以下のコマンドで画像のbase64化できる。

base64 test.png

実行するとbase64化された文字列が標準出力される

iVBORw0KGgoAAAANSUhEUgAAAHIAAAB4CAYAA...(略)

この文字列をmente.htmlのimg src内に記述したらOK

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHIAAAB4CAYAA...(略)" />

CSSはhtmlファイル内に書けばOK。

サンプルhtml

普段からメンテナンス用のhtmlファイルを用意してるといいかも。

mente.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>メンテナンス中です</title>
    </head>

<body>
    <div style="width:950px; margin:0 auto; background-color:#FFF; padding:50px 0;">
        <h1 style="text-align:center; color:#727171;">
            <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHIAAAB4CAYAA...(略)" />
        </h1>
        <p style="text-align:center; font-size:14px; color:#00A0E7;">
            メンテナンス中です
        </p>
        <p style="text-align:center; padding:25px 0;">
            申し訳ございません。只今メンテナンス中です。<br />
            メンテナンスの終了は午前00:00を予定しております。
        </p>
        <address style="font-style:normal; color:#666; font-size:12px; text-align:center;">
        Copyright c hoge Inc. All Rights Reserved.
        </address>
    </div>
</body>
</html>