.htaccessで指定時間になったらメンテナンス画面を表示する

課題を持った人

今度Webサーバのメンテナンスがあって、指定の時間になったらメンテナンス画面を表示したいです。さらに、指定の時間になったらメンテナンス画面からWebサイトの表示に切り替えたいです。.htaccessを使うといいと聞いたんだけど、使い方を教えてください。

こういった要望に答えます。

以下の環境で動作を確認しています。

サーバのOS：CentOS 7
Webサーバ：Apache

1 .htaccessについて
2 .htaccessを使ってメンテナンス画面を表示してみよう

.htaccessについて

.htaccess(ドットエイチティーアクセス)を使うとWebサーバをディレクトリ単位で制御することができます。例えば、以下のようなことが実現できます。

Webサイトにアクセスがあった時にメンテナンス画面を表示する
特定のIPアドレスやドメインからのアクセス制限
Webサイトリニューアル時のリダイレクト処理
ベーシック認証

.htaccessは、設置したディレクトリとそのディレクトリ配下に対して有効です。もし、.htaccessを設置したディレクトリ配下にも.htaccessが存在する場合は、配下の.htaccessの設定が優先されます。

.htaccessを使ってメンテナンス画面を表示してみよう

それでは早速、指定の時間になったらWebサイトの表示が「メンテナンス中」になるような仕組みを作っていきましょう。

以下の手順で進めます。

メンテナンス中の画面(maintenance.html)を作成します
.htaccessを作成します

1.メンテナンス画面を作成しよう

メンテナンス中の画面は、htmlとcssを使って以下のようなページを準備します。パソコンのデスクトップに作業フォルダ「work」を作ってその中に、maintenance.htmlというファイル名で保存しましょう。

<!doctype html>
<html lang="ja">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta charset="utf-8">
  <title>サーバーメンテナンスのお知らせ</title>
  <style>
    * {
      color: #222;
    }
    html {
      font-size: 14px;
    }
    .wrap {
      width: 94%;
      margin: 2em auto 2em;
    }
    h1 {
      text-align: center;
      font-size: 1.6em;
      line-height: 1.4;
    }
    main {
      max-width: 600px;
      margin: 0 auto;
    }
    p {
      font-size: 1em;
      line-height: 1.8;
    }
    dl {
      margin: 0 auto;
      border: 1px solid #ccc;
      padding: 1em;
      display: table;
      line-height: 1.8;
    }
    dd {
      margin-left: 0;
      font-weight: bold;
    }
    .notes {
      font-size: 0.9em;
      display: table;
      margin: 1em auto 0;
    }
    @media screen and (min-width: 600px) {
      html {
        font-size: 16px;
      }
    }
  </style>
</head>
<body>
  <div class="wrap">
    <h1>サーバーメンテナンスのお知らせ</h1>
    
    <main>  
      <p>現在、サーバーのメンテナンス中です。お客様にはご不便をおかけいたしまして、誠に申し訳ございませんが、ご了承くださいますようお願い申し上げます。</p>

      <dl>
        <dt>■Webサイトの閲覧およびサービスの休止日時</dt>
        <dd>yyyy年mm月dd日hh:mm～yyyy年mm月dd日hh:mm</dd>
      </dl>

      <p class="notes">※作業の状況により終了時間が前後することがございますのでご了承下さい。</p>
    </main>
  </div>
</body>
</html>

<!doctype html>

<head>

<title>サーバーメンテナンスのお知らせ</title>

<style>

* {

color: #222;

}

html {

font-size: 14px;

}

.wrap {

width: 94%;

margin: 2em auto 2em;

}

h1 {

text-align: center;

font-size: 1.6em;

line-height: 1.4;

}

main {

max-width: 600px;

margin: 0 auto;

}

p {

font-size: 1em;

line-height: 1.8;

}

dl {

margin: 0 auto;

border: 1px solid #ccc;

padding: 1em;

display: table;

line-height: 1.8;

}

dd {

margin-left: 0;

font-weight: bold;

}

.notes {

font-size: 0.9em;

display: table;

margin: 1em auto 0;

}

@media screen and (min-width: 600px) {

html {

font-size: 16px;

}

</style>

</head>

<body>

<h1>サーバーメンテナンスのお知らせ</h1>

<main>

<p>現在、サーバーのメンテナンス中です。お客様にはご不便をおかけいたしまして、誠に申し訳ございませんが、ご了承くださいますようお願い申し上げます。</p>

<dl>

<dt>■Webサイトの閲覧およびサービスの休止日時</dt>

<dd>yyyy年mm月dd日hh:mm～yyyy年mm月dd日hh:mm</dd>

</dl>

<p class="notes">※作業の状況により終了時間が前後することがございますのでご了承下さい。</p>

</main>

</div>

</body>

</html>

画面の内容は以下になります。

maintenance.htmlは.htaccessの動作とは関係ないのでデザインは好きなようにアレンジしていただいて問題ありません。

.htaccessを作成しよう

つぎに、workフォルダの中に、.htaccessというファイルを作成しましょう。僕はSublime Text 3で作成しました。以下のように入力して保存しましょう。

.htaccessの内容はつぎのようにします。

ErrorDocument 503 /maintenance.html

<IfModule mod_rewrite.c>
RewriteEngine On

RewriteCond %{TIME_YEAR}%{TIME_MON}%{TIME_DAY}%{TIME_HOUR}%{TIME_MIN} ">201903062359"
RewriteCond %{TIME_YEAR}%{TIME_MON}%{TIME_DAY}%{TIME_HOUR}%{TIME_MIN} "<201903070300"
RewriteCond %{REQUEST_URI} !=/maintenance.html

RewriteRule ^.*$ - [R=503,L]
</IfModule>