Webサイトのメンテナンス中画面を出す方法

2013年6月13日

Webサイトをメンテナンスする際に、どのURLにアクセスしても「現在メインテナンス中です」というページを表示する方法。

メンテナンスを知らせるページ（HTMLファイル）を作成し、サーバーのドキュメントルートに maintenance.htmlという名前（任意の名前）で保存。
上記と異なる名前（または保存場所）でファイルを作成した場合は、以下の「/maintenance.html」の記述を適宜変更。
.htaccess（またはhttpd.conf）に以下を記述する。
WordPress を使っている場合は、WordPress の記述の前（# BEGIN WordPress　より上）に、記述する。

ErrorDocument 503 /maintenance.html

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

<IfModule mod_headers.c>
  Header set Retry-After "Sun, 15 Jun 2013 6:00:00 GMT"
</IfModule>

RewriteCond %{REQUEST_URI}：メンテナンスを知らせるページ（HTMLファイル）のパスを指定
RewriteCond %{REMOTE_ADDR}：自分（管理者）のグローバル IP アドレスを指定（自分がアクセスした時にメンテナンス画面が表示されると、本番環境でのテストなどができない）。複数ある場合は、行を増やして追加する。
自分のグローバル IP アドレスを調べるには、Wan の外側のアドレスを調べられればいいが、できなければネットで簡単に調べられる。
Header set Retry-After：メンテナンス終了時間を指定（GMT で指定）

以下はメンテナンスページ（maintenance.html）の例。

メンテナンス中画面のページには、サイト名、メンテナンス期間（終了時間）、メンテナンス中であること、連絡先等を記述。
スタイリングする CSS はヘッド内に記述。
メールアドレスを表示する JavaScript は body の閉じタグの直前に記述。そうでなければ window.onload=function()～を使用。
CSS は「link」で外部スタイルシートでの読み込みも可能。JavaScript も外部ファイルでの読み込みも可能。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Maintenance</title>
<style><!-- CSS の記述 -->
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,p,blockquote,th,td {
  margin:0;
  padding:0;
}
...（省略）...
</style> 
</head>
<body>
<div id="container">
<div id="header">
<h1 id="toptitle">My Site </h1>
</div><!-- end of #header -->

<div id="content">
<h2>ただいまメンテナンス中です。ご迷惑をおかけしております。</h2>
  <p>Sorry. We're under maintenance.</p>
    <p>メンテナンス期間：本日午前10時～11時</p>
    <p id="contact"></p>

</div><!-- end of #content -->
<div id="footer">
<address>Copyright &copy; My Site. All rights reserved. </address>
</div><!-- end of #footer -->
</div><!-- end of #container -->

<pre>
<script type="text/javascript"><!-- メールアドレスを表示する JavaScript の記述 -->
<!--
    var contact = document.getElementById('contact');
    contact.innerHTML = '<a h' + 'ref="ma' + 'ilt' + 'o:info' + "&#64;" + 'mysite.com">info' + "&#64;mys"+ 'ite.com</a>';
// -->
</script>
</pre>
</body>
</html>

メンテナンスを知らせるページを作っている時間がない（緊急にメンテナンスをおこなければならない）場合は、以下を .htaccess（またはhttpd.conf）の最後に追記すれば、ユーザーには「Sorry. We’re under maintenance.」というメッセージを表示し、検索エンジンには503を返すことができる。

ErrorDocument 503 "Sorry. We're under maintenance."
RedirectMatch 503 .*

Web Design Leaves

Webサイトのメンテナンス中画面を出す方法

参考サイト