Shifft – Web Design & Development

メンテナンス画面を表示させる方法(Apache 1.3対応版)

Webサービスを運営する上で、リリース後にサイトを改修することがあります。

普通はローカル環境で開発をして本番用のサーバーへアップするので問題は少ないのですが、ローカル環境と本番環境とでサーバーの設定が違っていたために上手く動作せず、ちょっとした手直しが必要になったり、大掛かりなファイルの入れ替え作業をする場合などでサービスを一時停止しなければならないケースはよくあります。こういうときは「メンテナンス中」の画面を表示させて、サービスにアクセスできないようにします。

これを実現させるためには下記の記事が参考になるのですが、これはApache 2.2系で検証済みのTipsで、Apache 1.3系では上手く動作しないようです。（原因は後述）

メンテナンス中画面を出す正しい作法と.httaccessの書き方 | Web担当者Forum

そこで今回は、Apache 1.3系でメンテナンスモードを表示させる方法をまとめてみます。

以下の条件が今回のポイントです。

• 特定のIPからのアクセスは普通にサイト閲覧が可能
• それ以外のIPからのアクセスなら、メンテナンス画面を表示
• HTTPヘッダに503のステータスコードを返す

やってることは簡単です。それではGO!!

1. メンテナンス時にアップロードするためのディレクトリを作成する

メンテナンス画面の表示に必要なファイル群をまとめるために、以下のようなディレクトリをサーバールートに作成します。
maintenance/

もちろんconstruction/でもtemp/でもなんでも良いです。

2. エラー画面のページを作成する

maintenance/の下にindex.htmlなどの名前で「メンテナンス中」のページを作成します。
できるだけ遊び心をもってデザインをすると、ユーザーは「しょうがないっか～」みたいな感じで思ってくれます。

このときの注意点としては、画像やCSS、JSのファイルまでのパスは/（スラッシュ）のようなルートから始まる書き方でないと、上手くパスが繋がりません。
使用する画像もmaintenance/の中に一緒にしておくと、管理が煩雑にならないと思います。

3. 503エラーを吐く 503.php を用意する

実は先ほどの参考記事だと.htaccessのmod_rewriteの記述で503エラーを出す指定が書かれているのですが、Apache 1.3系では300番台と400番台のエラーしか出せません。
そこで、PHPを使って503エラーを吐かせちゃいましょう。

maintenance/の下に503.phpを作成し、下記の内容を記述します。

1
2
3
4

<?php
header ('HTTP/1.0 503 Service Temporarily Unavailable');
include(dirname(__FILE__) . '/index.html');
?>

3行目の/index.htmlは、2.で作成したメンテナンス用のページを指定します。

4. .htaccessに記述する

いよいよ大詰め。サーバールート上の.htaccess内にリダイレクト処理に関する記述を書きましょう。

1
2
3
4
5
6
7
8
9

RewriteCond %{REQUEST_URI} !\.css$
RewriteCond %{REQUEST_URI} !\.js$
RewriteCond %{REQUEST_URI} !\.jpg$
RewriteCond %{REQUEST_URI} !\.gif$
RewriteCond %{REQUEST_URI} !\.png$
RewriteCond %{REQUEST_URI} !\.swf$
RewriteCond %{REMOTE_ADDR} !=192.168.0.1 #(管理者のIPアドレス)
RewriteCond %{REQUEST_FILENAME} !503.php
RewriteRule ^.*$ /maintenance/503.php [R,L]

1行目～6行目は、各画像ファイルなどをリダイレクトの対象からはずすための設定です。
これをしないと画像やCSSなどのファイルもリダイレクトしてしまい、正しく反映できません。

7行目で指定したIPのPCからアクセスするとリダイレクトの対象から外れるので、管理者だけは実際の動作を見ながら作業を行うことができます。

8行目は、リダイレクト後の無限ループを回避するための記述です。

9行目で実際のリダイレクト処理が書かれています。

検索クローラーは503のステータスコードを受け取るとページをキャッシュしないらしいのですが、一応心配な方はrobot.txtに下記を加えておいてください。

1
2

User-Agent: *
Disallow: /maintenance/

以上で完成です。

おまけ
メンテナンス画面のデザイン参考にどうぞ。
Effective Maintenance Pages: Examples and Best Practices | Design Showcase | Smashing Magazine